Skip to main content
Use the Page Editor, also called the Visual Editor, to change how your storefront pages look. You work on one theme template at a time, such as your home page, a product page or a custom page, by arranging its sections and changing their settings.

​
Where to find it

In the admin sidebar, under Platforms, click Website > Theme, then click Customize on your theme. The editor opens on the theme’s default home page template. You can also open it from the sidebar: under We-Commerce, click Storefront > Pages. Open a page and click Open Visual Editor. To open your home page template instead, click Open Editor above the list.

​
What’s on the screen

The editor has a top bar, a rail of panels on the left, the preview area in the middle and a settings panel on the right.

​
Top bar

  • X and the breadcrumb take you back to where you opened the editor, such as Themes or Pages.
  • Next to X, two panel buttons hide the left and right panels. Click the left button again to show the left panel. To reopen the right panel, click the gear.
  • The template’s name, then its status: Unsaved changes, or Saved with how long ago.
  • The three-dot button opens Theme Actions: Edit Code opens the theme’s code editor in a new tab, and View Site opens your storefront in a new tab.
  • On most page types, Theme Actions also has Clear Cache, which starts clearing the storefront cache for that page type, if your role allows it. See Why does Clear Cache fail?
  • Design and Code switch between visual editing and code editing.
  • Undo and Redo. The shortcuts are Cmd+Z or Ctrl+Z to undo, and Cmd+Shift+Z or Ctrl+Y to redo.
  • The gear opens the template settings in the right panel.
  • Translate opens the Template Translations sheet.
  • History opens Version history in the right panel.
  • Git revision opens Theme revisions for the whole theme. Read What does Git revision do? before you use it.
  • Preview opens the version you’re viewing on your storefront, in a new tab.
  • Save and Publish. See Save and publish.

​
Left rail

The rail has six panels, in this order. Click an icon to open its panel, and click it again to close the panel.
  • Site Menu: your menus, Navigation Bars and Footers. Click + to create a menu, or click a menu to edit its links, then click Save menu. Open a navigation bar or footer to edit its settings.
  • Templates: opens by default. Your templates, grouped under Storefront and CMS.
  • Layers: the sections and blocks on the template you’re editing.
  • Sections: the sections in your theme.
  • Theme: settings that apply to the whole theme, in groups your theme defines. The preview area updates as you change them. Read Save and publish before you save changes here.
  • Widgets: widgets and sections from droplets you’ve installed.

​
Templates panel

  • The Storefront folders are Home Page, Product, Enrollments, Collection Page, Collection, Category Page, Category, Shop, Join Page, Cart, Page and Error Page. The CMS folders are Playlists, Media, Post and Post/Blog Page.
  • Click a folder to see its templates, then click a template to open it. The default template for each type shows a bookmark icon and appears first.
  • + creates a template. The search icon searches the templates in these folders.
  • Hover a template and click its three-dot menu for Edit Title, Duplicate Template, Make Default and Delete Template, plus Restore Default on Media and Playlists templates. Which items appear depends on the template. See Manage templates.
  • For templates you can assign to items, a row under the template you have open shows how many items use it. For the default template, it shows that all items do. Expand the row and click an item to preview the template with that item. See Use a template for specific items.

​
Layers panel

  • The panel groups sections under Header, Template and Footer.
  • In the Template group, click Add section to add a section. Hover a section to hide or show it, duplicate it or delete it, and drag its handle to move it. Hidden sections are crossed out.
  • You can select Header and Footer sections, but you can’t move, hide, duplicate or delete them here.
  • Click a section to open its settings. Click the arrow next to it to show its blocks. Add block adds a block. Hover a block to rename, duplicate or delete it, and drag it to reorder.
  • Layers isn’t available in Code mode.

​
Sections panel

  • Drag to add lists the sections you can use on this template. Drag one onto the preview area to add it. The rest are under Not available here.
  • Hover a section, then point to its eye icon to see a preview.
  • Click a section under Drag to add to open it and edit its code.
  • + creates a new section.

​
Widgets panel

  • The panel groups widgets under Injected into <head> and Injected into <body>. When you turn a widget on, Fluid adds it to every page.
  • Under Sections, drag a droplet’s section onto the preview area to add it.
  • If you haven’t installed a droplet with theme extensions, the panel tells you no widgets are available.

