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

Product template

Stiletto's 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 Stiletto's available sections and theme settings.

Product page above fold
Product page above fold
Product page below fold
Product page below fold
NOTE

In addition to the default product template, Stiletto comes with 3 alternate product templates designed for specific uses. See the templates for Product Landing Pages, Pre-Order Products, and Gift Cards.

Using product templates

At first, the Default template applies to 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 content or settings of specific products that use the same template.

Here are the basic steps to using templates:

Open products template

Use the Templates selector in the theme editor to find the Product templates. Select the Default product template or one of the Alternate product templates

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

Preview product pages

When you open a template, the theme editor shows one of your product pages to preview that template and any changes made.

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

NOTE

Templates cannot be assigned on unpublished or trial themes. All changes to templates will be saved and can be assigned when after you purchase and publish the theme.

Templates are assigned to products in the Shopify Admin. All new products use the Default product. A warning symbol (!) will appear under PREVIEW next to the product name if it does not have the current template assigned to it.

Go to the product in the Shopify admin and use the Theme template menu to assign a different template.

Warning symbol for unassigned template
Warning symbol for unassigned template

Create new templates

To change the content or style of specific pages, you 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 content or settings of specific products that use the same template.

Steps

In your theme editor (Customize):

  1. Click on Products in the Template selector.

  2. Click Create template.

    Create template button for products
    Create template button for products
  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. 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 and can be assigned when purchased and published.

  5. Click Save.

Alternate Templates

Stiletto includes 3 alternate products templates with preset styles and selected sections. These templates are designed with Stiletto's available features for specific uses.

Remember to Assign templates to your pages to make them live.

Product landing page

Showcase your product with a dynamic, feature-rich page. In addition to the product form, preset sections include: Slideshow, Multi-column, Image with text, Collapsbile row list, and Testimonials.

Pre-order product

Replace the "Add to Cart" button language with "Pre-order" to let customers know that your product is not yet ready to ship.

Note: Clicking "Pre-order" will still charge the customer on checkout. Deferred payment or other pre-order features will require an app or customization.

Gift cards

Assign this template to a gift card product added in your Shopify Admin.

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 layout for your product templates.

NOTE

Click directly on the Product overview section to find settings for the page style and layout.

Product overview blocks
Product overview blocks

Default product blocks

The Product overview section includes default blocks that are essential to buying your products:

Configuration Settings

Product header

Displays product title, price, vendor, star rating, and badges.

Description

Displays product description as added in the Shopify admin.

Variant selector

Displays available product options (e.g. Size or Material) with selectable variants.

Includes Information popup, Variant swatches, and Variant chips.

Quantity selector

Displays product quantity that can be increased or decreased.

Buy buttons

Displays "Add to cart" button with local pickup information below.

It can also show any dynamic checkout buttons.

Share

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

Feature product blocks

The Product overview section includes additional product blocks:

Configuration Settings

Information popup

An icon link that opens an popup with custom page content when clicked.

Stock level indicator bar

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.

Collapsible row

Display expandable rows with headings that open when clicked to reveal more text.

Learn more about Collapsible rows.

Text

Display additional information as a block of rich text.

Text list with icon

Display additional information with lines of text and one of 30+ icons.

Product label

Display badges with a short text label and one of 30+ icons.

Border

Add a solid line to visually separate product blocks.

Spacer

Add padding between blocks to adjust the layout.

Product rating

Visual star rating.

Custom liquid

Display a block with custom HTML or liquid.

Page style and layout

Customize the layout of your product page with options to change the size, position, and shape of your images.

Alternate Grid style layout
Alternate Grid style layout

Steps

In your theme editor (Customize):

  1. Click on the Product overview section to open the general settings for the product page.

    Product overview settings
    Product overview settings
  2. Select a Gallery style to change the layout of your product media.

    Grid displays product images in two columns.

    List displays product images in on column.

    Thumbnails displays all product images as small clickable images next to the main product image.

  3. Select the Gallery size of your product media. Either Small, Medium, Large, Extra Large.

    The width of the product details will increase or decrease according the gallery size.

  4. To make all product media a uniform shape, set the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

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

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  5. (Optional.) For long product forms, uncheck the Enable sticky sidebar checkbox so customers can easily access product details and buy buttons when they scroll down.

    The default "sticky" sidebar keeps the product form in view when scrolling.

  6. Uncheck the Enable video looping checkbox to make product videos play a single time after customers click play.

    See Shopify's Product media guide to learn more.

  7. Uncheck the Enable image zoom option if you don't want your product images to appear in a full-size "lightbox" when clicked.

  8. Click Save.

Variant chips

All product variants display as "Chips" or clickable rectangles. You can select a Chip Style to change their layout.

Product size chips
Product size chips

Steps

In your theme editor (Customize):

  1. Under Product overview, click on the Variant selectors block to open the settings.

  2. Under Chip style, set the Layout to 2 Column, 3 Column, or Natural.

    The Column layouts expand the width of the chips to the product form width.

    Natural matches the width of the chip to the length of the variant name.

  3. Click Save.

