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

Templates

Templates provide the layout and style of your pages. You will find templates for every page that Shopify supports, including the home page, product page, collection page, blog posts, about and contact pages, and many more.

In this article, learn how to use and create new templates with an overview of all available templates in Context.

Use templates to design pages

Use the theme editor to preview and customize templates with Context'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][create-templates] and then [assign that template][assign-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

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][create-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 Context'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.

Theme sections list
Theme sections list

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][create-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.

Slideshow section settings

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 Context (except Checkout), you can add and customize the following 15+ feature sections, along with features specific to the product page:

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

  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

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

Home page
Home page

The Home page is the landing page of your online store's domain (yourstore.myshopify.com).

We recommend visiting our Context demo stores to how sections can be used for a wide range of styles for the home page: Chic, Modern, and Essential.

Products

The Products template includes the features and flexibility you need to customize the look and feel of the most important page on your online store.

You can rearrange and edit the blocks that make up your product page, add any of Context's 20+ feature sections, and set up custom features like Swatches and the Stock level indicator.

Product pages
Product pages

See our full article about the Products template for a full overview of features and settings with step-by-step instructions. You can also jump to one of following sections:

Collections

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

The Collections template includes settings to change the look and feel of product collection pages.

Collection page
Collection page
Collection Page
Collection Page

See our full article about the Collections template for a full overview of features and settings or jump to one of following sections:

Collections list

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

The Collections list template lets you change the design of your /collections/all 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.

Collections list on desktop
Collections list on desktop

And here it is on a mobile device:

Collections list on mobile
Collections list on mobile

For more information about collections, see Shopify's Collections

Set up the collections list page

In the theme editor (Customize):

  1. Choose Collections list from the templates selector at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  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 7 to learn how to add those collections.

  4. Choose whether to Show collection description below the collection title.

    The collection description is set in the Shopify admin. Go to Products > Collections to edit your collections.

  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.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  6. Choose how many Collections per row to display. Choose between 2 and 4 columns.

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

  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.

    Return to the list of sections to rearrange the order of the quote blocks:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  8. Click Save.

Collection list template settings

The following settings are available for the collections list template:

Configuration Settings

Select collections to show

Choose either All or Selected.

If you choose Selected, make sure to return to the top-level settings to use the Add Collection button.

Collections per row

Use the slider to display between 2 and 4 collections per row.

Add collection

If your Select collections to show setting is set to Selected , you must manually add each collection you want to show using this button.

Image aspect ratio

Choose to display your images as Square, Landscape, or Portrait.

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

Pages

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

Create and customize pages with dynamic sections.

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

About page

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

About page
About page
Transparent header
Transparent header

The About page template lets you create a specific page to tell your story with a featured image and custom headings.

Assign the about template to a page

To make any page into an about page:

  1. Add or edit the page you want to turn into an about page.

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

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

  3. Remember to click Save.

Customize the about page

In the theme editor (Customize):

  1. Choose Pages from the drop-down menu at the top of the screen and select the about template.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click the arrow next to About page section the reveal the blocks.

  3. Upload a Featured image to display full-width with your page title over top.

    About page with featured image
    About page with featured image
  4. (Optional.) Change the Heading of the about page. This overrides the heading as set in your Shopify admin.

  5. (Optional.) Add Subheading text to display below the heading.

  6. Change the color of the Text color andOverlay color.

    We recommend using WebAIM's contrast checker when matching colors to make sure your text is clear and readable for everyone.

  7. Change the Overlay opacity to increase the contrast between the headings and image.

    Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color background.

    These settings help make your text clear and readable.

  8. Remember to click Save.

Contact page

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

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

Contact page
Contact page

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. Remember to click Save.

Customize the contact page

Customize the headings, choose to display social icons, and choose whether to display the page content as set up in the Shopify admin.

In the theme editor (Customize):

  1. Choose Pages from the drop-down menu at the top of the screen and select the contact template.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click the arrow next to Contact page section to reveal the blocks.

  3. Click the Contact info ("Let's talk") block to open the settings.

  4. Choose whether to Show social icons.

    To show social icons, you must first add the URLS of your social media accounts. Click on the Contact page section and paste the full URL of your accounts in the fields.

    Social media account fields
    Social media account fields
  5. Change the Heading and Subheading text that displays next to the contact form.

  6. Return to the editor panel and click directly on the Contact form block to choose wheter to Show page content.

  7. Remember to click Save.

Blogs

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

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

Blogs page
Blogs page

Customize your blogs page

In the theme editor (Customize):

  1. Choose Blogs from the dropdown templates selector.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click directly on Blog pages in the list of sections.

  3. Choose how many Articles per row should be displayed. Between 2 and 4.

  4. Choose whether to Show RSS icon.

    RSS is a way for customers to subscribe to your blog. Only some people use it, but the people who do love it. Learn more about it from RSS.com's article How Do RSS Feeds Work?.

  5. 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.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  6. (Optional.) You can choose to hide blog excerpts by clicking on the "show" icon of the Excerpts block in the section list.

  7. Remember to click Save.

Blog pages template settings

The Blog pages template has the following settings:

Configuration Settings

Articles per row

Choose how many articles to show per row of blog posts.

Check this checkbox to show an RSS icon that links to the current blog's RSS feed.

Image aspect ratio

Choose to display your images as Square, Landscape, or Portrait.

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

Blog posts

You can customize how your blog posts look and feel.

To learn more about blogs on Shopify, check out their Writing blog posts article.

You will need to add Featured images and Excerpts to all of your blog posts in the Shopify admin.

  1. Find your blog posts under Online Store > Blog posts.

  2. In the Featured image section, click Add image to upload an image file.

    There are no required dimensions. We recommend using the same shape and size for all blog images with a minimum width of 2048px for optimal quality across all devices.

  3. In the Excerpt section, add a summary of your post.

    If left blank, Context will automatically display the first few sentences of the post.

  4. Remember to click Save.

Cart

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

Context's cart page is simple and shows customers exactly what they need to see.

Any settings that apply to the cart can be found in your Cart theme settings.

Cart page on desktop
Cart page on desktop

Here it is on a mobile device:

Cart page on mobile
Cart page on mobile

You can learn more about the Cart page from the theme settings Cart article.

Search page

On the search results page, you can let customers discover products and pages quickly by filtering search results by availability, price, type, vendor, and your variant options.

In the theme editor (Customize):

  1. Open the Search page under Others in the template selector.

  2. Click on the Search page section in the editor panel to open the settings.

  3. Choose whether to Enable filtering.

    To select which filter options to enable, go to your Online Store > Navigation settings in your Shopify admin. In the Collection and search filters section, you can add, remove, and reorder your filter options.

    See Shopify's manual for their guide on collection filters.

  4. Choose whether to Enable sorting to let customers sort results by Price, Date, Best Selling, Featured, or Alphabetically.

    Sort options when Filter style is buttons
    Sort options when Filter style is buttons

    Sorting is a Shopify feature. Learn how to change the default sort order.

  5. Remember to click Save.

Password page

Add and rearrange any of Context's 20+ feature sections to design your template. To learn more about sections and templates, see our theme editor manual.

Before you launch your store, you can use Shopify's password page feature to prevent customers from viewing your store until it's ready to launch. Only the people you give a password to can view your store.

Password page
Password page

Set up your password page

In the theme editor (Customize):

  1. Choose Others from the drop-down menu at the top of the screen and select the Password template.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the Password page section.

    This opens the Password page settings.

  3. Set some Heading text, and a Text body.

  4. Check the Show share buttons checkbox to show social sharing buttons.

    These buttons can be clicked by customers to generate social media-friendly links on their social media profiles.

  5. Remember to click Save.

Password page settings

The password page has the following settings:

Configuration Settings

Heading

Add heading text.

We recommend keeping this short. Just a few words long.

Text

Add the main page body text.

We recommend keeping this to a paragraph or two. You can use rich text features here. Make some of your text bold or italic. You can also add links.

Show share buttons

Check this checkbox to show sharing buttons that redirect customers to social media websites, prompting them to share your store.

The buttons include Pinterest, Twitter, and Facebook.

404 page

Context 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. Read Shopify's language documentation to learn more about how to change the wording in your theme.

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.