Add a Shoppable image section for an interactive image that enables customers to click on specific areas of an image to view and purchase featured products.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Shoppable image.
Customize section settings
Click the Shoppable image section to open its settings.
Section heading
Add a heading to introduce the section with the Section heading field.
Image
Click Select image to choose an image for the section. This image should be landscape-oriented and include products from your store.
Image width and placement
Select Half, Two thirds, or Full width from the Desktop image width setting to control how much of the section is occupied by the image.
Select Image first or Image second to position the Image in relation to the Content.
To select separate settings for mobile devices, scroll down to Mobile layout.
Add content
Include a Heading and Text using the provided fields. Customize the font sizes for these text components with Heading size, Mobile heading size, Text size, and Mobile text size settings.
Control the alignment for the content by selecting Left, Center, or Right for the Desktop content alignment and Mobile content alignment settings.
Connect a button
Add a button by adding text to the Button label field and connecting a Button link. This is separate feature from the product hotspot buttons. Use this button to connect a collection, page, or other URL.
Select Fill or Outline for the Button style, then select contrasting colors for the Background color and Text color.
Select colors
Choose colors for the section's Text color and Background color. Then customize the text, background, and link colors for the product tooltips.
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Identify products in the image
Click a Product block to open its settings.
Select product
Assign a product by clicking Select product.
Adjust coordinates
Identify the product position in the image using the axis sliders.
Use the Horizontal axis slider to shift the position to the left or right (x-axis).
Use the Vertical axis slider to shift the position up or down (y-axis).
When a customer selects View product, the section opens the product page.
Changelog
December 3rd, 2024
- Updates to link hover states and animations
November 6th, 2024
- Minor bug fixes.
September 25th, 2024
- Shoppable image added to Theme Sections.