Skip to main content

Using Theme Editor

How to access Theme Editor
  1. Platform Panel
  2. Sales Channel
  3. Appearance
  4. Themes
  5. Edit [on the theme]

Introduction​

Theme Editor is a tool that allows merchants to customize their online store's appearance. It offers intuitive functionality, along with options to modify layout, colors, fonts, and media, enabling users to create a tailored and responsive storefront. With real-time previews and detailed configuration settings, the Theme Editor simplifies the design process for both developers and non-technical users, ensuring a consistent and visually appealing customer experience across the store.

Theme Permissions​

Users with theme collaborator or theme approver permissions can edit storefront pages using the theme editor. However, only one user can edit a page at any given time.

  • Requesting Edit Access: If no one is currently editing a page, you can start editing immediately. However, if another user is already editing the page, you’ll need to request access. The current editor will be notified and can choose to either:
    • Continue editing
    • Save changes and grant you access
    • Discard their changes and allow you to take over
  • Forceful Edit Access (for Approvers): Users with theme approver permission have the additional option to forcefully take edit access from the current editor. This ensures critical changes can be made when necessary, while still offering the option to request access.

Top Navigation Bar​

At the top of the Theme Editor, you’ll find the Top Navigation Bar with multiple controls and views to help you customize and preview your theme.

Components of the Top Navigation Bar​

  1. Page Selection Dropdown: This drop-down helps you preview and navigate between different sections of your theme like Home Pages, Product Listing Page, Profile, Product Detail Page, etc (it may vary as per the theme selected). It allows you to see the specific templates and sections your customers will interact with.
    1. You can navigate through these sections to see how they will look in your store.
  2. Device Preview Icons: Located next to the Home drop-down, these icons represent different devices (Desktop, Tablet, Mobile). Clicking on each icon will switch the theme preview to show how your website will look on each type of device.
  3. Save Button: On the left bottom, you will always see the Save button. Any changes made in the editor will not be live until you click this button. Always save your changes before exiting.

In the theme editor, there are three primary tabs available in the left sidebar: Sections, Page, and Settings. Each serves a distinct purpose in the customization process of your store's theme.

Sections​

This tab is generally available when you are editing a page that supports sections, such as the homepage. Sections allow you to add, remove, or rearrange visual and functional blocks on the page. Each section can be customized with various elements such as banners, collections, or sliders.

Next to each section name in the Sections Panel, you will see a small three-dot (kebab) menu. Clicking on it reveals several options, which are vital for section management:

Duplicate​

This option allows you to duplicate a section. For example, if you’ve designed a beautiful banner section, you can duplicate it without starting from scratch.

Settings​

It opens up additional settings options that are crucial for configuring how your website behaves beyond the visual elements.

General Settings​
  1. Screen Size
    1. This option is used to select on which screen sizes (desktop, tablet, and mobile) specific sections of your website should be visible.
    2. The Screen Size Visibility feature allows you to tailor the user experience across different devices. This is especially helpful when you want certain content to be visible only on larger screens (like desktop) or hidden on smaller screens (like mobile).
  2. Login State
    1. The Login State option allows you to control which sections of your website are displayed based on the user’s login status—whether they are logged in or logged out.
    2. Usage: You can set specific sections to be visible only to logged-in users, such as account details, order history, or wishlists, while hiding them from guests. This helps in creating a more personalized experience for logged-in customers while showing general information to visitors who haven't signed in.
    3. Why it's useful: This feature is valuable for ensuring that customers who are logged in see the relevant, personalized content (like order history, special promotions, or personalized recommendations), while guest users only see general content.
  3. Platform Settings
    1. This option is used to select which platforms (iOS, Android and Web) should have specific sections of your website visible.
    2. The Platform Settings Visibility feature allows you to tailor the user experience across different devices. This is especially helpful when you want certain content to be visible only on iOS or Windows
  4. Scheduler and Delivery Zone Settings
    1. This option allows you to control when certain sections of your website will be displayed by scheduling their visibility in advance.
    2. Zone-based Section Display: You can also choose specific geographic zones where sections of your website should be displayed. This feature enables you to tailor your content based on user location, allowing you to display certain banners, promotions, or content only in selected regions.
    3. Usage: With Scheduled Visibility, you can pre-plan the appearance of banners, promotions, or product highlights on specific dates or times. This is especially useful during special events, seasonal sales, or timed campaigns, ensuring that these changes go live automatically without manual intervention.
    4. The Zone-based Section Display allows you to target specific regions with location-based content or offers. For example, you might show region-specific promotions or banners in selected areas, improving the user experience by making the content more relevant.
    5. Why it’s Useful: These features allow you to streamline your website’s content management by automating updates and targeting specific audiences.
      1. Scheduled Visibility ensures that updates happen at exactly the right time without manual adjustments, saving time and allowing you to focus on other tasks during busy periods.
      2. Zone-based Section Display helps you localize your content and create a personalized experience for different regions, increasing engagement and conversion by delivering the right message to the right audience.
  5. Route Settings
    1. Route Settings help you configure custom URL routes for specific pages or sections in your store.

