Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

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

Add any of Spark's 20+ feature sections, and set up custom features like Swatches, Product details widgets, and an Information popup.

Product template on desktop
Product template on desktop

Spark comes with an Alternate Product Template.

Alternate product template on desktop

Spark also comes with a Quick puchase bar, fully integrates with Shopify's Product Reviews app, and pairs well with your physical store with a Local pickup banner.

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

Theme blocks in the Product overview section
Theme blocks in the Product overview section

The theme blocks that make up your products template include your product information and options set up in the Shopify Admin and also Spark's feature blocks including Product Details widgets, Accordions, Custom Text Field, and Share icons.

Product overview blocks

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

Configuration Settings

Title

The title of your product.

Price

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

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.

Border

A single border line that can be used to visually separate your product blocks.

Quantity selector

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

Check the Show labels checkbox to display the option names as titles for your variants (for example, Size or Material).

Variant selectors

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

See Spark's Information popup, Variant swatches, and Variant chips.

Custom text field

A text field that lets customers add personalized text or note to the product when added to the cart.

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.

Buy buttons

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

It can also show any dynamic checkout buttons.

Product detail widgets

Add Product details accordions for information about Shipping, Security, Payment, and more.

Accordion

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

Text

Add additional information with a block of text.

Share

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

Product Overview settings

The following settings are found by clicking directly on the section title:

Configuration Settings

Quick purchase bar

Check the Show quick purchase bar option to display your product with a "Buy now" button at the bottom of the screen when customers scroll down.

Video looping

Check the Enable video looping option to play your product video continuously after it has been started.

Accordions

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.

See Spark's Product details widgets to add specialized accordions for Shipping, Payment, Security, or other details with features like payment icons and a shipping estimator that can help build trust with your customers.

Accordion dropdowns on product page
Accordion dropdowns on product page

Set up accordions

In the theme editor (Customize):

  1. Choose a Products template to edit.

  2. Click + Add block and select Accordion from the Theme Blocks list.

    Add block button
    Add block button
  3. Click on the new Accordion block to open the block settings.

    Accordion block settings
    Accordion block settings
  4. Choose to display the accordion in the Left or Right Column.

    The Left column sits below your product media. The Right column sits below your product form.

  5. Set the Style of the accordion to be Open or Closed when customers first visit your product page.

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

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

  8. (Optional.) Click and drag the ⋮⋮ 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 accordion entirely.

  9. Click Save.

Variant Swatches

Spark 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 swatches
Product swatches

Set up swatches

See our full Swatches article to learn how to use Spark'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.

Variant Chips

Chips are square clickable buttons that you can use to replace the default variant dropdown menu. It's a great way to have all your variant in plain view and easily selected.

Product chips used for variant sizes
Product chips used for variant sizes

Set up variant chips

  1. Click on the Product overview section and open the Theme settings tab.

    Product overview Theme settings
    Product overview Theme settings
  2. Change the Variant option for chips name to match the Product option that you want to display variant chips for.

    You can add chips to multiple Product options. Use a list separated by commas, for example: "Size, Material, Fabric".

    Theme settings tab under Product overvew
    Theme settings tab under Product overvew
  3. 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.

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

Product information popup with a size guide
Product information popup with a size guide

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

Custom text field (personalization)

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 Custom text field lets customers personalize products or customize their order before adding a product to your cart.

For example, customers can enter personal text for engraving, or add specific requests and instructions to their order.

Custom text field example
Custom text field example

The custom text field uses line item properties to collect and display additional information in the cart and order details.

Steps

In your theme editor (Customize):

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

  2. Click + Add block and select Custom Text Field from the Theme Blocks list.

    Add block button
    Add block button
  3. Enter a Title to display above the field.

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

    Uncheck the Show label box to hide the title.

  4. Enter Instructions to tell customers what to enter in the field (e.g., a personal engraving with a maximum of 10 words).

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

  5. (Optional.) 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.

  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.

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 indicator at full, half, low, and out-of-stock levels.

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

    Add block button
    Add block button
  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.

    Stock level indicator with Show label toggled off
    Stock level indicator with Show label toggled off
  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.

Dynamic checkout button

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

Set up dynamic checkout button

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

Dynamic checkout button settings
Dynamic checkout button settings

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

Quick purchase bar

Spark's Quick purchase bar displays at the button of your product pages when customers scroll down, letting them quickly add your product without needing to return to the top of the page.

Quick purchase bar
Quick purchase bar

Set up quick purchase bar

To enable this option, click on the Product overview section to access its settings and check the Show quick purchase bar checkbox.

Product overview section settings
Product overview section settings

Product details widgets

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 Product details widgets are dropdown accordions that display core details like shipping, returns, and payment options to build trust with your customers with a customizable layout. You can also display payment badges and a shipping estimator button.

Product details accordion

Set up product details widgets

