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

Product template

The Product page template controls the content, layout, and style of your product pages. Use the theme editor to preview, edit, and create new product templates with Context's available sections and theme settings.

Add any of Context's 15+ feature sections, and set up custom features like Swatches, and an Information popup.

Product page on desktop
Product page on desktop

Using the product template

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

To change the content or style of specific products, 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 to using templates:

Open product template

Use the Templates selector in the theme editor to find the Product templates. By default, the theme editor opens the Home page template.

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

Preview different products

When you open a template, the theme editor selects a product page to preview the changes made to the template.

To preview a different product 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 products

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.

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

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

Learn more about using sections and blocks in our "Get to know the theme editor" article.

Create and assign multiple templates

At first, there is one Default template for every product page. This means that changes made to a default template will apply to all products 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. Open the Products template.

  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 with your template
    Select a page to preview with your template

  5. To assign a template, go to the product 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.

Product overview

The Product overview section contains all the elements or blocks that make up your product form. You can rearrange or edit these blocks to create new styles or layouts for your product templates.

Product overview section
Product overview section

Below you'll find a list of all Product overview blocks, along with associated settings and features:

Product overview blocks

Configuration Settings

Title

The name of your product.

Price

The price of your product, including the sale or compared price.

Border

A single line that visually separates your product blocks.

SKU

The SKU number used to track the inventory of your products.

Vendor

The vendor (or seller) of the product as added in your Shopify Admin.

Description

The product's description.

Share buttons

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter.

Buy buttons

This block displays the "Add to cart" button with local pickup information below.

It can also show any dynamic checkout buttons.

Quantity selector

The quantity selector lets customers add more than one product to the cart.

Variant selectors

The variant picker lets customers select different product variants (e.g. Size or Material).

See Context's Information popup and Variant swatches.

Stock level indicator bar

Add an indicator bar that displays the relative stock level of your product and alerts customers when there are limited quantities.

Learn more about the Stock level indicator bar.

Accordion

Add several collapsible tabs (Accordions) with a title and text content.

Text

Add additional information with a text block.

Variant swatches

Context can display your product variants as a sleek row of clickable color Swatches.

Swatches on product page
Swatches on product page

See our full Swatches article to learn how to use Context's 140 default swatch colors or upload your own custom swatch images, as well as enable the option to display swatches on hover on collection pages.

Text block

Add a Text block for additional information within the product form.

In the theme editor (Customize):

  1. Under Product overview, click + Add block and select Text block.

  2. Click on the new Text block block to open the block settings.

  3. Add a short sentence or two. Use the formatting buttons to add bold, italic, or linked text.

  4. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  5. Click Save.

Accordions

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.

Accordions are collapsible dropdown tabs for your product details and additional information. They're a great way to highlight key aspects and information about your products and store in a sleek and organized way.

Accordions used for additional product information

Set up accordions

In your theme editor (Customize):

  1. Under Product overview, click + Add block and select Accordion.

  2. Click on the new Accordion block to open the block settings.

    Accordion block settings
  3. Set the Style of the accordion to be Open or Closed when customers first visit your product page.

  4. Change the Accordion heading text to display as the title.

    We recommend a heading that clearly labels the content.

    To show different headings on different product pages, learn how to create multiple templates or use dynamic sources.

  5. Add Text that will display when this accordion is open.

    Use the formatting buttons to add bold, italic, or linked text.

    To show different text on different product pages, learn how to create multiple templates or use dynamic sources.

  6. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  7. Click Save.

Information popup

The Information popup displays extra information about your products, like a size guide or other details about your product variants.

Here's an example of an information popup used as a size guide:

Product information popup
Product information popup

To learn more about setting up an information popup on your product pages, see our Information popup article.

Social sharing buttons

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter.

Social sharing buttons on product page
Social sharing buttons on product page

In the theme editor (Customize):

  1. Under Product overview, click + Add block and select Share.

  2. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  3. Click Save.

Dynamic checkout button

The Dynamic checkout button lets customers quickly purchase products with a "Buy now" button. This button automatically displays one of your supported payment methods based on your customers' browser, device, and personal payment history.

Dynamic "Buy Now" button
Dynamic "Buy Now" button

To enable this option, click on the Buy buttons block to access its settings and check the Show dynamic checkout buttons checkbox.

See Shopify's Dynamic checkout buttons documentation for more details.

Stock level indicator

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 Stock level indicator displays the relative availability of your product with a dynamic indicator bar that alerts customers when there are limited quantities.

Displaying your stock level can turn limited stock quantities into an advantage by conveying a sense of scarcity to increase conversion and quicker purchases.

Stock level indicator on product page
Stock level indicator on product page

The indicator bar visually represents the remaining percentage of your initial stock quantity, turns red when stock is low, and displays three different messages.

Set up your Stock level indicator

Before adding a Stock level indicator block, you need to enable the Track quantity option for your product and product variants.

To learn more, see Shopify's guide on how to Set up inventory tracking.

Steps

In your theme editor (Customize):

  1. Select a Products template you want to edit.

  2. Click + Add block and select Stock level indicator from the Theme Blocks list.

  3. Click on the new Stock level indicator block to open the block settings.

    Stock Level Indicator block settings
    Stock Level Indicator block settings
  4. (Optional.) Toggle the Show label option to display or hide the "Stock" title above the indicator bar.

  5. Enter the initial quantity of your product stock level in the Inventory base quantity field.

    The indicator bar displays your remaining product quantity as a percentage of this base quantity. If your base quantity is set at 100 products, the bar will display at 100% when your have 100 products in stock and 60% when you have 60 products in stock.

    To learn how to set different base quantities for multiple products, learn how to use dynamic sources and metafields.

  6. Enter the product inventory quantity in the Low quantity threshold to alert customers when limited quantities are available.

    When your current product inventory matches or goes below the Low quantity threshold, the indicator bar will turn red and display a "Limited quantities available" message.

    Stock level indicator when the product inventory reaches the Low quantity threshold
    Stock level indicator when the product inventory reaches the Low quantity threshold

    To learn how to set different Low inventory thresholds for multiple products, learn how to use dynamic sources and metafields.

  7. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a block entirely.

  8. Click Save.