Remove​

Deletes the section from your theme layout. Be careful when using this option as you’ll need to re-add and configure it if you remove it accidentally.

Adding more sections​

At the bottom of the Sections list, you’ll see an Add Section button. Clicking on this button allows you to add various types of sections to your website.

These options help you reposition a section by moving it up or down in the layout.

Each section has specific settings. For example, in the Image Slideshow in Astra Theme, you can upload multiple images, set transition effects, and customize text overlays.

Editing Sections​

Allows you to modify the content and settings of that particular section by clicking on the section in the left edit panel. For example, in the Hero Image in Astra Theme, you can upload a new image, change headings, or alter CTA buttons.

Adding blocks within a section​

  1. Within a section, you can add blocks. Choose from:
    1. Default Blocks
    2. Extension Blocks

QG1

Figure 1: Add block

  1. Provide a name for the block to identify its content or function.
  2. After selecting and naming the block, click Save.

QG1

Figure 2: Save

  1. For more details about blocks, refer here.

Page​

The Page tab allows users to customize various settings for each page. The available settings depend on the specific page and theme being edited. This tab offers granular control over page-specific settings that are unique to the selected page. For example, in the Product Description page of the Astra theme, users can configure options such as displaying the seller information, displaying the item code, etc.

Settings​

The Settings tab allows for global changes that apply to the entire theme. Here, you can modify fonts, color schemes, header and footer settings, and other configurations that will affect every page within your theme.

Now, let’s explore the Settings tab on the left navigation panel. This is where you can configure your store's global settings.

1. General Settings​

Steps to Access:​

  1. In the left navigation bar, click on Settings.
  2. Under General Settings, you can adjust various options, including:
    1. Theme: Customize the overall theme colors, including page background, text, buttons, and discount colors.
    2. Fonts: Choose fonts for the Header and Body text.
    3. Authentication: You can enable or disable headers and footers during the user authentication flow.

2. Header Bindings​

