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 4 alternate product templates designed for specific uses. See the templates for Product Landing Pages, Product Tabs, 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

NOTE

Purchased or trial themes include only one default layout (based on the Vogue demo). See our Demo layouts article to add the product page layouts used by the Chic, Craft, and Organic demo stores.

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

NEW

Alternate templates were added in v1.3.0 on Sept 12, 2022. See our change log and theme update guide to learn more.

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

NOTE

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.

Product tabs layout

The Product tabs template offers an alternate product page layout with a separate section for your product description and other information. Add multiple tabs to include product details such as size or care guides, shipping and returns, or customer testimonials.

Customize the with-tabs product template in the theme editor then assign the template to your product pages in the Shopify admin.

Product tabs
Product tabs

See the Product tabs section for step-by-step instructions.

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. We recommend consulting a Shopify Expert or Task Husky for any customizations to the default theme.

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.

Custom option

A custom field for customers to add personalized text, notes, or select various options.

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

UPDATED RECENTLY

Breadcrumbs and Navigation buttons were added in v1.4.0 on Oct 6, 2022. See our change log and theme update guide to learn more.

Customize the layout of your product page with options to change the size, position, and shape of your images. Choose to show Breadcrumbs and Navigation buttons at the top of the product pages so customers easily navigate between pages and products.

For an alternate layout for your product description and information, see the Product tabs template.