Product reviews

Context fully integrates with Shopify's Product Reviews app. Once you download the app, the Reviews section and Star rating block will be available in the theme editor.

To learn more about setting up Shopify's Product Reviews on your product pages, see our Product reviews article.

Product reviews section
Product reviews section

The Recommended products section automatically displays similar products to upsell your products and keep customers shopping.

Recommended products section
Recommended products section

This section recommends products based on Shopify's Product recommendations algorithm, which takes into account a number of factors, like other products that are in the same collection(s) as the current product, products with similar descriptions, or items that have been commonly purchased together.

For more information about product recommendations, see Shopify's Product recommendations guide.

  1. Click on the Recommended products section from the list of sections for your Products template.

    Recommended products settings
    Recommended products settings
  2. Change the Heading text as the title of the section.

  3. Select the Heading alignment. Either Left, Right, or Center.

  4. Change the number Rows to display 1, 2, or 3 rows of recommended products.

  5. Set the Products per row to display 2, 3, or 4 recommended products per row.

  6. To make product 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
  7. Remember to click Save.

The Recommended products section has the following settings:

Configuration Settings

Heading

Change the heading displayed above the list of products.

We recommend a title of just a few words long.

Columns per row

Change the amount of products displayed. You can choose between 2 and 4 products per row.

On mobile devices, this section will become a click-through gallery.

Image aspect ratio

Use this setting to automatically crop images to a specific aspect ratio. Choose from Square (1:1), Landscape (3:2), or Portrait (2:3) aspect ratios.

Choose Natural if you do not want your images to be cropped.

Recently viewed products

The recently viewed products section automatically display rows of products that the customer has looked at on your site. This section is hidden until the customer has viewed several product pages.

Recently viewed section
Recently viewed section
  1. Click on the +Add section and select Recently viewed products from the list.

  2. Click directly on the new Recently viewed products section to open the settings.

  3. Change the Heading text and alignment.

    The following image outlines the layout differences between Left, Center, and Right aligned:

    Heading alignment for recently viewed products
    Heading alignment for recently viewed products
  4. Choose the amount of Rows and Products per row

    Using the Rows and Products per row sliders, you can create very different looking recently viewed products sections.

    Recently viewed: 2 rows, 2 products per row
    Recently viewed: 2 rows, 2 products per row
  5. To make product 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.) Choose to enable the Outline section style for an alternate look.

    This option removes the section background and adds a border around the section, which uses your store's border color setting.

    Outline section disabled (left) and enabled (right)
    Outline section disabled (left) and enabled (right)
  7. Remember to click Save.

Recently viewed products settings

The following settings are available for the Recently viewed product section:

Configuration Settings

Heading

Add heading text for a title for this section.

Heading alignment

Change the heading alignment to Left, Center or Right.

Rows

You can choose to display between 1 and 4 rows of recently viewed products.

Products per row

You can adjust how many products are shown in each row 2, 3 or 4.

When you show more products per row, the product images are smaller.

Image aspect ratio

Use this setting to automatically crop images to a specific aspect ratio. Choose from Square (1:1), Landscape (3:2), or Portrait (2:3) aspect ratios.

Choose Natural if you do not want your images to be cropped.

Outline section

Enable this option to remove the section background and add a border around the section, which uses your store's border color setting.

Product image grid

Context's Product image grid section displays your product media in a grid below or above the product form. This section requires 4 or more product images add to your Product media in the Shopift admin.

Part of a product image grid
Part of a product image grid

In the theme editor Customize:

  1. Use the Templates selector to open the Products template.

  2. Click +Add section and select Product image grid and/or click directly on the Product image grid section to open the settings.

  3. Choose whether the Skip the first product image to avoid repeating your product images.

  4. Use the slider to select the number of Images shown.

    The collage-style layout will change with the number of images shown.

  5. To make product 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. Click Save.

Set up local pickup banner

You can add a local pickup option for online orders. This is a Shopify feature and you can learn more by reading Shopify's Local pickup documentation.

Local pickup information
Local pickup information

After you've configured your preferences for a local pickup location, Context will display whether an item is available for pickup, along with the store's location.

Here is how to set up your local pickup settings:

  1. From your Shopify admin, go to Settings and select Shipping and delivery.

  2. Under Local pickup, click Manage beside the location that you want to enable. If you have several locations, then click Show more to display all your locations.

    You must have a location set up already before you can select it.

  3. Select This location offers local pickup.

  4. Under Information at checkout, change the settings to meet your needs.

  5. (Optional.) Under Order ready for pickup notification, enter pickup instructions for customers.

  6. Click Save.

Set up unit pricing

Context supports Shopify's Unit pricing feature, which is available only in France and Germany. You can learn more about this feature from Shopify's Unit pricing documentation.

To display a Unit price, check the Show unit price for this variant checkbox in the Pricing section of your desired product in your Shopify admin. Context will automatically display the unit price. No code snippets are necessary.

Available theme sections

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

You will also find the following static sections with multiple features that appear on every page:

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.