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.

In this article, you'll also find an overview of all available templates in Context.

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.

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.

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:

• Using the product template
• Create and assign multiple templates
• Product overview
• Variant Swatches
• Text block
• Accordions
• Social sharing buttons
• Dynamic Checkout Button
• Stock level indicator
• Product Reviews
• Recommended products
• Recently viewed products
• Product image grid
• Local pickup banner
• Unit pricing
• Feature 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.

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

• Using the collections template
• Create and assign multiple templates
• Set up the collection banner
• Customize the product grid
• Set up filtering and sorting
• Enable quick shop
• Add feature 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.

And here it is on a mobile device:

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.

   

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.

   

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:

   

8. Click Save.

Collection list template settings

The following settings are available for the collections list template:

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.

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

   

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.

   

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. Click Save.

Contact page

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.

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.

   

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.

   

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

Customize your blogs page

In the theme editor (Customize):

1. Choose Blogs from the dropdown templates selector.

   

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.

   

6. (Optional.) You can choose to hide blog excerpts by clicking on the "show" icon of the Excerpts block in the section list.

7. Click Save.

Blog pages template settings

The Blog pages template has the following settings:

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

Here it is on a mobile device:

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

Search

The Search template controls settings and styles for the search results page.

In the theme editor, use the template menu bar to go to Others > Search. Click on the Search page section to open the settings.

Search page settings

Click on the Search page section to find the following settings:

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.

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.

   

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. Click Save.

Password page settings

The password page has the following settings:

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.