Shoppable image

What is the Shoppable image section?

The "Shoppable Image" section is designed to create an interactive shopping experience directly from a single image. This feature allows you to highlight products within an image, making them clickable and leading customers straight to the product page.

Main settings

Heading

• Heading: Set the title for the shoppable image section, such as "Shop the Room."

Image

• Image: Select an image for the main section.
• Make section full width: Enable this setting to make the shoppable image section span the entire width of the container.

Mobile Version

• Image: Select an image specifically for the mobile version of the section.

Colors

• Text color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background color: The 'Transparent' value is the default and subsequently inherits the value from the global settings.
• Background opacity: Adjust the opacity of the background color.

Section Spacing

• Distance from the top: Adjust the spacing from the top of the section.
• Distance from the bottom: Adjust the spacing from the bottom of the section.

‍

Customize dot blocks

• Width: Adjust the width of the dot as a percentage of the image size.
• Height: Adjust the height of the dot as a percentage, independent of the width setting.
• Product: Assign a product to each dot, creating a direct path for customers to find and purchase your items.

Specify the width and height of the dots on mobile devices, ensuring that they are still easily clickable on smaller screens.‍

Mobile view example

‍