Product page with thumbnail layout
Product page with thumbnail layout
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. (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.

  3. (Optional.) Click Show breadcrumbs to display a row of links so customers can see where they are on your site and let them return to collections.

    Breadcrumbs appear when customers have clicked through one of your collections and opened a product page.

    Breadcrumb links
    Breadcrumb links
  4. (Optional.) Click Show navigation buttons to display "Next" and "Previous" buttons to let customers move through products in a collection.

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

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

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

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

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

Swatches can also display on hover across your site and show dynamic option availability on product pages.

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
    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 (size guide)

The Information popup displays extra information about your products options, like a size guide, on your product pages. You can display a info popup link next to a variant selector for a product option or add a moveable info popup link with icon.

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

Information popup for "Size guide"
Information popup for "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.

Product tabs

NEW

This feature was added in v1.5.0 on Oct 27, 2022. See our change log and theme update guide to learn more.

The Product tabs template offers an alternate product page layout with a separate section for your product description and other information. Add multiple tabs to include product details such as size or care guides, shipping and returns, or customer testimonials.

Product tabs
Product tabs

Customize the with-tabs product template in the theme editor then assign the template to your product pages in the Shopify admin.

Set up product description tab

The Product description tab displays the description of your product saved in your Shopify admin. Click on the block to customize the Heading, Text size, and Content width.

Product description tab
Product description tab

Steps

In your theme editor (Customize):

  1. Open the with-tabs product template in the template selector.

    Template selector
    Template selector
  2. Click on the Product description block to open the settings.

    Product tabs section blocks
    Product tabs section blocks
  3. (Optional.) Change the Tab heading text from the default "Product description".

  4. Enter Heading text to display a title above the product description within the tab.

    Select a Heading size: either Small, Medium, Large, or Extra large.

  5. Select the Text size of the product description: either Small, Medium, Large, or Extra large.

    To edit the product description, go to the product page in your Shopify admin.

  6. Choose the Content width for the product description.

    Select Full width to make the product description text span the width of the page.

    Select Custom and adjust the Max width of text to control the width and line-breaks of the product description.

  7. Click Save.

Add product tabs (with columns)

You can add three different types of product tabs: One column, Two column, or Three column. Each Product tab includes custom headings and text, optional Page content (eg. for a size guide), and block image.

Three column product tab
Three column product tab

Steps

In your theme editor (Customize):

  1. Click on a Product tab block ("One Column", "Two Column", or "Three column") to open the block settings.

    Click (+) Add block to add more product tabs with 1 - 3 columns.

    Tab block settings
    Tab block settings
  2. Enter the Tab heading text for the title of the tab (eg. "Size guide").

    We recommend a short heading of 1 to 3 words.

  3. Enter Heading text to display a title above the text within the tab.

    Select a Heading size: either Small, Medium, Large, or Extra large.

  4. Enter Text to display beneath the heading.

    Alternatively, insert custom page content created in your Shopify admin. This option is great for size charts and will override any text content.

  5. Select the Text size: either Small, Medium, Large, or Extra large.

  6. (For One Column tabs.) Choose the Content width for the tab heading and text.

    Select Full width to make the text content span the width of the page.

    Select Custom and adjust the Max width of text to control the width and line-breaks of the text content.

  7. (For Two and Three Column tabs.) Set the Content vertical alignment and adjust the Column spacing.

    Column spacing may need to be increase for longer tab headings and text.

  8. Under Image, click Select image to upload an image or icon.

    Adjust the Image width between 50% to 100% of the column width.

    Select the Image position to display it Above text or Below text.

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

  10. Click Save.

Add custom page content

Create a page for your tab content in your Shopify admin using the rich text editor. You can add tables, images, links, and other rich text to display in the product tab. Custom page content is perfect for displaying a size chart.

NOTE

Pages are a Shopify feature. To learn more, see Shopify's Pages manual.

Tab page content for size guide
Tab page content for size guide

Steps

In your theme editor (Customize):

  1. Click on a Product tab block to open the settings.

    To display different page content (eg. different size charts) for specific products, add metafields and insert dynamic sources.

  2. Use the Select page button to find the page you created in the Shopify admin.

  3. Click Save.

Section style and layout

Adjust the tab alignment and spacing, Font, Color, and Section style.

Steps

In your theme editor (Customize):

  1. Click on the Product tabs section to open the settings.

    Product tabs section settings
    Product tabs section settings
  2. Set the Tab alignment to the Left or Center of the product page.

  3. Increase or decrease the Tab spacing using the slider.

  4. Set the Font to Heading or Body font selected in your theme settings.

  5. Select the Text size of the Tab headings: either Small, Medium, Large, or Extra large.

  6. Use the color selector to change the Background and Text color.

  7. Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  8. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

    Default top and bottom padding for sections
    Default top and bottom padding for sections
  9. 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.

Custom options

NEW

This feature was added in v1.4.0 on Oct 6, 2022. See our change log and theme update guide to learn more.

Use Custom option blocks to let customers customize their products or orders with text fields (single and multi-line), checkboxes, and buttons. Any text and selected options will appear in the cart and order details.

NOTE

Custom options uses line item properties to collect and display additional information in the cart and order details. Custom options does not support add-on pricing.

Custom option with radio buttons
Custom option with radio buttons
Cart with Field label and selected value
Cart with Field label and selected value

Steps

In your theme editor (Customize):

  1. Use the Templates selector to open a Product template.

  2. Click (+) Add block and select Custom option from the Theme Blocks list.

  3. Select a Field type:

    Text - Single line of text

    Long text - Multiple lines of text

    Checkbox - Single checkbox

    List | Radio Buttons - Multiple buttons (limited to one selection)

    List | Dropdown - Dropdown menu (limited to one selection)

  4. Enter short text for the Field label that titles what the custom field is for.

    Note: For multiple custom option blocks, each block must have a unique Field Label. Blocks with the same Field label will overwrite each other.

    Leave the Field label blank to hide it.

  5. Enter Instructions to tell customers about the options and any requirements (e.g., a maximum of 10 words).

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

  6. (For Text fields.) Change the Field placeholder text that appears until the customer enters their own text.

    The default placeholder is "Enter your text here." You may want to change the wording to be more specific.

  7. (For Checkbox options.) Enter text for the Checked value, which will appear in the cart and order details if checkbox is selected.

  8. (For List options.) Select a List style to display options in a Dropdown or as Radio buttons.

  9. (For List options.) Enter multiple options as a comma-separated list.

    For example: "Option 1, Option 2, Option 3"

  10. (Return to Product Overview.) 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.

  11. Click Save.

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.

NEW

This feature was added in v1.3.0 on Sept 12, 2022. See our change log and theme update guide to learn more.

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