Skip to main content
Section: Lookbook
Nick Paul avatar
Written by Nick Paul
Updated over a year ago

The Lookbook section showcases five banners that can display images or videos. You have the option to enable "Shop the Look" for every banner. This enhances your store's visual appeal and allows customers to explore and purchase items that go well together in a more interactive way.

To add the section, click on add section and then search for LookBook:
โ€‹

Section Settings:

To view general section setting for this section click on Lookbook section:

Columns per Row: Choose upto to display 8 columns in per row of the Lookbook section. If there are more columns than can fit, the section will automatically become a slider. Mobile users can swipe to view additional collections.

Space between Banners: Set a gap between each collection banner in the Lookbook section, creating a visual separation between them for a tidy appearance.

Heading Position: Position the heading text on the left/center side of the Lookbook section, determining where the title or heading of the Lookbook appears for better layout and readability.

Heading font: Select the fonts for your primary and secondary heading.

Heading size: Control the font size of your headings (primary and secondary).

Heading: Add primary and secondary heading text.

Add a description in your Lookbook section:

Position: You can change the description from left or center.

Heading for lookbook: Control the heading font of image banners.

Heading size: Control the heading size for image banners inside lookbook.

Enable this option to override default typography settings.

Layout: Select between row or slider layout.

Banner height: Control the height for mobile.

Bottom spacing desktop/mobile: That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

Configure Image Banners in Lookbook:

By default when you add Lookbook section it adds 5 image banners. You can add up to 50 image banners and delete the banners if you need.

Click the image banner to open settings, every image banner has the same settings:
โ€‹

First Image: Upload an image for the main display of the image banner. Choose an image that represents the collection or content you want to showcase.

Second Image (Optional): Optionally, you can upload a second image, which will be revealed when hovering over the first image.

First Video: Upload a video that will play as the main content of the image banner. This video will show instead of the first image.

Second Video (Optional): Optionally, you can upload a second video, which will play when hovering over the first video.

Heading: Add a heading or title for the image banner, providing a brief description or name for the displayed content.

Description: Add description text for the image banner, write what you want to say in details.

Button Label: You can add text for the button on the image banner. Leave it blank to hide the button. This option is only applicable when the 'clickable images' setting is enabled in the theme settings for accessibility.

Link: Insert a URL link or search for the desired destination to which the button will redirect users when clicked.

Show Link Instead of Button: Enable this option if you want to display a link instead of a button on the image banner. When activated, the button will be hidden, and the link will be visible and clickable to direct users to the specified URL.

Enable this option to display selected products with a click to your customers.

Upload a different image for mobile view i.e. use this when the desktop image is not responsive for mobile.

Did this answer your question?