Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Shoppable image

The Shoppable image section promotes multiple products in a single image with Hotspot links for each product. For an alternate layout, see the Shoppable image editorial section.

Shoppable image section

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your 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 feature image

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

Steps

In your theme editor (Customize):

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

  2. Under Image, use the Select image button to add an image featuring multiple products.

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

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

    The Natural setting displays the original shape of your image.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  4. Click Save.

Add promotional text

Change the section headings to promote the products featured.

Steps

In your theme editor (Customize):

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

  2. Enter Heading text to display as a title at the top of the section.

    We recommended one to three words.

  3. Enter Subheading text to display beneath the heading.

    We recommend two to three short sentences.

  4. Click Save.

Add hotspots

Hotspots are are clickable icons that hover over the products featured in your shoppable image.

Steps

In your theme editor (Customize):

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

  2. Click on a Hotspot block to open the block settings.

    Click + Add Hotspot to add new blocks.

    Click Remove block or the eye icon to delete or hide a block.

  3. Use the Select product button to choose which product the hotspot should link to.

    The hotspot displays a popup with the product name and price. Customers can click this popup to go to the product page.

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

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

  6. Click Save.

Add buttons

Add a Button block to link to your collections or products or any other page with a custom label.

Steps

In your theme editor (Customize):

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

  2. Select or paste a URL for the Button link.

  3. Enter text for the Button label.

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

  4. Select a Button style: either Solid, Outline, or Text.

    The button uses the theme-wide button color set in the Theme settings.

  5. Click Save.

Section style

Add an optional Top divider to clearly separate sections.

Steps

  1. Click on the Shoppable image section and scroll down to the Section style settings.

  2. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the Lines and borders color selected in the Theme Settings.

  3. Click Save.

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.