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.
1. Section settings
Click the section name to see section settings on the right-hand sidebar.
1.1 Appearance
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.
1.2 Section header
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.
1.3 Product Card
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.
1.4 Hotspot
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.
1.5 Carousel navigation
Enable custom color: Enable this option to customize the carousel navigation color.
1.6 Section padding
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
1.7 Scrollspy navigation item
The Scrollspy navigation item setting allows you to configure the section identifier used for scroll-based navigation.
2. Container Blocks - Lookbook item
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.
2.1 Block settings
The Lookbook item block represents one complete look in the section. You can add multiple Lookbook item blocks to showcase different looks or collections.
Image
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.
Mobile image
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.
Products and hotspots
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.
2.2 Child blocks
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.
