High-growth stores are built on a strong foundation. Meet Cornerstone →

Theme editor guide

The theme editor organizes all the elements of your online store in one place so you can easily design every page with theme templates, sections, styles, and settings.

We'll cover everything you need to know to start using the theme editor to set up your online store and make the most of what Stiletto has to offer.

NOTE

There's lots to learn about the theme editor but don't worry! Our Stiletto manual will guide you through the theme editor in the step-by-step instructions for each feature.

Use templates to design pages

Templates control the content, layout, and style of all pages and are customized in the theme editor. There are templates for every type of page, including the home page, product page, collection page, blog posts, and more.

At first, there is one Default template for every type of page. All product pages, for example, are initially assigned the same default product template. This means that changes made to a default template will apply to all pages that use that template.

To change the content or style of specific pages, you will need to create a new template and then assign that template to those pages in the Shopify Admin.

Alternatively, you can use Dynamic sources to automatically display the correct content or settings for pages that use the same template.

Here are the basic steps for using templates:

Open templates

Use the Templates selector in the theme editor to find the templates available for each page type. By default, the theme editor opens the Home page template.

See the Templates article for a full overview of all available templates.

Templates selector in theme editor
Templates selector in theme editor

Preview specific pages

When you open a template, the theme editor selects a page (e.g. one product or collection) to preview the changes made to that template.

To preview a different page with that template, click Change in the "PREVIEW" section at the top of the sidebar.

Select a page to preview for the template
Select a page to preview for the template

Assign templates to pages

If a warning symbol (!) appears next to the page name, this means that the template you are editing is not assigned to that page. Go to the page in the Shopify admin and use the Theme template menu to assign a template.

NOTE

Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved but can only be assigned when purchased and published.

Warning symbol for unassigned template
Warning symbol for unassigned template

Customize sections and blocks

Theme sections are an easy way to design your store's pages without using any code. Sections are the basic components of your pages. You can add, edit, and rearrange sections to create different layouts with the content and features you want.

Sections are listed in the theme editor sidebar in the order they appear on the page. Follow the guide below to learn how to use and edit sections and blocks.

NOTE

When you add or edit sections, they will appear on all pages that use that template. To edit specific pages, you can create and assign new templates.

Here are the basic steps for using sections:

Add sections

Click the (+) Add section button in the theme editor sidebar to select one of Stiletto's theme sections. Use the search bar or click Show more to see the full list of sections.

Use the Remove section button to delete them or click the eye icon to hide them.

Add blocks

Most sections are made up of individual Blocks for text, media, buttons, or other content, which are nested under your sections in the editor panel.

Use the (+) Add block button to add or select the type of block you wish to add. Use the Remove block button to delete them or click the eye icon to hide them.

A section with nested blocks and add block button

Edit sections and blocks

NOTE

When you add or edit sections, they will appear on all pages that use that template. To edit specific pages, you can create and assign new templates.

Click directly on a Section or Block to open the settings in the side panel. For step-by-step instructions, see the individual section articles.

Reorder sections and blocks

Click and hold the ⋮⋮ drag icon to change the order of your sections and blocks:

Theme section with drag handle
Theme section with drag handle
Section block with drag handle
Section block with drag handle

Available theme sections

For all templates (except Checkout), Stiletto includes 30+ sections with different content blocks, layouts, and features.

See our Theme sections article for a full listing and overview of all Stiletto sections.

Create and assign multiple templates

At first, there is one Default template for every type of page. This means that changes made to a default template will apply to all pages that use that template.

To change the content or style of specific pages, you will need to create a new template and then assign that template to those pages in the Shopify Admin.

Alternatively, you can use Dynamic sources to automatically display the correct content or settings for pages that use the same template.

Steps

In your theme editor (Customize):

  1. Use the Templates selector to open the Products, Collections, Pages, Blogs, or Blog posts templates.

  2. Click Create template.

    Create template button for collections
    Create template button for collections
  3. Enter a Name for your new template and click Create template.

    The new template will duplicate the settings of the original template.

    Create template settings
    Create template settings
  4. Under Preview, click Change to preview different pages with this template.

    If a warning icon (!) appears, you need to assign the template in your Shopify admin.

    Select a page to preview for the template
    Select a page to preview for the template
  5. To assign a template, go to the page in the Shopify admin and use the Theme template menu to select a specific template.

    Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved but can only be assigned when purchased and published.

  6. Click Save.

Use dynamic content

The Dynamic sources feature automatically displays the correct content or settings for pages that use the same template. Dynamic sources are great for Collapsible rows and size guides on product pages, and many other sections.

See our article on Dynamic sources for a full overview and tutorials.

This feature is available for settings or fields that have a dynamic source button:

Insert dynamic source button
Insert dynamic source button

Customize theme settings

Use the Theme settings to make changes to your online store's general styles and feature options that apply to your entire site.

Click the Theme Settings icon in the top-left corner of your theme editor. Open the settings for colors, fonts, and animations to change the general appearance of your text and images across your site. You can also adjust the appearance and options for other sitewide elements like products, search, social media links, and the cart.

Theme settings tab in the theme editor
Theme settings tab in the theme editor

See our Theme settings article to learn about sitewide settings for your online store's general appearance and functionality.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.