We've recently relaunched all three of our themes. Watch the launch video here.

Product template

Spark's Product page template offers a tremendous amount of flexibility and powerful, stylish features. Spark comes with an Alternate Product Template and you can also create your own custom templates.

Default product template on desktop
Default product template on desktop
Alternate product template on desktop

You can rearrange and edit the blocks that make up your product page, add any of Spark's 20+ feature sections, and set up custom features like Swatches, Product details widgets, and an Information popup.

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.

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

Stock level indicator

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.

Buy buttons

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

It can also show any dynamic checkout buttons.

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

Feature sections

As with all templates on Spark, you can add any of Spark's 20+ feature sections. To learn more about how Sections and Templates work, see Shopify's OS2 Theme Editor manual.

See our feature sections articles to learn more:

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 your Accordions

  1. In your theme editor (Customize), 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.

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

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

  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. Remember to click Save in the top-right corner.

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 your 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 your Product 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. Remember to click Save in the top-right corner.

Information popup

The Information popup displays extra information about your product options. Customers can click on a link next to your product variants to open up a info chart, size guide, or other details about your product variants.

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

Set up your Information popup

See our full Information popup article to learn how to add a custom page to display as a popup with a link to next to your variant options.

Stock level indicator

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

To set up your Stock level indicator:

  1. In your theme editor (Customize), choose the 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, see the Dynamic source section below.

  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, see the Dynamic source section below.

  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. Remember to click Save in the top-right corner.

Add a dynamic source to your inventory fields

If you need to set a different Inventory base quantity and Low inventory threshold for multiple products, you can use Shopify's Dynamic source feature.

This will require creating and adding Metafields. Metafields let you add custom information that isn't usually captured in the Shopify admin. To learn more, see Shopify's Metafields guide.

Follow the instructions below to (1) create a metafield for your products, (2) add content to product metafields, and (3) insert the metafields in your theme editor as a dynamic source.

To create a metafield for your products:

  1. In your Stock Level Indicator block settings, click the Dynamic source button next to the Inventory base quantity field.

    Insert dynamic source button
    Insert dynamic source button
  2. Click the + Add metafield button.

    Add metafield button
    Add metafield button

    This opens your Shopify admin settings.

  3. Click the Products tab.

    Products metafields tab in Shopify admin
    Products metafields tab in Shopify admin
  4. Click the Add definition button in the top-right.

  5. Add a Name to the metafield that describes what it will be used for.

    We recommend naming the metafield the same as the setting name: "Inventory base quantity" or "Low stock threshold".

    Metafield definition name
    Metafield definition name
  6. Click the + Select content type button and select Number.

    Menu list of content types for the metafield
  7. (Optional.) Repeat steps 4 - 5 to add another metafield for Low stock threshold.

  8. Click Save.

To edit the metafield for a product:

  1. Go to your Product in your Shopify admin.

  2. Scroll down to the Metafields section.

    Metafields section in the product editor
    Metafields section in the product editor
  3. Enter the Inventory base quantity or Low quantity threshold that you want for the product.

    A metafield for an inventory base quantity
    A metafield for an inventory base quantity
  4. Repeat steps 1 - 3 to add the different quantities to the metafields of the products you wish to display a Stock level indicator for.

  5. Click Save.

To add your metafield as a dynamic source to the inventory fields:

  1. In your theme editor (Customize), return to the Stock Level Indicator block settings.

  2. Delete the current quantity in the Inventory base quantity so the field is left blank.

  3. Click the Dynamic source button next to the Inventory base quantity field.

  4. Select the "Inventory base quantity" metafield.

    The metafield will now be added as a dynamic source.

  5. (Optional.) Click the Dynamic source button next to the Low stock threshold to add a "Low stock threshold" metafield.

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

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 your Product details widgets

  1. In your theme editor (Customize), 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.

  9. Add Text.

    We recommend adding a brief description.

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

  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. Remember to click Save in the top-right corner.

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

Set up Recommended products

  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. Remember to click Save in the top-right corner.

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 the 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 the template to your 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. Remember to click Save in the top-right corner.

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.