Lookbook
Show all products in a curated collection logically arranged in the main image to portray your fashion line and reflect a style concept, so buyers feel complete with your visual presentation.
This section contains the "Header", "Image", and "Shoppable items" blocks.
Content
Layout The picker provides two options to change the look and feel of the section on the desktop view:
"Full width". Select the option to display the image in full-screen width. The page width depends on the settings applied in the "Page layout" global section. The corresponding products/collections are shown over the main image when the mouse hovers over the hotspots.
View the layout example on the DEMO.
"2 columns". Activate the option to display a list of suggested products/collections on the right side of the screen. When using this option, the corresponding product/collection is highlighted in the list when the desired location on the main image is hovered over. Note! For this layout, products will be added two items per row, with the following blocks carried over to the next row.
Note! The layout of the section can not be changed on mobile. The corresponding product/collection is highlighted in the list (located under the banner) when pressing the corresponding spot on the main image.
Product cards
Image ratio Choose the appropriate aspect ratio of the product/collection images. You can use one of the options that display well on all screen sizes: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios here.
Enable corner radius Rounds the corners of the card and image on desktop devices for a softer appearance.
Product corner radius Controls how rounded the corners appear:
0 px - square
20 px - more rounded corners
Image width in grid Change the product/collection image size from 20% to 60% using the scale. This setting applies to images on mobile devices and to the "2 columns" layout on desktop computers.
Show vendor Display the product vendor above the product title by simply enabling the checkbox. Note! The setting applies only to the "Product" blocks.
Collection
Show product count The enabled option shows the number of products available in each collection. Deactivate the option to hide the number.
Button
Type Use the picker to define the button behavior.
"Buy all". Leave the option to force visitors to purchase all the products posted in the Lookbook by pressing the button.
"Link button". The "Buy all" button changes to a link after the option is selected. This button type functions as a link redirecting to another page. Using this option, additional settings are available to customize the button:
Label Enter the text displayed on the button.
Link Select a page or paste a URL that opens when customers click the button.
Open in new tab Enable this option to open the linked page in a new browser tab.
Style Select the desired style in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Color Applies color settings according to the selected button style:
"Primary". Changes the button background color.
"Secondary". Colorizes the text and border.
"Link style". Changes the text color.
Layout options
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Last updated