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.

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:

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:

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:

STEPS

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

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:

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

8. Click Save.

Settings reference

The Product details widgets the following 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:

STEPS

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

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.

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:

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

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

Settings reference

The Product details section has the following 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:

• Blog posts

• Collection list

• Featured collection

• Featured collection row

• Image with features

• Image with text

• Logo list

• Newsletter

• Social proof

• Questions and Answers

• Inline features

• Quotes

• Rich text

• Testimonials

• Text columns with images

• Video

• Video Hero

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

Add Recommended products

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

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

To set this section up:

STEPS

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

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

Settings reference

The Recommended products section has the following 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.

Here's how to set up Product chips:

STEPS

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

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.

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:

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.

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.

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

Here is how to configure your local pickup settings:

STEPS

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 with shortcodes

Accordions are collapsible tabs that reveal more text when an accordion heading is clicked. They're great for additional product details.

Create accordions with our "shortcodes", which are small blocks of HTML pasted directly into the page text editor in your Shopify admin.

Follow the steps below to use our shortcode generator with easy-to-use fields that automatically creates a shortcode without needing to edit the HTML yourself.

Steps

STEPS

1. Open our shortcode generator in a new window or tab.

2. Enter text in the Accordion Title field for the clickable heading.

   We recommend a short 1-3 word heading that describes the content of the accordion. Example: "Product materials" or "Shipping policy".

3. Enter a few sentences in the Accordion Description field for the text that's revealed when the accordion title is clicked.

4. Click (+) Add New Item to create additional accordion tabs.

   Repeat steps 1 - 3 until you have created all the accordion tabs you need.

5. Click Generate Code. You code will appear in the Results box.

6. Select and copy the entire code in the Results box.

7. In your Shopify admin, add or open an existing page in your Pages, Blog posts, or Products.

   We recommend making a backup of your page content or creating a new page with the same content for testing in case any mistakes occur.

8. Click the "Show HTML" (</>) button on the text editor toolbar.

9. Paste your shortcode into the editor.

10. Click Save.

8. Finally, click View page to see how your accordions look on your page.

Accordion shortcodes are also supported on Pages, About pages, and Blog posts.

• Product pages

• Swatches

• Information popup

• Product reviews

• Dynamic checkout buttons

• Shopify's Product manual