Lookbook image

Section settings

General and Section header

Section width: Can choose among Default, Fluid Container, Stretch width, Full width for the section layout.

Color scheme: Set text color and background color with preset scheme

Use the provided text fields to add a suitable heading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the font size.

Lookbook image

Image ratio: Select a preset ratio for the images.

Custom ratio: Define a custom ratio instead.

Hotspot style: Select either a plus sign or a dot sign for the hotspot indicator.

Action when clicked on hotspot: Choose to open a popup or redirect to a product page.

Items per row: This option lets you specify the number of products featured in each row, allowing for a customized layout.

Column gap: Adjust the spacing between two Instagram items to ensure a visually pleasing and well-organized layout within the Instagram block.

Banner settings

Show banner: Display the banner on the left of the lookbook image.

Vertical alignment: Align banner content vertically.

Use the provided text fields to add a suitable subheading/heading/description/first button label/second button label. Leave any of them blank if you do not want to display them.

Width: Adjust the width of the content.

Position: option to align content left or right relative to the lookbook.

Button link: Paste the link (URL) that will be redirected when clicked. You can paste the link directly or find the link in the list (product, collection, page, blog…).

Type: Choose a display style for the button: - Primary – The button stands out, the main color of the brand. - Outline – The border, softer. - Link – Display as a link, no background, no frame.

Vertical alignment: Adjust the vertical alignment of content to position it at the top, center, or bottom within its container.

Font-size: Adjust text size.

Font-weight: Choose the appropriate boldness for each type of content.

Uppercase: Convert all letters to uppercase.

Spacing bottom: Create space under each block.

Carousel settings

Show Next/Back: Display arrows to navigate to the next or previous item.

Dot: Choose from different types of pagination options.

Style Dot: Choose the design style for the carousel navigation dots.

Infinite slide: scrolling to the end will display the first slide.

Auto change slides: After a certain time, the slide will automatically change.

Setup period time: Configure the time interval for changing slides.

Reveal next slide: Allow a part of the next slide to be visible while the previous one is still displayed.

Mobile options

Items per row: In mobile view, the number of items displayed on each row in the carousel layout can be customized to suit your preferences and the overall design of your site.

Section padding

Section padding: allows you to specify the space between this section and the preceding or following sections, or both.

Block settings

Can configure each lookbook to display an image and include up to 5 products within each lookbook. The position of these signs can be adjusted to precisely indicate where each product is featured within the lookbook image.

Lookbook image: Select or upload an image for the banner.

Product: Select products to display when clicking on hotspot.

Offset top: Adjust the top position of the hotspot.

Offset left: Adjust the left position of the hotspot.

Content settings

Spacing top: Adjust the distance between image and content

Content alignment: Adjust the horizontal alignment of content to position it at the left, center, or right within its container.

Use the provided text fields to add a suitable subheading/heading/description/first button label/second button label. Leave any of them blank if you do not want to display them.

Button link: Paste the link (URL) that will be redirected when clicked. You can paste the link directly or find the link in the list (product, collection, page, blog…).

Type: Choose a display style for the button: - Primary – The button stands out, the main color of the brand. - Outline – The border, softer. - Link – Display as a link, no background, no frame.

Typography

Font-size: Adjust text size.

Font-weight: Choose the appropriate boldness for each type of content.

Uppercase: Convert all letters to uppercase.

Spacing bottom: Create space under each block.