​
Preview area toolbar

In Design mode, a toolbar sits above the preview area:
  • Desktop view, Tablet view and Mobile view open a floating preview at that device size.
  • The zoom buttons change the zoom of the preview area from 50% to 200%, in steps of 10%.
  • Inspector is on by default. While it’s on, clicking in the preview area selects sections and blocks.
  • The country and language pickers preview the page for one of your company’s countries and active languages. They start on your company’s default country and language.
  • Product appears on product templates. Choose which product the preview area shows.

​
Preview area

While Inspector is on:
  • Hover a section to see its name, Add section buttons above and below it, and a delete button on sections you can delete.
  • Click a section to open its settings in the right panel. Click a block to open the block’s settings.
  • Right-click a section for Add section above, Add section below, Edit code and Delete section. Edit code opens the theme’s code editor in a new tab.
  • Hover a block to see its name, a + button and a delete button. Right-click a block for Add block, Edit code and Remove block. + and Add block add a copy of the block right after it.
You can’t add a section above the navigation bar or below the footer. You can’t delete some sections, such as the header and footer.

​
Right panel

  • When the editor opens, the right panel shows the template settings:
    • Template Title: the template’s name.
    • On Page templates, Use Fluid Menu uses the existing header and footer for the page, and Use Theme Styles lets theme styles apply to it.
    • On a template that isn’t the default and that you can assign to items, an assignment field such as Assigned Products or Assigned Pages. Items you don’t assign use the default template. See Use a template for specific items.
    • On a template that isn’t the default, Template Actions: Make Default and Delete Template. See Why can’t I delete a template?
  • When you select a section, the panel shows the section’s name and its settings, often in groups you can expand. The settings depend on the section. A section with none shows No Settings Available.
  • When you select a block, the panel shows that block’s settings in the same way.
  • Version history lists saved versions. Published versions have a Published label.

​
Code mode

Click Code in the top bar to edit the template’s code. The tabs are:
  • Template (liquid): the template’s Liquid and HTML.
  • CSS: appears only when the template has its own stylesheet.
  • Variables: the template’s variables, as JSON. Save stops with Invalid variables JSON format if the JSON isn’t valid.
When you open a section from the Sections panel, it opens in Code mode, and you can’t switch it to Design. Translate and Preview aren’t available for it. For Liquid, section schemas and theme variables, see the theme developer guide, theme variables and schema components.

​
Save and publish

Most edits stay in the editor until you click Save in the top bar. Until then, the top bar shows Unsaved changes. If you close or reload the browser tab with unsaved changes, your browser asks you to confirm. The editor’s X button doesn’t, so save first. These wait for Save in the top bar:
  • Section and block settings, and anything you change in the Layers panel.
  • Sections and blocks you add or delete in the preview area.
  • Template Title, Use Fluid Menu and Use Theme Styles in the template settings.
  • Code you change in Code mode.
Saving a template doesn’t publish it. After you save, click Publish. On your active theme, the published version is what visitors see. Publish publishes:
  • The template version you’re viewing. After you save, that’s the version you just saved.
  • Saved changes to the page’s header and footer.
  • Saved changes to section text that your theme keeps in its English language file.
Publish is unavailable while you have unsaved changes, and when all of these are already published.
Changes in the Theme panel also wait for Save. When you click Save, Fluid saves and publishes them at the same time. On your active theme, they go live right away, before you click Publish.
These save as soon as you make them:
  • Edit Title, Duplicate Template, Delete Template and Make Default.
  • Items you add to or remove from a template’s assignments.
  • Widgets you turn on or off in the Widgets panel.
These have their own save button:
  • Menus in the Site Menu panel: Save menu.
  • Translations in the Template Translations sheet: Save. Read the warning in Translate a template first.

​
Edit a section

1

Select the section

Click the section in the preview area, or click it in the Layers panel. Its settings open in the right panel.
2

Change its settings

Edit the settings. The preview area updates to show your changes.
3

Save and publish your changes

Click Save, then Publish. See Save and publish.

​
Add a section

1

Open the section picker

Click Add section in the Template group of the Layers panel, or above or below a section in the preview area.
2

