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

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.

Shoppable feature section
Shoppable feature 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.

Shoppable feature section settings
Shoppable feature section settings

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.

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

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 heading

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

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

Max width of text

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

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

Text alignment

Change the alignment of Heading, Subheading, and Button blocks to Left or Center

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.