Theme editor basics

The few ideas every other article in this help center relies on: templates, sections, blocks, section groups, and the settings that only appear once you switch something else on.

Open the theme editor

From your Shopify admin, go to Online Store → Themes and click Customize on Sublime. The left sidebar lists everything on the page you're viewing, the middle shows a live preview, and the settings for whatever you select open alongside it. Click Save in the top right when you're done. Nothing reaches your storefront until you save.

Templates

Each type of page in your store has a template: the homepage, product pages, collection pages, the cart, search, blog and article pages, regular pages, and so on. Use the dropdown at the top of the editor to switch between them. A change you make to the product template applies to every product that uses it. Each template is described under Page templates, for example the Product page and Collection page.

Sublime includes two extra page templates: Contact (with a contact form, see Contact page) and FAQ (see FAQ page). Assign them to a page in the Shopify admin under Content → Pages, using the Theme template option.

Sections

A template is a stack of sections: a slideshow, a featured collection, a newsletter sign-up. Click Add section in the sidebar to add one, drag the handle next to a section to move it, and click a section to open its settings. The order in the sidebar is the order on the page.

Some sections only work on one template, because they display that page's own content. The main product section only appears on product templates, and the main collection section only on collection templates, for example. Each section article says where it can go.

Blocks and nested blocks

Most sections hold blocks, the individual pieces inside them: a slideshow's slides, a footer's menu columns, the title, price and buy buttons on a product page. Click Add block under a section to add one, and drag blocks to change their order.

Some blocks hold blocks of their own, called nested blocks. A slide, for example, contains its own heading, text and button blocks, so you can add a second button or remove the badge without touching the other slides. Click the arrow next to a block in the sidebar to expand it and see what's inside.

  • Section blocks belong to one section and are documented in that section's article.
  • Shared blocks such as heading, text, button, button group, badge group and divider work the same wherever they appear, so they're documented once in Shared blocks. The Custom section accepts any of them, so you can build a layout from scratch.
  • App blocks come from apps you've installed (reviews, subscriptions, upsells). You can add them to the product page, featured product, quick view, cart and cart drawer, or anywhere on a page with the Apps section.

Section groups: header, footer and overlays

Some sections aren't part of a template. They sit in a section group at the top or bottom of the sidebar and appear on every page:

Header The Announcement bar and the Header.
Footer The Footer.
Overlays Everything that opens on top of the page: the Cart drawer, Search drawer, Quick view, Pop-up, Dock and Cookie banner. Age verification isn't there by default. Add it to this group with Add section if you need it.

Group sections stay in their group. You can't drag the header into the middle of a page, and the regular page sections can't be added to a group.

Hide or remove?

Hide Click the eye icon next to a section or block. It disappears from the storefront but keeps all its settings and content, so you can bring it back later. Useful for seasonal banners or content you're still working on.
Remove Select the section or block and click Remove section (or Remove block) at the bottom of its settings. Its content is deleted. Clicking Undo before you save brings it back; after that it's gone.

Settings that only appear once another is on

Many settings only show up once another setting makes them relevant. Autoplay speed only appears when Autoplay is on, for example, and the mobile spacing sliders only appear once Enable mobile spacing controls is on. In these articles, each of those settings has an Only appears when … line. If you can't find a setting in the editor, check that line first.

Preview on desktop and mobile

Use the device icons in the toolbar at the top of the editor to switch the preview between desktop and mobile. Sublime changes to its mobile layout below 768 pixels wide, and many sections have separate mobile settings (image, columns, alignment, spacing), so check both views before you save.

Tip: The editor preview is close to the real thing, but not identical. For the final check, open the theme's preview link on your own phone.

Alternate templates

Sometimes one group of products or pages needs a different layout. A gift card product might skip the size chart, or a landing page might need a full-width banner. Instead of changing the default template for everything, create an alternate one:

  1. In the theme editor, open the template dropdown at the top and choose the page type (for example Products).
  2. Click Create template, give it a name, and choose which template to base it on.
  3. Customize the new template and click Save.
  4. In the Shopify admin, open the product, collection or page and choose the new template under Theme template.

Good to know: Changes to the default template don't affect items that use an alternate one. If an edit isn't showing on a product, check which template that product uses.

A setting in these docs isn't in my editor

It's probably one that only appears once another setting is on. Look for the Only appears when … line under the setting in the article, switch that setting on, and it will show up.

I can't find a section in Add section

Header, footer and overlay sections live in their section group and can't be added to a template. Sections that show a page's own content, like the main product or collection section, only appear on that template.

I removed a section by mistake

If you haven't saved yet, use Undo (or press Ctrl+Z / Cmd+Z). If you have saved, you'll need to add it again with Add section. For bigger changes, duplicate the theme first so you always have a copy to go back to.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.