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

Product template

Spark's product page lets you change the look and feel of the product information, add product sections and details, and configure other features like swatches and chips.

Spark's product pages put your products front and center. But you can also use product pages to highlight other exciting parts of your store.

Product page on desktop
Product page on desktop
Product page on mobile
Product page on mobile

Set up Product Details

The product details displays as a dropdown accordion when the product page Layout has the product description set to Beneath button. Here's an example:

Product details accordion
Product details accordion

The product details will display as a single vertical block when the product page Layout has the product description set to Beneath section. Here's an example:

Product details block
Product details block

Add Product Details widgets

Display core details like shipping, returns, and payment options to build trust with your customers with a customizable layout. You can also display payment icons and a shipping estimator button.

From the Product pages settings, you can add product details content blocks:

  1. From your Customize theme editor, choose Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click the arrow next to the Product details section to reveal the content blocks nested in this section.

    Use the drag handles to rearrange the order of the blocks:

    Shopify content blocks nested in a section
    Shopify content blocks nested in a section
  3. Click on the Payment, Security, or Shipping blocks to adjust their settings or use the Add block button to create a Custom widget.

    This opens the widget settings.

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

  5. Add a Title.

  6. Add Text.

    We recommend adding a brief description.

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

  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. Use the Save button in the top-right corner when you are finished editing.

Product Details widget settings

The Product details widgets the following settings:

Configuration Settings

Icon

Add Spark's Chat, Shipping, Payment, or Security icon.

You can also set the icon to None.

Title

Add a title.

We recommend a short title of one or two words.

Text

Add text.

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

Show payment icons

Display icons for each of the payment methods your store accepts.

No additional configuration is required. This setting includes the list of payment methods currently active on your checkout page.

Show shipping estimator

Display a button that opens a shipping estimator in a pop up modal.

Change the look and feel of your Product Details

From the Product pages settings, you can change the look and feel of the product info on your product pages:

  1. From your Customize theme editor, choose Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the Product details section.

  3. Choose whether to Show quick purchase bar to let customers buy your product anywhere on the product page.

    Quick purchase bar
    Quick purchase bar
  4. Choose whether to display Social sharing buttons.

  5. Check the Show vendor checkbox to show the Vendor field as set up in your products. Usually this is a product's brand name.

  6. Check the Show SKU checkbox to show the SKU number used to track your inventory.

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

  8. Check the Show quantity input checkbox if customers may be encouraged to buy more than one of your products at a time.

  9. Check the Show dynamic checkout button checkbox to let customers quickly check out using a saved payment method.

    When enabled, the Add to cart button becomes a secondary button with a payment option familiar to the current customer.

    This button only shows up for customers who have previously ordered something on a Shopify store and have a payment method saved. Check out Shopify's Dynamic checkout buttons documentation for more details.

  10. Choose the Description position to be Beaneath button or Beneath section.

    Here's an example of the Beneath button layout:

    Product description beneath button
    Product description beneath button

    And here's an example of the Beneath section layout:

    Product description beneath section
    Product description beneath section
  11. Check the Enable video looping checkbox to make product videos loop continuously after customers click to play them.

    To learn more about Shopify's available media types, see their Product media guide.

  12. Use the Save button in the top-right corner when you are finished editing.

Product details section settings

The Product details section has the following settings:

Configuration Settings

Show quick purchase bar

Show a quick purchase bar at the bottom of the product page when customers scroll down.

Show social sharing buttons

Show social media icons that let customers share your product.

Show vendor

Show the product's Vendor as you entered it while adding or editing your products.

Show SKU

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

Show quantity input

Show a quantity picker that lets customers add more than one product to the cart.

Show dynamic checkout button

Show a "Checkout with <Payment Method>" button to customers who have ordered with Shopify previously.

Check out Shopify's Dynamic checkout buttons documentation for more details.

Layout

Set the description position to Beneath button or Beneath section.

Remember that this effects all of your product pages. You should double check all of your product pages to make sure you are happy with the layout.