Choose a section

Under Available Sections, click a section to preview it. Use the search box to narrow the list. If you have sections from droplets, switch between the Theme and Apps tabs.
3

Add it

Click Add section. Then click Save and Publish in the top bar. See Save and publish.

​
Create a template

1

Start a new template

Open the Templates panel and click +.
2

Choose the type

In Template Type, choose the kind of page. For a custom page, choose Page.
3

Name it

Enter a Template name. It’s required, can be up to 120 characters, and can’t contain / \ : * ? " < > |. You can also change the Initial HTML.
4

Create it

Click Confirm. The new template opens in the editor.
A template isn’t a page. To publish a page at its own address, go to Storefront > Pages, click Create Page, and choose the template in the Theme Template card. You can also assign existing pages to a template from the template’s settings.

​
Use a template for specific items

1

Open the template

In the Templates panel, open a Product, Page, Post, Collection, Category, Enrollments, Media or Playlists template that isn’t the default for its type.
2

Open its settings

Click the gear in the top bar.
3

Choose the items

Under the assignment field, such as Assigned Products, click Select Products or Add Products. Choose the items, then click Confirm.
The change saves right away. To remove an item, click the close icon on its badge.

​
Manage templates

  • To make a template the default, choose Make Default from its menu in the Templates panel, or from Template Actions in its settings. Click Continue to confirm.
  • To rename a template, choose Edit Title from its menu, type the new name and press Enter.
  • To copy a template, choose Duplicate Template from its menu.
  • To delete a template, choose Delete Template from its menu, or from Template Actions in its settings, then click Delete. This can’t be undone. If you don’t see Delete Template, read Why can’t I delete a template?

​
Restore a Media or Playlists template

To reset a Media or Playlists template, choose Restore Default from its menu, then click Restore default in the confirmation dialog. This replaces the template’s content with the standard media display section.
  • On the template you have open, the restore works like other edits. Click Save, then Publish.
  • On any other template, Fluid publishes the restore right away.
  • You can find the earlier content as a version in History.

​
Translate a template

Saving translations publishes right away. It publishes the template, its header and footer, and its language files. That includes changes you haven’t saved or published yet, such as section and block changes and edits in the Template (liquid) tab. Publish or undo your other edits before you save translations.
1

Open translations

Click Translate in the top bar. The Template Translations sheet opens. Each section’s text fields are rows, with one column for each of your company’s languages.
2

Add translations

Type translations into the table. Use the search box and Filters to find untranslated text. To generate translations, click Translate section on one section, or click Translate All and then Continue to translate every section. Translate All can take a while, so stay on the screen until it finishes.
3

Save

Click Save in the sheet.
To add a language to the table, turn it on in Languages.

​
Go back to an earlier version

1

Open version history

Click History in the top bar.
2

Look at a version

Click a version to load it in the editor.
3

Publish or compare it

Hover the version and open its menu. Choose Publish to publish that version, or Changes to compare it with the version before it. The menu appears once the template has more than one saved version, and the first version has no Changes option.

​
FAQ

Use Undo and Redo in the top bar for changes you’ve made in the editor. Publishing clears the undo history. To go back to a version you saved earlier, use History.
Your role doesn’t have the Theme switch Customize and edit theme settings. An admin who manages roles can turn it on in the role’s Permissions tab, in the Content & Website card. See Roles.Without it, your theme doesn’t show Customize, and the theme’s code editor (Edit Code) says you don’t have permission to view the page.
Clear Cache needs the Developer switch that starts with Manage webhooks and API configuration. Without it, you see Failed to clear cache. An admin who manages roles can turn it on in the role’s Permissions tab, in the Settings card. See Roles.
You can’t delete a default template. Make another template the default first, then delete this one.The Templates panel menu doesn’t show Delete Template on the template you have open. To delete it, use Template Actions in its settings. Some templates don’t offer Delete Template.
Git revision opens Theme revisions, where you can restore the whole theme to an earlier published revision. That includes its settings, every template and every asset.
Restoring also publishes. On an active theme, the restored revision goes live immediately.
If the theme isn’t connected to Git yet, the dialog offers Connect to Git. After you connect, publish the theme to record its first revision. A new publish can take a moment to appear in the list.