In your theme editor (Customize):

  1. Choose a Products template to edit.

  2. Click one of the Payment, Security, or Shipping blocks.

    Shipping accordion settings
    Shipping accordion settings
  3. Choose to display the accordion in the Left or Right Column.

    The Left column sits below your product media. The Right column sits below your product form.

  4. Set the Style of the accordion to be Open or Closed when customers first visit your product page.

  5. (Optional.) Change the Icon next to the title of your widget or set it to None.

    Product details icons
    Product details icons
  6. Change the Title text to display as the heading that will reveal the content when clicked on.

  7. For the Payment or Shipping widgets, choose to Show payment options or Show shipping estimator

    Pop up shipping estimator
    Pop up shipping estimator
  8. Add a Title.

    We recommended a short title of just a few words.

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

  9. Change the Text content to tell customers more about your product or store.

    Use the formatting buttons to add bold, italics, or links.

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

  10. (Optional.) Click and drag the ⋮⋮ 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.

  11. Click Save.

Alternate template with product details

In the Alternate product template, the Product details widgets display as a single vertical block. Learn more about the Alternate Template:

Product details block
Product details block

Product Reviews

Spark is fully integrated with Shopify's Product Reviews app. You can add the app from Shopify's app store and don't need to add any code snippets.

Product Reviews
Product Reviews

Add Shopify's Product Reviews

See our full Product reviews article how to add Shopify's app to your theme and arrange it on your product page templates.

Local pickup banner

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

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

Pickup information
Pickup information

Manage local pickup settings

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

    Shipping and Delivery in the Shopify Admin
    Shipping and Delivery in the Shopify Admin
  2. Find the Local pickup section click Manage beside the location that you want to enable.

    Local pickup settings
    Local pickup settings

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

  3. Check the This location offers local pickup checkbox.

  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 to upsell your products and keep customers shopping.

Recommended products section
Recommended products section

For more information about product recommendations and which products are displayed, see Shopify's guide for Product recommendations.

By default, products with a "compare at price" will display a Sale badge on products across your site. Go to your theme settings to turn off the Show sale badge option under Product listing.

  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 Columns per row 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. (Optional.) To display variant swatches on your product cards when hovered over, go to Theme settings > Products and check the Show swatches and chips checkbox.

    Note: this option applies globally to all product cards across your site.

    Show swatches and chips setting
    Show swatches and chips setting
  7. Click Save.

Enable hover add-to-cart

The hover add-to-cart feature lets customers add products to their cart directly from collection pages and sections with products. Hovering over a product reveals an Add to cart button below the product image.

Hover add-to-cart enabled
Hover add-to-cart enabled

If the product has multiple product options, clicking Add to cart opens a popup modal with the product's variant and quantity selectors.

Popup modal with variant and quantity selectors
Popup modal with variant and quantity selectors

In the theme editor (Customize):

  1. Click on the Theme settings tab and open the Product listing settings.

    Hover add-to-cart settings
    Hover add-to-cart settings
  2. Under Add to cart, check the Enable hover add-to-cart checkbox.

    By default, a success checkmark will appear when the customer clicks Add to cart and the shopping cart icon quantity will be updated.

  3. To let customers buy multiple products at once, check the Enable hover add-to-cart quantity selector.

    The Add to cart button will appear as a square button with a plus sign (+) symbol.

    Hover add-to-cart with quantity selector
    Hover add-to-cart with quantity selector
  4. To display the updated products in the cart after they add a new item, check the Show fly-out cart after product added to cart checkbox.

    Fly-out cart with updated items
    Fly-out cart with updated items
  5. Click Save.

Alternate Template

Spark comes with an alternate product template with a distinct layout designed to build a high level of trust. This template displays the product description below your product media and features your Product details as a vertical block.

To learn more about Templates and how to create your own in the theme editor, see Shopify's Templates manual.

Alternate product template on desktop

Edit alternate product template

To edit the alternate product template, use the top dropdown menu in your theme editor to select the Products > Alternate-product template. This template includes a separate Product details section in your theme editor.

Drop-down menu of page templates
Drop-down menu of page templates

Assign alternate template to product pages

Once your template is ready, you can assign that template to specific product pages in the Shopify admin. Go to the product page you want to edit and use the Theme template menu to select the alternate template.

Assign product templates to your product pages.

Set up product details widgets

To set up the product details widgets:

  1. Make sure you're already editing the Alternate-product template.

  2. Click on the Description block and set the Style to Paragraph, Accordion open, or Accordion closed.

  3. Set the Style of the Description block to Open, Closed, or Paragraph.

  4. Click one of the Payment, Security, or Shipping blocks.

  5. (Optional.) Change the Icon next to the title of your widget or set it to None.

    Product details icons
    Product details icons
  6. Change the Title text for the widget.

  7. For the Payment or Shipping widgets, choose to Show payment options or Show shipping estimator

    Pop up shipping estimator
    Pop up shipping estimator
  8. Add a Title.

    We recommended a short title of just a few words.

  9. Add Text.

    We recommend adding a brief description.

    Use the formatting buttons to add bold, italics, or links.

  10. For the Payment or Shipping widgets, choose to Show payment options or Show shipping estimator

    Pop up shipping estimator
    Pop up shipping estimator
  11. (Optional.) Click and drag the ⋮⋮ icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles
  12. Click Save.

Add feature 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 Spark (except Checkout), you can add and rearrange the following 20+ feature sections:

See our feature sections articles to learn more:

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.