Variant swatches

Stiletto can display your product variants as a sleek row of clickable color Swatches. You can also choose to show swatches on product cards across your site whenever a customer hovers over them.

Product color swatches
Product color swatches

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

Text block

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.

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

Steps

In your theme editor (Customize):

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

    Add block button
  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. Set the Text size to Small, Medium, or Large.

  5. Select which Column to display the Text block: Either the Right (in the product form) or on the Left (beneath the product media).

  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.

Collapsible rows

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 Collapsible row displays expandable rows with headings that open when clicked to reveal more text. It's great to add more product details or answerscommon questions in a compact way.

Multiple collapsible rows
Multiple collapsible rows

Add collapsible row

In your theme editor (Customize):

  1. Under Product overview, click (+) Add block and select Collapsible row.

  2. Click on the new Collapsible row block to open the block settings.

  3. Change the 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.

  4. Add Body text that will display when the row is opened.

    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.

  5. (Optional.) Under Page for content, select a page to replace the Body text.

  6. Check the Expand by default option to reveal the row content when the page loads.

  7. Select which Column to display the Collapsible row: Either the Right (in the product form) or on the Left (beneath the product media).

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

  9. Click Save.

Information popup

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 Information popup displays extra information about your products, like a size guide or other details about your product variants.

You can display an information popup link next to your variant options or add a separate icon block with a link that can be reordered in the product form.

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

Info Popup for a size guide
Info Popup for a size guide

Text list with icons

Display additional information with lines of text and one of 30+ icons.

3 Text list with icons blocks
3 Text list with icons blocks

Steps

In your theme editor (Customize):

  1. Under Product overview, click (+) Add block and select Text list with icons.

  2. Click on the new Text list with icons block to open the block settings.

    Block settings
    Block settings
  3. Choose whether to Add box to display an outline around the text list.

  4. Choose whether to Add dividers to separate each text list item.

  5. For each List item, select an Icon and enter Text.

    We recommend a short sentence or two.

  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.

Product labels

Display badges with a short text label and one of 30+ icons.

Three product labels with icons
Three product labels with icons

Steps

In your theme editor (Customize):

  1. Under Product overview, click (+) Add block and select Product labels.

  2. Click on the new Product labels block to open the block settings.

    Block settings
    Block settings
  3. For each Label, select an Icon and enter Text.

    We recommend one or two words.

  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.

Social sharing buttons

Display social media icons that let customers share the product on their Facebook, Instagram, or Twitter, or copy a direct URL to your product page.

To disable Share icons, click on the Share block and click Remove block.

Social share block
Social share block

Dynamic checkout button

The Dynamic checkout button lets customers quickly buy the product they're viewing. This button dynamically displays either a "Buy it now" button that skips directly to the cart or a branded button with the customer's preferred payment method.

Dynamic checkout button settings
Dynamic checkout button settings

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

NOTE

This feature is available only for stores using Shopify Payments. 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.

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.

NOTE

Inventory and quantity tracking is a Shopify feature. See the Shopify guide about 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
  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.

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

  8. Click Save.

Add selected products to feature on your product page. Use this block for curated related or recommended products that pair well with the current product.

Related Products block
Related Products block

Steps

In your theme editor (Customize):

  1. Under Product overview, click (+) Add block and select Featured Products.

    Add block button
  2. Click on the new Featured products block to open the block settings.

  3. Change the Heading to a short title of a few words.

  4. Select which Column to display the Text block: Either the Right (in the product form) or on the Left (beneath the product media).

  5. Click Select products to manually choose what products to display.

    To show different products on different product pages, follow these instructions to add a Product metafield to use as a dynamic source.

  6. Choose whether to Enable swipe on mobile.

  7. Choose to display your featured products as a Collapsible row.

    As a collapsible row, the featured products Expand by default. You can choose to disable this option.

  8. Click Save.

Product reviews

Stiletto 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
Product reviews

Local pickup banner

The Local pickup banner tells customers whether a product is in stock at one of your locations. Stiletto automatically displays this banner beneath the Buy buttons if your local pickup settings are set up in your Admin.

NOTE

Local pickup is a Shopify feature and you can learn more by reading Shopify's guide for Local pickup.

Set up your local pickup settings

Here is how to configure 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.

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

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.

NOTE

Product recommendations are a Shopify feature. For more information, see Shopify's Product recommendations guide.

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

  2. Change the Columns to display 2, 3, or 4 recommended products.

  3. Change the Heading text displayed as a title at the top of the section.

    We recommended a short title of just a few words.

  4. Change the Subheading text displayed below the Heading.

  5. Use the slider to adjust the Max width of text for the heading and subheading.

    Experiment with this setting to find a clean visual shape for your text.

  6. Click Save.

Dynamic sections

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.

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

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.