Using the visual editor

The visual editor is where you lay out and style every page of your storefront. It pairs a live preview of your store with a drag-and-drop left sidebar (the page tree), a per-item inspector on the right, and a top bar for previewing and publishing. Nothing you do here is public until you Publish — you are always editing a private draft.

Open Online store → Themes, then Customize on the theme you want to edit to launch it.

Note

This page is the step-by-step editing guide. For the bigger picture — the theme library, published versions, and rollback — see Themes & the visual editor and Manage themes.

The three editing zones

• Left sidebar — the page tree. It is split into the Template (the body of the page you are editing) and section groups (the header and footer, which repeat on every page). Each section expands to reveal its blocks. Rows show the section/block icon or a representative image thumbnail when the theme supplies one. A Theme Settings button sits above the tree.
• Center — a live preview iframe. Hover a section or block to see its blue boundary and label; click it to select it. The matching tree row highlights and its settings open on the right.
• Right sidebar — the inspector. It shows the settings for whatever is selected, with a heading and a close (×) button.

Use the template picker in the top bar to switch which page type you are editing — Home page, Products, Collections, Pages, Blogs, Blog posts, Cart, Search, 404, or Customers.

The picker shows the current template/resource and uses a distinct icon for each page family. Navigating a safe storefront link in the preview updates the editor target when that page can be resolved, so the top bar and left tree continue to describe the page visible in the canvas.

Choose the resource shown by a template

For a product, collection, page, blog, article, or metaobject template, click the current resource path beside the template picker. The resource picker supports search and paginated results. It lists only resources from this store that can be served on the storefront and that match the active template assignment exactly. For example, while editing product.featured, choosing another product keeps product.featured active; it never silently falls back to the default product template.

Metaobject choices must be published, exposed to the storefront, enabled as online-store pages, and safe for public rendering. Alternate metaobject template suffixes keep the same definition type while you choose another entry. Customer order templates use a fixed, non-persisted sample customer and sample order in design mode, so a new store can preview them without creating or exposing a real order.

Changing the resource preserves the selected storefront locale and updates the editor URL, so a refreshed tab restores the same template/resource context. If you have unsaved changes, the editor asks before switching resources.

Canvas overlay and two-way selection

Inspector mode starts on. Moving over the preview draws the blue section/block overlay without changing selection. Clicking the overlay sends the exact runtime section and nested block path back to the editor; Sellerlane then:

• selects and expands the matching row on the left;
• highlights the row while the canvas selection remains active;
• opens the matching setting inspector on the right; and
• focuses/flashes a setting when the clicked annotated text maps to one field.

The mapping also works in reverse: selecting a row identifies the corresponding canvas element. Static blocks and locked sections retain their lock state in both places.

An on-canvas + opens the same Add section/Add block picker used by the left sidebar at the exact adjacent insertion point. Section presets in that picker request a real draft section render for their preview when possible; a picker thumbnail is a preview only and does not add the section until you select it.

Adding and reordering sections

1. In the left sidebar, find the Template panel (or a section group). Click Add section at the bottom of a panel to append a section, or use a section’s ⌄ menu and choose Add section above or Add section below to insert it in place.

2. The picker only lists section types the theme allows in that spot. Pick one to add it; it appears in the tree and renders immediately in the preview.

3. Reorder a section by dragging its grip handle (the ☰ icon) up or down within the same panel. You can’t drag a Template section into a header/footer group or vice versa.

4. Use a section’s ⌄ menu for Rename section (a friendly tree label only), Duplicate section, and Remove section.

Locked sections

Some sections show a lock icon. These are edit-only building blocks the theme ships with no add presets — you can change their settings, but you cannot remove or duplicate them. Their Remove section and Duplicate section menu items are disabled.

Removed sections panel

Removing a section does not destroy it right away. Removed sections collect in a Removed sections panel at the bottom of that Template or group, with a count badge. From there you can Restore a section with all its settings intact, or Forget it to discard it for good. Either way, nothing is written to the theme files until you Save — so a removal is fully reversible until then.

Working with blocks (including nested blocks)

Blocks are the smaller pieces inside a section — a heading, an image, a button, a column. Expand a section in the tree to see its blocks.

