The Shoppable image section lets customers discover multiple products in a single image with Hotspot links. For an alternate layout, see the Shoppable feature section.
Set up section
Add this section to your template and re-order its position. You can add this section multiple times with different content and settings.
When you add a section to a template, it will appear on all pages that use that same template. To add sections to specific pages, you can create and assign new templates.
Steps
In your theme editor (Customize):
Select a Template to edit from the dropdown menu in the top bar.
Learn how to use Spark's available templates in our Templates help guide.
In the side panel, click (+) Add section and select Shoppable image.
Change the order of your sections by using the drag and drop handles
⋮⋮
Add image
Upload a single image of two or more of your products together.
Steps
In the theme editor (Customize):
Click on the Shoppable image section to open the section settings.
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 guide for Spark to learn more.
Select the Image aspect ratio to crop your image to Square, Landscape, or Portrait.
Example of aspect ratio shapes: Square, Landscape, and Portrait The default Natural setting will display the original shape of your image.
(Optional.) Select an Overlay color to display overtop of the image and adjust the Overlay opacity using the slider.
The Overlay lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.
Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.
(Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.
You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.
Click Save.
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.
Steps
In the theme editor (Customize):
Click +Add Hostpot and/or click on the Hotspot block to open its settings.
Hotspot block settings Use the Horizontal position slider to move the Hotspot from left to right until it is aligned with the product in the image.
Use the Vertical position slide to move the Hotspot from bottom to top until it is aligned with the product in the image.
Click Save.
Section headings
Change the section headings and the style of the section.
Steps
In the theme editor (Customize):
Click on the Shoppable image section to open the section settings.
Change the Heading text.
We recommended a short title of just a few words.
Change the Subheading text.
We recommend two to three short sentences.
Use the Max width of text slider to control the maximum width of the headings.
Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
Click Save.
Section style
Customize the section Style with options for section Spacing, Animation, and Alternate section color.
Steps
In your theme editor (Customize):
Click on the section to find the Section style settings.
Section style settings Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.
Learn more about Section animations in Spark.
Choose to enable the Alternate section color to apply the secondary section colors selected in your theme color settings.
Select a Spacing option to add padding around the section content.
Add padding to either the Top and bottom, Top only, Bottom only, or set it to None.
Default top and bottom padding for sections Select the Spacing amount for the padded sides of the section: Full, Half, or Minimum.
Click Save.
Shoppable image section settings
Click on the Shoppable image section to find the following settings:
Configuration Settings
Image
Select or upload one image that will have hotspot links overlayed on top.
We recommend uploading an image with a minimum width of 2048px for optimal quality.
Image aspect ratio
Crop the shape of your image to Square, Landscape, or Portrait. Choose Natural to display your image's original shape.
Overlay color
Choose the color that overlays the entire image.
Overlay opacity
Use the slider to adjust the transparency of the overlay color.
Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color slide with no image.
Heading
Enter heading text to display as a section title.
Subheading
Enter subheading text to display below the heading.
Use the formatting buttons to add bold, italic, or linked text.
Max width of text
Use the slider to control the maximum width and line breaks of the headings.
Use 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.
Hotspot block settings
Click on the Hotspot blocks to find the following hotspot setting:
Configuration Settings
Product
Select the product that the hotspot links to.
Horizontal position
Use the slider to move the hot spot from left to right to align the hot spot with the product's horizontal position.
Vertical position
Use the slider to move the hot spot from bottom to top to align the hot spot with the product's vertical position.