Enable video looping

For your products that have product videos added as media, make videos loop continuously after customers click to play them.

Add Product feature sections

In addition to changing the look and feel how the product pages are displayed, you can add the following feature sections to your product pages. You can learn more about these feature sections and how to set them up in these articles:

Note that these settings and sections are shared between all of your store's product pages.

You can add a Recommended products section to product pages on your store. This section appears underneath the main product information.

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.

Recommended products section
Recommended products section

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

To set this section up:

  1. From your Customize theme editor, choose Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the Recommended products section from the list of sections.

    This opens the Recommended products settings.

  3. Check the Enable checkbox to enable the Recommended products section.

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

  5. Change the Heading.

  6. Change the Subheading.

  7. Choose the Max width of text for the subheading.

  8. Use the Save button in the top-right corner when you are finished editing.

The Recommended products section has the following settings:

Configuration Settings

Enable

Check this checkbox to enable the recommended products section.

Heading

Change the heading displayed above the list of products.

We recommend a title of just a few words long.

Columns per row

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

On mobile devices, this section will become a click-through gallery showing one product at a time.

Max width of text

Control the width of the subheading text.

Image aspect ratio

Choose to display your product images as Square, Landscape, or Portrait. The default Natural setting will display the original orientation of your images.

Set up Product chips

You can replace the variant dropdown with square chips displayed in a row. These chips are clickable buttons that customers can use to switch between your product's variants.

Product chips
Product chips

Here's how to set up Product chips:

  1. From your Customize theme editor, go to your Theme settings and select the Product section.

  2. Change the 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 seprated by commas, for example: "Size, Material, Fabric".

  3. Use the Save button in the top-right corner when you are finished editing.

Set up Swatches

You can replace the variant dropdown with circular images of the color or pattern of each variant. Color swatches are tiny, clickable buttons on your products. Each swatch links to one of your color variants.

Product swatches
Product swatches

To learn more about setting up swatches on your product pages, see our Swatches article.

Set up an Information popup

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

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

Product information popup
Product information popup

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

Set up Product Reviews

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

Product Reviews
Product Reviews

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

Add Local pickup

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

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

Pickup information
Pickup information

Spark's local pickup block will appear automatically when these settings have been saved.

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.

Add accordions using "shortcodes"

You can customize the product description section by adding information dropdowns called accordions. This is a great way to add need-to-know information about your products.

Accordion on product page
Accordion on product page

How to add accordions to your product description

You can add text accordions that open up to reveal more text. This feature can also be known as tabs or dropdowns, but we'll be calling them accordions here.

To add one, follow these instructions:

  1. Add or edit the product you want to add an accordion to.

    You can do this from the Products page in your Shopify dashboard.

  2. Switch to the HTML view using the product description editor toolbar.

    Show HTML button on description toolbar
    Show HTML button on description toolbar

    See Shopify's Rich text editor documentation for more information about this.

  3. Paste in the required <div> containers used for accordions.

    We recommend that you copy in the following code snippet, in its entirety, to get started, or use this Accordion code generator:

    <div class="accordion">
    <div class="accordion__group">
    <a class="accordion__label" href="#">
    Insert the first accordion group label here
    </a>
    <div class="accordion__text">
    Insert the first accordion group contents here.
    </div>
    </div>
    <div class="accordion__group">
    <a class="accordion__label" href="#">
    Insert the second accordion group label here
    </a>
    <div class="accordion__text">
    Insert the second accordion group contents here.
    </div>
    </div>
    </div>

    Note that the indentations don't really matter. They just make these blocks of text easier to read.

  4. Replace the example text from the code snippet to your custom text.

  5. Add additional <div class="accordion__group">s if required.

    Note that each accordion group should have inside of it:

    • One <a class="accordion__label" href="#">

    • One <div class="accordion__text">

  6. Make sure you close each <div> and <a> with a corresponding </div> and </a>, just like in the example.

  7. After you Save the product, you can go see what your description looks like using the View product button.

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.