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

Featured product

The Featured product section lets you display a [product page][product-page] in single block anywhere on your site so customers can get a full overview of your product and quickly add it to their cart.

Featured product section on the home page
Featured product section on the home page

The Featured product section section can be added to any template (except the Checkout). To learn more about Sections and Templates, see Shopify's OS2 Theme Editor manual.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Featured product from the Theme Sections list.

    Add section button
    Add section button
  3. Click on the Featured product section.

    This opens the Featured product section settings.

  4. Use the Select Product button to choose from your store's list of products.

  5. (Optional.) If you have add a video to your Product media, you can choose whether to Enable video looping so they play continuously afted being started.

  6. (Optional.) Enable the Alternate section color.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

  7. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

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.

Accordion dropdowns on product page
Accordion dropdowns on product page

Set up your Accordions

  1. In your theme editor (Customize), go to the Products template you wish 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 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 accordion entirely.

  9. Remember to click Save in the top-right corner.

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.

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. In your theme editor (Customize), go to your Theme settings and select the Product section.

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

  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 to your product variants to open up a popup size guide, chart, 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 use 140 default swatch colors or upload your own custom swatch images.

Dynamic Checkout Button

The Dynamic checkout button lets customers quickly purchase your product 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.

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

Configuration Settings

Product

Use the Select product button to search and add a product to feature.

Video looping

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

Alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Below you'll find a list of all Featured product 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

This block displays any variant options for the product.

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

Buy Buttons

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

It can also show any dynamic checkout buttons.

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.

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.