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.

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 Verify Email, Wishlist, Blog Pages, About Us, and Legal Pages. 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.

  1. General Settings
    1. General Settings are the broadest settings that control many aspects of your theme.
    2. Here, you can modify the basic configurations such as layout styles, whether the header or footer should appear on specific pages, font selections, and theme colors.
    3. This section allows you to enable/disable global elements like showing the header or footer across the entire store.
  2. Screen Size
    1. This option is used to preview your website on different screen sizes such as desktop, tablet, and mobile. By selecting this, you can ensure that your theme is responsive and works smoothly across all devices.
    2. Why it's useful: With Screen Size, you can test and ensure your design is consistent and optimized for different types of devices. It’s particularly helpful for troubleshooting visual elements on mobile.
  3. Login State
    1. The Login State option allows you to toggle between the preview of your website when a customer is logged in versus logged out.
    2. You can visualize how different pages (like Account Pages) will appear to a logged-in user as compared to a guest user.
    3. Why it's useful: It's important for ensuring that logged-in customers experience your website as intended and see the proper personalized elements like order history, wishlist, etc.
  4. Platform Settings
    1. Platform Settings opens advanced options to configure platform-level settings, such as integrating with third-party services, adjusting sales channel behavior, and defining other structural elements.
    2. These settings can impact how your site interacts with backend APIs and data, so be cautious with these adjustments unless you are well-versed in the platform's architecture.
  5. Scheduler
    1. This option allows you to manage and automate specific scheduled tasks on your website.
    2. You can schedule banner changes, promotions, or product launches. This is especially useful for eCommerce stores that need to automate visual changes for sales or special events.
    3. Why it's useful: This feature enables you to plan and schedule future updates to your store without having to manually make changes in real-time.
  6. Delivery Zone Settings
    1. Delivery Zone Settings enable you to define geographic regions for delivery services on your eCommerce store.
    2. You can create specific zones based on regions or countries where your store operates.
    3. You’ll also have a CTA, “To learn more, Click here,” which can provide more guidance on setting up your delivery zones.
    4. Why it's useful: This is crucial for stores that need to differentiate shipping costs or options based on location. For example, you may want to offer free shipping in certain regions but not in others.
  7. Route Settings
    1. Route Settings help you configure custom URL routes for specific pages or sections in your store.
    2. You can define how different pages or resources (like blogs, products, or collections) are accessed by setting up SEO-friendly routes.
    3. Why it's useful: This is especially important for maintaining a clean and optimized URL structure, improving both customer experience and SEO performance. For example, setting product URLs as example.com/shop/product-name instead of a long and cluttered URL string.

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.

Types of Sections You Can Add​

  1. Hero Image
  2. Featured Collection
  3. Image Slideshow
  4. Testimonial
  5. Image Gallery
  6. Collections Listing

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, you can upload multiple images, set transition effects, and customize text overlays.

Edit: Allows you to modify the content and settings of that particular section. For example, in the Hero Image, you can upload a new image, change headings, or alter CTA buttons.

Page​

The Page tab appears when editing a specific page like a product description page, brand page, or category page, which may not support sections. When working in the Page tab, you can customize elements like infinity scroll, back to top buttons, logo visibility, and page-specific heading and description. This tab offers granular control over page-specific settings that are unique to the selected page.

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:
  • Theme: Customize the overall theme colors, including page background, text, buttons, and discount colors.
  • Fonts: Choose fonts for the Header and Body text.
  • Authentication: You can enable or disable headers and footers during the user authentication flow.

2. 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.

**4. 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.

5. 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.

6. 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.

7. 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.

Accessing Advanced Options​

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?