The Header Bindings` section allows sellers to manage and customize the header of the storefront.

  1. To add new sections to the header, click Add Section and choose from available options such as default, global, or extensions sections.

QG1

Figure 3: Add block

  1. Each section has a context menu that allows seller to perform the following actions:
    1. Duplicate: Clone the section and use it elsewhere.
    2. Settings: Customize the sections’s properties.
    3. Remove: Delete the section from the header.

QG1

Figure 4: Section settings

  1. The Header Component is present in the header binding headers by default. This section can not be edited. The primary function of this component is to manage the positioning of other sections that sellers add to the header. Sellers can decide whether they want to place their additional sections above or below this default component.

QG1

Figure 5: Header component

The Footer Bindings section allows sellers to manage and customize the footer of the storefront.

  1. To add new sections to the footer, click Add Section and choose from available options such as default, global, or extensions sections.

QG1

Figure 6: Add section to footer bindings

  1. Each section has a context menu that allows seller to perform the following actions:
    1. Duplicate: Clone the section and use it elsewhere.
    2. Settings: Customize the sections’s properties.
    3. Remove: Delete the section from the footer.

QG1

Figure 7: Section settings

  1. The Footer Component is present in the footer binding headers by default. This section can not be edited. The primary function of this component is to manage the positioning of other sections that sellers add to the footer. Sellers can decide whether they want to place their additional sections above or below this default component.

QG1

Figure 8: Footer component

4. Header​

Steps to Customize the Header:​

  1. Under Settings, select Header.
  2. Choose the layout (single-row or double-row navigation).
  3. Align the Logo & Menu (Center or Left).
  4. You can preview the changes by selecting the desktop or mobile icons at the top of the page.
  1. In the Settings panel, click on Footer.
  2. Upload a logo for your footer section.
  3. Add a description for the footer.
  4. You can also upload a bottom bar image.
  5. Customize footer text and icons colors.

6. Typography​

This section allows you to change the fonts for headings and body text. The fonts you select here will be applied site-wide.

Steps​

  1. Select Typography from the Settings menu.
  2. Use the dropdown menus to select a Header Font (e.g., Playfair Display).
  3. Select a Body Font (e.g., Work Sans).
  4. Save your changes to apply them across your website.

7. Product​

You can adjust how your product cards look on the store.

Steps​

  1. Under Settings, select Product.
  2. Adjust the aspect ratio of your product cards by setting the width and height.
  3. Enable or disable the Sale Badge checkbox.
  4. You can also adjust the Container Background Color for the product cards.

8. Radius Configuration​

This option allows you to customize the roundness of images and buttons.

Steps​

  1. Under Settings, select Radius Configuration.
  2. Adjust the Image Border Radius by sliding the bar to increase or decrease the corner roundness.
  3. Similarly, adjust the Button Border Radius for all the buttons in your store.

9. Cart​

The Cart settings allow you to enable or disable the shopping cart functionality on your website.

Steps​

  1. Under Settings, click on Cart.
  2. You’ll find an option to Disable Cart. Check or uncheck this option based on whether you want the cart to be visible on your site.
  3. Save your changes once done.

Additional Settings​

Save​

Next to the Save button at the bottom left corner, there is another kebab menu with important options for overall theme configuration.

Options in the Bottom Kebab Menu:

Reset​

Clicking this option will revert your theme to its original state, undoing all the changes you have made. Be careful with this option, as it cannot be undone.

Update SEO​

When you click on the "Update SEO" option in the theme editor, a Search Engine Information popup window will appear. This window allows you to modify and optimize specific settings related to your site's SEO (Search Engine Optimization). Let's break down each field and option in detail:

SEO Title​

  • Field Name: Title
  • Explanation: This is the title tag for your webpage, which will appear in search engine results. It is one of the most important factors for SEO because search engines like Google use it to understand what your page is about.
  • Example: "Brunt Test Company - 1721634703929" Why it's useful: A well-optimized title helps search engines and users understand the content of your page and encourages people to click on your link in search results.
  • Generate Button:
    • You have an option to click on the Generate button to automatically generate an SEO title.
    • You can either Generate Using Custom Keywords by inserting the specific keywords you want the title to be optimized for, or you can simply allow the system to generate one for you.

SEO Description​

  • Field Name: Description
  • Character Limit: 600
  • Explanation: This is the meta description for the page. It provides a brief summary of the content on the page and may appear below the title in search results. Why it's useful: While meta descriptions don't directly impact SEO rankings, they are vital for click-through rates. A well-written meta description that includes keywords can persuade users to visit your site.
  • Generate Button:
    • Similar to the title, you can click the Generate button for the system to create a meta description for you.
    • You can click Generate Using Custom Keywords, and enter the keyword, which will allow you to specify keywords for the meta description to focus on.

Preview​

  • Below the SEO Title and Description fields, there is a Preview section. This gives you a live preview of how your page will appear in search engine results once the title and description are filled out.
  • Preview Details:
    • Title: It will display the current title based on your input.
    • URL: It will show the page’s URL structure.
    • Description: It will display the current meta description that will appear beneath the title in search results.

Why it's useful: The preview helps you to visualize how your changes will look in search engine results before they go live, allowing you to refine and perfect the text.

Canonical URL​
  • Field Name: Canonical URL
  • Explanation: A canonical URL tells search engines which version of a page is the original if you have multiple versions of similar content (e.g., different URLs for the same content due to URL parameters). Why it's useful: This ensures that search engines know which URL to index, thereby avoiding duplicate content penalties.
    • You can add the correct URL in this field to make sure that search engines prioritize that specific URL over any variations.
  • Field Name: Breadcrumbs (Level)
  • Explanation: Breadcrumbs are navigational elements that tell both users and search engines where the current page is located within the hierarchy of your website.
    • For example, a breadcrumb might show: Home > Collections > Product.

Why it's useful: Breadcrumbs help improve the user experience by allowing users to easily navigate to higher-level pages. Search engines also use breadcrumbs to better understand the structure of your site.

  • Add Level: You can click Add Level to further refine the hierarchy or breadcrumb trail for the page.
Sitemap Settings​
  • Fields:
    • Priority: A dropdown that lets you set the priority of this page within the sitemap. The value ranges between 0.0 and 1.0, where 1.0 means that this page has the highest importance, and 0.0 means the lowest.
    • Frequency: This dropdown allows you to tell search engines how often the content of the page is likely to change. Options include:
      • Always
      • Hourly
      • Daily
      • Weekly
      • Monthly
      • Yearly
      • Never

Why it's useful: By providing this information to search engines, you're helping them to more effectively crawl and index your site.

Meta Tags​

Meta tags are additional HTML tags that provide more information to search engines about your page. Common meta tags include those for keywords, author information, and robots instructions (for crawling and indexing).

Why it's useful: Meta tags, while not always visible to users, provide valuable signals to search engines that can affect indexing and ranking.

  • Add/Edit SEO Meta Button: Clicking this opens a form to add custom meta tags. Each meta tag contains the following:
    • Name: The name of the tag, e.g., keywords or robots.
    • Key: The key or attribute for the tag, e.g., content.
    • Value: The value associated with the tag, e.g., the actual list of keywords or instructions for robots.

You can add multiple meta tags by filling in these fields and clicking the Add button.

Click Preview to preview SEO meta.

Once you've completed all the fields and are satisfied with your SEO settings, you can click the Save button at the bottom of the popup window to apply your changes.

Custom Tags​

You can add custom CSS or JavaScript tags to your theme by selecting this option. This is useful for adding third-party tools, analytics, or additional customizations that are not available in the editor.

Here’s a step-by-step guide on how to use the “Custom Tags” feature in the Fynd platform. This guide is based on the screenshots and additional context you provided:

Step-by-Step Guide for Custom Tags​

  1. Accessing the Custom Tags
    1. From the Theme Editor screen, on the left sidebar, you will see a "kebab" menu (three dots) next to the "Save" button.
    2. Click on this kebab menu, and three options will appear: Reset, Update SEO, and Custom Tags.
    3. Select the Custom Tags option.
  2. Redirect to Custom Tags Page
    1. After clicking on "Custom Tags", you will be redirected to a different page in the platform where you can create and manage tags (as seen in the screenshots).
  3. Creating a New Tag
    1. Once on the Custom Tags page, you will see a screen displaying a list of existing tags or "No Items Found" if no tags have been created yet.
    2. To create a new tag, click on the Create button located at the top right corner of the screen.
  4. Filling in the Tag Details
    1. After clicking "Create", you'll be directed to the Create Tag form where you need to fill in several fields to define the custom tag. Here’s a detailed breakdown of the options:
    2. Name:
      1. Enter the name of the tag in the input field under “Name”. This name is for internal identification purposes.
    3. Choose File Type:
      1. You can choose between CSS or Javascript based on what type of tag you want to add to the page.
    4. Choose Sub Type:
      1. There are two sub-type options:
        1. External: If the file is hosted externally, like a CDN, or an external resource.
        2. Inline: If you want to add inline styles or scripts directly within the HTML structure.
    5. Choose Tag Position:
      1. Here, you can select where the tag should be placed in the HTML structure:
        1. Head: Add the tag to the <head> section, often used for CSS or meta tags.
        2. Body Top: The tag will be added at the top of the <body> section.
        3. Body Bottom: The tag will be added at the bottom of the <body> section, which is often where you would add Javascript files.
    6. Sub Type URL:
      1. If you have selected External as the subtype, enter the external file’s URL (e.g., CDN link or hosted CSS/JS file).
      2. If you chose Inline, this section will allow you to enter inline CSS or Javascript directly.
  5. Details Section (Right Panel)
    1. On the right-hand side of the Create Tag screen, you will find additional settings to configure the tag.
    2. Key and Value Pairs:
      1. You can specify custom attributes for the tag using key-value pairs. For instance, setting media="print" or other attributes that control how and when the tag is applied.
    3. Allow on All Pages:
      1. You can select this checkbox if the tag should be applied across the entire website, regardless of the page.
    4. Add Tag on Specific Pages:
      1. If you don't want the tag to be applied globally, you can specify the pages on which the tag should be added by selecting specific pages from the dropdown list.
    5. Compatible on All Engines:
      1. This option allows you to select whether the tag is compatible with all front-end engines or specific ones. You can select one or more of the following:
        1. React JS
        2. Vue JS
  6. Click Save button at the top right to create the tag after filling in all the details,
  7. Viewing and Managing Tags:
    1. Once a tag is created, it will appear on the Tags page.
    2. You can edit or delete tags from this screen using the action buttons located next to each tag.
note
  • Key and Value Pair Usage: The key and value pairs can be used to set custom attributes like onload, async, or to define conditions on when a script or style is applied.
  • CSS and JS Compatibility: Make sure the file type and sub-type chosen correspond with the script or style you intend to apply, as misconfigurations could lead to errors on your webpage.
  • SEO Consideration: If your tag is crucial for SEO, consider placing it in the <head> section so that search engines can properly index the content.

Was this section helpful?