Customers can click a hotspot on the main image to view the associated product in the Product Card. They can also switch between different look images using the thumbnails and browse the products included in each look.
This section is especially useful for fashion, beauty, furniture, and lifestyle stores, where merchants want to showcase products together in a real-life context.
Click the section name to see section settings on the right-hand sidebar.
Reveal on scroll: Enable animation when the section becomes visible while scrolling.
Color scheme: Select the color style applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Auto-rotate tabs: Automatically switch between Lookbook items.
Change tabs every: Set the time interval between each Lookbook item when Auto-rotate tabs is enabled.
Show separator line: Enable or disable the separator line in the section.
Use the Section header settings to customize the introductory content displayed above the lookbook.
Text: Add a short label or introductory text, such as Shop the look.
Text size: Adjust the size of the introductory text.
Heading: Add the main heading for the section.
Heading size: Adjust the heading size.
Heading tag: Select the HTML heading tag, such as h2. The selected heading tag can affect the page's SEO structure.
The Product Card settings control how the products associated with each lookbook item are displayed.
Use these settings to customize the appearance of product information shown next to the lookbook image.
The Hotspot settings allow you to customize the appearance of product hotspots displayed on the lookbook image.
Hotspots indicate the position of featured products on the image. Here you can set the main color of the hotspot.
Enable custom color: Enable this option to customize the carousel navigation color.
Use these settings to adjust the spacing around the section and maintain a balanced layout across different screen sizes.
Available options include:
Top padding
Bottom padding
Mobile top padding
Mobile bottom padding
The Scrollspy navigation item setting allows you to configure the section identifier used for scroll-based navigation.
Click the Add block button right below the section name to add a container block.
The Image lookbook section uses the Lookbook item container to create each individual look. You can add multiple Lookbook items to showcase different images and their associated products.
Each Lookbook item can contain a Product card child block.
The Lookbook item block represents one complete look in the section. You can add multiple Lookbook item blocks to showcase different looks or collections.
Upload the main image for the Lookbook item.
For a consistent layout when using multiple Lookbook items, it is recommended to use portrait images with the same aspect ratio.
Upload a separate image optimized for mobile devices.
This allows you to use a different crop or composition to provide a better experience on smaller screens.
Each Lookbook item allows you to select products and position their hotspots on the image.
For each product, you can configure:
Product: Select the product associated with the hotspot.
Horizontal position: Adjust the hotspot position horizontally on desktop.
Vertical position: Adjust the hotspot position vertically on desktop.
Mobile horizontal position: Adjust the hotspot position horizontally on mobile.
Mobile vertical position: Adjust the hotspot position vertically on mobile.
This lets you place each hotspot directly over the corresponding item shown in the image.
When customers interact with a hotspot, the related product information is displayed in the product area.
The Product Card is a child block inside each Lookbook item container.
It displays the additional information of the product card.
Note: The Product Card child block must be added under the corresponding Lookbook item container.