1. Click the + icon on a section (or on a block that accepts children) to open the Add block picker. As with sections, it only offers block types the theme permits there, and recommended blocks are listed first.

2. Reorder a block by dragging its grip handle, or use the up and down arrows on the block row. You can also drag a block onto another block that accepts children to nest it — empty containers show a Drop blocks here hint.

3. Each block’s ⌄ menu offers Rename block, Copy block, Duplicate block, Paste before, Paste inside (when the block accepts children), and Delete block. Copy/paste is how you move a block between sections.

Tip

Blocks can nest several levels deep, but the theme sets a maximum nesting depth and per-parent limits. When you’ve hit a limit, that block type simply won’t appear in the Add block list. Static blocks are fixed parts of a section — they show a lock icon and can’t be moved, duplicated, or deleted.

Hiding instead of deleting

Every section and block has an eye icon. Toggling it hides that item: it stays in the theme (dimmed in the tree) and renders nothing in the preview until you show it again. Use this to switch a section off seasonally without losing its settings — it’s faster and safer than removing and re-adding.

Editing settings in the inspector

Select any section or block and its settings appear in the right-hand inspector. Sellerlane renders the right control for each setting type, including:

• Text, rich text, and textarea — plain inputs and a formatting toolbar for rich text.
• Image and video pickers — open your media library or paste a YouTube/Vimeo URL.
• Resource pickers — choose a product, collection, page, blog, blog post, menu, or metaobject entry.
• Color and color background — a swatch picker (with alpha) plus a free-form field for CSS gradients.
• Color scheme — pick one of your theme’s named color schemes from a swatch list.
• Font picker, range sliders, number, checkbox, select, radio, text alignment, and link list.
• HTML and Liquid — a code editor for advanced fields.

Some settings only appear once a related setting is set — for example a “button label” field that shows only when “Show button” is on. That conditional behavior is defined by the theme, so the inspector reveals and hides fields as you edit.

Inline editing on the canvas

When a piece of text on the canvas maps to exactly one editable text setting, you can double-click it in the preview and type directly. The edit writes straight back to that setting (only plain text and inline_richtext settings are inline-editable). If the text is ambiguous or maps to several settings, inline editing is declined and nothing changes — edit it from the inspector instead. A single click on canvas text still selects the item and jumps the inspector to the matching field, scrolling it into view and flashing a highlight.

Binding dynamic sources

Many text, image, link, and resource settings can pull live store data instead of a fixed value — for example, showing the current product’s title or a metafield. Look for the Connect dynamic source affordance on a supported setting.

1. Open the dynamic-source picker on a supported setting. Search for the field, metafield, or expression you want — for example a product field or a metaobject value.

2. Choose Connect to bind the whole setting to that source, or Insert to drop the value inline within text.

3. The setting now shows it’s connected; the preview re-renders with the live value for whatever resource the current page represents.

Note

Dynamic sources are offered only for the setting types that support them (text, rich text, URL, image, color, product/collection/page/article/metaobject references, and their list variants). Plain textarea, html, number, range, and checkbox settings render their value literally and have no connect option. For the full model and the available fields, see Dynamic sources.

Theme Settings

The Theme Settings button above the tree opens the store-wide controls that apply across every page: typography (the font picker), spacing, and color schemes. A color scheme is a named set of colors — background, text, button colors — defined once and applied per section, so you can re-skin the whole store from one place. Here you can Add scheme, Duplicate a scheme, or delete one (a scheme that is still referenced, or the last remaining scheme, can’t be deleted).

Tip

Your logo, favicon, and brand colors are not theme settings — they live under Settings → General → Brand. The theme references them, so updating them there flows through to the storefront automatically.

Previewing responsively and inspecting

The top bar gives you tools to check your work before shipping:

• Responsive preview — switch the canvas between Mobile (375px), Tablet (768px), and Desktop (100%) so you can verify layouts at each width.
• Inspector toggle — turns on on-canvas outlines so you can see and click every section and block boundary.
• Reload preview re-renders the iframe; Reload editor state re-fetches the latest saved draft and discards your local edits.
• Undo / Redo — Ctrl/Cmd + Z and Ctrl/Cmd + Shift + Z, also available as buttons in the top bar.

