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

Shoppable image editorial

The Shoppable image editorial section promotes multiple products in a single image with Hotspot links for each product. For an alternate layout, see the 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 editorial.

  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. Adjust the position, size, and shape of your image before adding the hotspots next.

Steps

In your theme editor (Customize):

  1. Click on the Shoppable image editorial 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.

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

  4. Use the Image size slider to make your image between 50 - 65% of the width of the section.

  5. 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
  6. Click Save.

Add promotional text

Change the section headings and change their position above the section content.

Steps

In your theme editor (Customize):

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

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

    We recommended a two to three words.

  3. Enter Subheading text to display beneath the heading.

    We recommend two to three short sentences.

  4. Under Section style, select a Content position for the headings. Either Beside Image (and above the product cards) or Above image.

    Content will appear above the image on smaller screens.

  5. 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 call-to-action 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.

  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.