Are you a Shopify developer, designer or agency? It pays to be a Fluorescent partner. Apply today.

Shoppable image

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.

Shoppable image
Shoppable image

Add a shoppable image section

The Shoppable image 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 image.

  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.

Shoppable image section settings
Shoppable image section settings

In the theme editor (Customize):

  1. Click on the Shoppable image 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. Select the Image aspect ratio to crop your image to Square, Landscape, or Portrait.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  4. 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.

  5. 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 image 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 text of the headings using the slider.

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

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

  6. Remember to click Save.

Shoppable image section settings

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

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

Choose to crop your image to Square, Landscape, or Portrait.

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

Add heading text.

We recommended a short title of just a few words.

Subheading

Add subheading text to describe the feature.

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

Max width of text

Use the slider to adjust the maximum width of the text.

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

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.

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.

Hotspots positioned over products in an image
Hotspots positioned over products in an image

In the theme editor (Customize):

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

    Hotspot block settings
    Hotspot block 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:

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.

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.