Templates

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.

Learn how to edit templates, create multiple templates, and assign them to pages in your Shopify admin. You'll also find an overview of all available templates.

How to use templates

Use the theme editor to preview and customize templates with Stiletto's available sections and theme settings.

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
• Preview specific pages
• Assign templates to pages

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.

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.

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.

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
• Add blocks
• Edit sections and blocks
• Reorder sections and blocks

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.

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:

Available theme sections

For all templates on Stiletto (except Checkout), you can add and customize the following 25+ feature sections:

• Blog posts
• Collapsible row list
• Collection list slider
• Collection list grid
• Complete the look
• Contact form
• Countdown banner
• Countdown bar
• Events
• Featured collection grid
• Featured collection slider
• Featured product
• Gallery carousel
• Grid
• Image compare
• Image hero
• Image hero split
• Image with text
• Image with text split
• Multi-column
• Newsletter
• Newsletter compact
• Page section
• Promotion banner
• Promotion Bar
• Quotes
• Rich text
• Sales banner
• Shoppable image
• Shoppable image editorial
• Slideshow
• Testimonials
• Video hero

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

• Header
• Announcement bar
• Popup
• Footer

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.

   

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

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

   

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.

   

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.

Home page

The Home page is the landing page of your online store's domain (yourstore.myshopify.com). Welcome customers to your store with a dynamic page with featured products and promotional content. See our article on Design tips for effective branding to help you along as you set up your store.

Blogs page

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.

The Blogs page lists of all your blog posts. For more information about Shopify's blogs features, see their Blogs documentation.

Set up the blogs page

Steps

In your theme editor (Customize)

1. Select Blogs from the pages drop-down menu at the top of the screen.

   

2. Click Blog posts from the list of sections to open the settings.

3. Choose whether to show the blog post Tags, Author, Published date, Excerpt, Featured image.

4. To make your blog images a uniform shape and size, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

   The default Natural setting will display the original orientation of your image.

   

5. Click Save.

Blog posts

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.

With Stiletto, blog posts are formatted beautifully, just like the rest of the store. If you've added a featured image to you blog post, it's displayed boldly before the body content:

Set up blog posts

Steps

In your theme editor (Customize)

1. Select Blogs from the pages drop-down menu at the top of the screen.

   

2. Click Blog posts from the list of sections to open the settings.

3. Choose whether to show the blog post Tags, Author, Published date, Excerpt, Featured image.

4. To make your blog images a uniform shape and size, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

   The default Natural setting will display the original orientation of your image.

   

5. Click Save.

Cart

Stiletto's cart page shows customers exactly what they need to see when checking out with their products. You can learn more about these settings from the theme settings Cart article.

Collection

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.

The Collections template includes settings to change the look and feel of product collection pages. See our full article about the Collections template or jump to one of the following sections:

• Using collection templates
• Alternate collection templates
• Collection banner
• Filtering and sorting
• Product grid
• Product hover
• Product badges
• Quick view
• Dynamic sections

Collections list

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.

The Collections list template lets you change the design of your /collections/ page. By default, all published collections in your Shopify admin are displayed. You can select specific collections to display and change the overall look of the page.

Set up collections list page

Steps

In the theme editor (Customize):

1. Choose Collections list from the pages drop-down menu at the top of the screen.

   

2. Click on Collections list page from the list of sections.

3. Choose whether you want to show All of your collections collections or just Selected collections.

   If you choose to show Selected collections, see step 8 to learn how to add those collections.

4. Choose how many Columns of collections to display. Choose between 2 and 4 columns.

   On small mobile devices, only 1 collection is shown per row.

5. To make your collection images a uniform shape and size, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

   The default Natural setting will display the original orientation of your image.

   

6. Choose the Collection title alignment, either Left or Center.

7. (Optional.) If you chose to show Selected collections, return to the top-level Collection list settings.

   Use the +Add Collection to add the number of collections you want. Then click on the new Collection blocks to select a collection.

   Repeat this process until you've added all the selected collections you need.

8. Click Save.

Contact

Pages are a Shopify feature. Learn more about creating pages from Shopify's Pages documentation. Stiletto styles all pages to match your theme and theme settings.

You can change the page template to Contact, which allows you to prepend your page with a special image and display a contact form.

Assign the contact template to a page

To make any page into an contact page:

1. Add or edit the page you want to turn into a contact page.

   You can do this from the Pages area in your Shopify dashboard.

2. Use the Theme template menu to assign the Contact template.

   

3. Click Save.

Contact page style

Customize the section Headings and choose to display a Phone number field as well as reCAPTCHA terms if you have spam protection enabled.

1. Click on the Contact form section to open the settings.

2. Select the Alignment for the Heading and Subheading. Either Heading and text left, Heading and text center, or Heading center, text left.

3. Change the Heading text as a title for your section.

   Delete the text in this field to remove the heading.

4. Set the Heading size to Small, Medium, or Large

5. Enter Subheading text to display more information below the Heading.

6. Uncheck the Show phone number field option to hide the field that asks for the customer's phone number.

7. Uncheck the Show reCAPTCHA terms if your store has spam protection enabled.

8. Set the Top divider to Solid to display a line that clearly separates the above section.

9. Set the Content width to Full width or Custom.

   For the Custom width, use the slider to adjust width of the page content between 400px and 1000px.

10. Click Save.

Pages

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.

Create and customize pages with dynamic sections. Use the Default page template or use one of the alternate page templates: Lookbook 1, Lookbook 2, Brand Story, About, FAQ, and Stockists. These templates come with preset styles and selected sections, designed with Stiletto's available features for specific uses.

See demo examples for the Stockists, FAQ, and Lookbook templates.

In addition to the default collection template, Stiletto comes with 4 alternate collection templates designed for specific uses. See the templates for Collection Landing Pages, Sale Collections, Flash Sale Collections, Subcollections.

Set up a page template

In your theme editor (Customize)

1. Choose a template under Pages in the template selector.

   

2. Click on the Page section to choose set the content to Full width or with a Custom width.

   Use the Custom content width slider to choose between 400 and 1000 pixels wide.

3. Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with sections.

   Learn more about Animations in Stiletto.

4. Customize your page by adding and rearranging feature sections.

5. Click Save.

Password page

Before you launch your store, you can use Shopify's password page feature to restrict access to your store. When the password page is active, all store pages are hidden and will not appear in search engine results.

Open the Password template in your theme editor to customize the headings, password message, newsletter signup, and social icons and sharing blocks.

See Shopify's Add password protection to your online store documentation to learn more

Product

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.

The Products template includes settings to change the look and feel of product pages. See our full article about the Product template or jump to one of the following sections:

• Using product templates
• Alternate Templates
• Product overview
• Page style and layout
• Variant chips
• Variant swatches
• Text block
• Collapsible rows
• Information popup
• Text list with icons
• Product labels
• Product tabs
• Social sharing buttons
• Dynamic checkout button
• Custom options
• Stock level indicator
• Featured products
• Product reviews
• Local pickup banner
• Recommended products
• Dynamic sections

404 page

Stiletto has a 404 page template. "404" is a code used on the web that means "The page cannot be found."

A customer might end up on a 404 page if they typed in a URL wrong, or if the page they are visiting no longer exists because you have hidden or deleted it.

You can change your 404 page's text content in the theme's Language editor. Learn more in Shopify's language documentation.