Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

1. Get to know the theme editor

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.

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.

Templates selector in the theme editor
Templates selector in the theme editor

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

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 applied to that page. Go to the page in the Shopify admin and use the Theme template menu to assign a 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.

Warning symbol for unassigned template
Warning symbol for unassigned template

Customize sections and blocks

Sections are reusable, customizable features that make up your pages. Sections are listed in the editor sidebar in the order they appear on the page.

Use the theme editor to add, customize, and rearrange sections to create the look and functionality of your online store.

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple 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: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple 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 on Stiletto (except Checkout), you can add, re-order, and customize the following 25+ dynamic sections:

You will also find many features specific to the product page and collection-page, as well as the following static sections that appear on every page in the same position:

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 accordions 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 tab in the navigation or settings sidebar to access global settings for your theme.

You can customize settings and options for storewide colors, fonts, and style, or configure your product pages, cart, search, and social media.

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

See our Theme settings article to learn about global settings and how to use them.

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.