The Shoppable hero section helps you highlight products through a large image with clickable product hotspots. Interacting with a hotspot displays a product preview card with important details and quick access to add the product to the cart.
Adding the shoppable hero section
- Log in to your Theme editor and navigate to the page you would like to display this section.
- You'll see a list of available sections on the left-hand side. Locate the Add section button and click on it.
- From the list of available sections, find and select Shoppable hero.
Section details
The general settings in this section are grouped under Image, Content, and Hotspots.
Image
Upload or select the image you’d like to show in this section. For best results, we recommend using a landscape image.
Use the Text protection on desktop setting to darken the image and improve text readability.
Content
These settings control the text content displayed in the section.
- Preheading: Adds text above the main heading.
- Heading: The largest text in the slide.
- Heading size: Adjusts the font size of the heading text.
- Text: Use this field to display supporting text or a brief description below the heading.
- Button label: Text used for the button.
- Button link: Adding a link here will route the customer to a particular page when the button is clicked.
- Button color: Controls the color of the button.
- Text alignment: Determines whether the text is left-aligned, centered, or right-aligned.
- Text position: Choose where the text content is positioned within the section.
Hotspots
Use these settings to customize the product hotspots in this section.
- Hotspot icon style: Select the icon used for the hotspots. Options include Dot, Plus, Tag, and Bag.
- Hotspot color: Sets the color of the hotspots.
Hotspot blocks
This section supports up to 6 hotspot blocks. Each block includes the following customization options:
- Product: Select the product you want the hotspot to link to.
- Vertical position: Adjusts the vertical position of your hotspot icon.
- Horizontal position: Adjusts the horizontal position of your hotspot icon.