The editor keeps up to 80 in-memory undo states. Rapid changes to the same setting are merged into one history step, so dragging a slider does not create a step for every pixel. A new edit after Undo clears the redo branch.

Restore the last unsaved session

Unsaved canvas work is copied to this browser’s local storage after a short debounce, scoped by store, theme, and template. If the tab closes or the browser crashes, reopening the same template can show Your editing session ended with unsaved changes with Restore and Discard actions.

Restore is offered only when the snapshot belongs to the same saved template revision. If another save advanced the draft, the stale snapshot is discarded rather than applied over newer work. Saving successfully clears the local snapshot. This is best-effort same-browser recovery, not a cloud backup or a way to transfer unsaved edits between devices.

How preview updates are sent

The setting change and undo state commit locally first. Rapid changes are then debounced and coalesced into one section-render POST containing the latest override for every pending section. The returned HTML replaces that section once; no second mutation or follow-up GET is required. Global theme-setting or structural changes can request the broader preview payload and section order.

If the backend cannot render one updated section, the editor shows Section preview failed and keeps the existing preview DOM instead of replacing it with an empty fragment. Editor section renders have a two-second response limit; a timeout is reported as a retryable section error and also keeps the last good preview. Copy the reported section ID/reason, fix the setting or Liquid error, and retry/reload.

Saving versus publishing

Editing changes your draft only. A badge in the top bar always shows Unsaved (yellow) or Saved (green).

1. Make your changes — the badge flips to Unsaved.

2. Press Save to store the draft. The badge returns to Saved.

3. Press Publish. This creates a new live version from your saved draft and makes it the live theme.

Caution

Publish ships only the saved draft. If you Publish with unsaved canvas changes, the editor prompts Save before publishing? — choose Save and publish so the live snapshot matches what you see. If the save can’t fully complete, the publish is cancelled and nothing goes live. Always Save, confirm the badge says Saved, then Publish.

If a draft is edited in two places

The editor watches for the draft being changed elsewhere (another tab, or a teammate). If that happens you’ll see a “This draft was updated elsewhere” banner with a Reload action. If your Save is then rejected, a Draft changed elsewhere dialog appears: choose Reload latest to load the newer draft (this discards your local edits) or Keep editing to copy your changes out first. The usual cause is the same draft open in two tabs — finish your work in one.

Troubleshooting

• A section won’t delete or duplicate. It’s a locked, edit-only section (look for the lock icon). You can still change its settings.
• A block type isn’t in the Add block list. The theme doesn’t allow it in that spot, you’ve hit a per-parent or nesting-depth limit, or the section is full. Try a different parent or remove an existing block.
• Inline editing does nothing. The text didn’t map to a single editable text/inline_richtext setting. Select the item and edit it in the inspector instead.
• A “Preview limited” badge appears. Some preview targets couldn’t be resolved; the editor still works, but a few page types may not preview with sample data.
• “Section preview failed” appears. The latest section-render request returned an error or no HTML. The old DOM is intentionally retained; fix the reported section/Liquid issue and retry.
• A setting renders literally instead of pulling data. That setting type doesn’t support dynamic sources, or you typed Liquid into a field that renders text as-is. Use a supported setting and the Connect dynamic source picker.
• Your changes vanished after Reload editor state. That action intentionally discards local edits and re-fetches the saved draft. Save before reloading.
• No restore banner appears after a crash. Recovery is best effort and local to the same browser/store/theme/template. It is not offered if the saved base revision changed or browser storage was cleared/unavailable.

Next steps

Themes & the visual editor

The overview of how themes, drafts, and publishing fit together — Themes & the visual editor.

Manage themes

The theme library, published versions, and rollback — Manage themes.

Dynamic sources

Bind settings to live product, metafield, and metaobject data in Dynamic sources.

Edit theme code

Drop into Liquid, CSS, and JSON for developer-level changes in Edit theme code.

Edit default theme content

Edit storefront locale strings without opening JSON — Edit default theme content.

Related: Alternate templates · Navigation & content · Setting types · Theme blocks