Shoppable feature

The Shoppable feature section lets customers discover multiple products in a single image with Hotspot links. For an alternate layout, see the Shoppable image section.

Add a shoppable feature section

The Shoppable feature section can be added to any template (except the Checkout). To learn more about sections and templates, see our article about how to use the theme editor.

In the theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   

2. In the side panel, click +Add section and select Shoppable feature.

   

3. Change the order of your sections by using the drag and drop handles ⋮⋮

   

Add an image

Upload a single image of two or more of your products together.

In the theme editor (Customize):

1. Click on the Shoppable feature section to open the section settings.

2. Under Image, use the Select image button to add a section image.

   There are no required image dimensions but we recommend uploading an image with a minimum width of 2048px for optimal quality.

   Read our article about Image size recommendations for Spark to learn more.

3. Change the Image position to display the image(s) on the Left or Right side of the section.

4. Choose to set the Image width to either 1/2 or 2/3 of the section.

5. Select the Image aspect ratio to crop your image to Square, Landscape, or Portrait.

   

6. Change the Overlay color and Overlay opacity using the slider to increase the contrast between the slide text and image.

   These settings help make your text clear and readable.

   Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color slide with no image.

7. Remember to click Save.

Change section headings and style

Change the section headings and the style of the section.

In the theme editor (Customize):

1. Click on the Shoppable feature section to open the section settings.

2. Change the Heading text.

   We recommended a short title of just a few words.

3. Change the Subheading text.

   We recommend two to three short sentences.

4. Adjust the Max width of heading using the slider.

   Experiment with this setting to find a clean visual shape for your text.

5. Adjust the Max width of text of the subheading using the slider.

   Experiment with this setting to find a clean visual shape for your text.

6. Change the Text alignment to make the heading and subheading text Left or Center aligned.

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

8. Remember to click Save.

Add a call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

In the theme editor (Customize):

1. Click on the Shoppable feature section to open the section sections.

2. Add a Button label and Button link to display a button underneath the headings.

   The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

   To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

3. Remember to click Save.

Shoppable feature section settings

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

Add hotspots

Hotspots are are clickable icons that mark the different products in your shoppable image. Select what products to link to and position them over the products in your image.

In the theme editor (Customize):

1. Click +Add Hostpot and/or click on the Hotspot block to open its settings.

   

2. Use the Horizontal position slider to move the Hotspot from left to right until it is aligned with the product in the image.

3. Use the Vertical position slide to move the Hotspot from bottom to top until it is aligned with the product in the image.

4. Remember to click Save.

Hotspot block settings

The following settings are found by clicking directly on a Hotspot block: