Shoppable image – User Guides

Shop the look section, to assist with upselling or guiding customers to complementary products.

What is the shoppable image section?

The Shoppable image section is simple to use and quick to set up, making it a great tool for creating an interactive 'Shop the Look' section. This feature helps with upselling and directing customers to specific products. Up to ten clickable hotspots can be added, each linking directly to a product, showing key details such as the product title, image and price.

Shoppable image2.png

How to set up the shoppable image section?

Steps

Open the Theme Editor.
Click Add section and select Shoppable image.
In the Image setting, click Select to choose an image from your library, or hit Explore free images to browse the stock libraries. To show a different image on mobile, use the same method and select a Mobile image.
Use the Image styles settings to set an Image tint color and Image tint opacity. An image tint can make text easier to read, particularly if using a transparent color scheme for the text overlay.
In the Text overlay settings, add a Heading or Button to the image to help promote the offering. Also adjust the Overlay position, Text alignment and decide whether to Show text below image on mobile.
In the Layout settings, move the sliders to adjust the spacing and fade settings.
In the Style settings, select a Color scheme. This needs to be set up in Theme settings > Colors prior to being selected here.
Additional hotspot blocks can be added by hovering over the previous block, clicking the plus icon and then clicking Add hotspot (up to a maximum of ten).
In the Hotspot block, select a Product from your inventory to highlight.
Position the hotspot over the relevant part of the image using the Horizontal position and Vertical position sliders. To get a different position on mobile, adjust the Mobile positioning settings.
Once all the Hotspots are set up, click Save.

How to use the text overlay

When a heading is added to a Shoppable image, it will appear as a Text overlay. In Beautify, the text overlay can appear on a colored background or directly on the image itself. To achieve the latter, ensure that a transparent color scheme is selected.

Steps

In the main Shoppable image settings navigate to the Text overlay setting.
Choose the Overlay position. If more control of the text overlay is required set a Custom overlay width.
Set the Text alignment and select whether to Center text on mobile.
Add a Heading or Button. A Heading size can be set for desktop or mobile.
Select a Color scheme. The color scheme needs to be set up in Theme settings > Colors > Schemes prior to being selected here. Use a color scheme with a transparent background if desired.

Note

As an alternative to a text overlay, consider using the Style and Layout settings to join a shoppable image section to a rich text section and show text under the image.

An example of a shoppable image section joined to a rich text section

How to use the style and layout settings

The Style and Layout settings provide control over how sections appear and transition on the page. These settings determine whether the Shoppable image spans the full width available, how backgrounds are displayed, how sections fade into one another and the space above the section. Create a smooth flow from one section to the next using the fade settings or by adjusting the Boundary above section setting.

Full width setting enabled

If the Full width setting is enabled, the main image expands to cover the entire screen width. This also makes the fade settings available, allowing the Shoppable image section to blend smoothly into the sections above and below it.

Steps

In the main Shoppable Image settings, navigate to the Style settings and turn the Full width setting on.
Set the Hotspot color and choose whether to enable the pulse Hotspot animation.
To achieve a smooth transition between sections, select Enable top fade and/or Enable bottom fade. Adjust the fade depth and fade color settings to refine the effect.

Full width setting disabled

If the Full width setting is disabled, space appears around the image, making the Section background visible. The section background can be the page background or another color, image or gradient. The distance between the Image banner and the section above it can be adjusted to create a smooth flow from one section to the next.

Steps

In the main Shoppable Image settings, navigate to the Style settings and turn the Full width setting off.
Set the Hotspot color and choose whether to enable the pulse Hotspot animation.
Choose one of the five Section background options to show around the Shoppable Image:
Default: Uses Beautify's default color scheme selected in Theme settings > Colors > Schemes.
Color: Select a custom Background color
Image: Upload a Background image
Simple gradient: Set the gradient start and end colors, plus the gradient style
Advanced gradient: Customize the gradient further using the COLOR STOP settings
In the Layout settings, there are three Boundary above section options that control the spacing above the image. This can help to create smoother transitions between sections.
Default - Will leave the standard spacing at the top of the section
Tight - Will leave a smaller space between sections
Join - Adjacent sections will touch each other

How to use the scroll animation settings

Both the image and text content of the Image banner section can animate as the customer scrolls down the page.

Steps

In the main Shoppable image settings, navigate to the Scroll animation settings.
Choose whether to animate the image on scroll with a Zoom out animation.
Choose a text animation effect - Fade in, Slide up, Slide down or None.

Note

When using a zoom out animation hotspots will appear fully once the image zoom is completed.

How to add hotspots

The image can contain up to ten hotspots. Use the vertical and horizontal positioning scales to put your hotspots in the perfect position.

Steps

Click on one of the three hotspots blocks available on install. Additional hotspot blocks can be added by hovering over the previous block, clicking the plus icon and then clicking Add hotspot (up to a maximum of ten).
In the Hotspot block, select a Product from your inventory to highlight.
Position the hotspot over the relevant part of the image using the Horizontal position and Vertical position sliders. To get a different position on mobile, adjust the Mobile positioning settings.
Once all the Hotspots are set up, click Save.

Tip

Be sure to check the results on different screen sizes to ensure that the hotspots are positioned correctly. When using an image fade or Scroll animation check that the hotspot is visible and the customer can click on it.

FAQs

I want to fade sections into each other. How do I do this?

A gradient background can be used to blend sections together in the Beautify theme and create a seamless flow. In addition, the Shoppable image section has special top and bottom fade settings which can be used when the section is Full width.

Alternatively, a Collage hero section can show an image behind up to 5 sections that are above or below it.

Why are my hotspots hard to see over my image?

The default hotspot color may not have sufficient contrast to stand out from the background image. In the Style settings, use the Hotpots color picker to select a color with greater contrast. Alternatively, under the Image styles setting, add an image tint.

Why does my image appear low quality?

If the image you have selected is smaller than the recommended 1920px wide, it will be scaled up and subsequently may lose some quality. To avoid this, consider uploading a larger image.

Image quality can also be controlled globally in Theme settings > Advanced > Image quality. Check this setting to ensure it is not set to Lower (fastest page loading).

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!