Lookbook: Banner/Cards

Configure the section

Select the customize theme option. Click the dropdown menu at the top of the page to select the Home page template.

From the left side menu, select Lookbook banner.

Customize the section by utilizing the setting on the right side of the theme editor, as described below:

General

Allow transparent header Select this checkbox to show transparent header in case this section is placed as the first section on page. Section visibility Select from the options to select the visibility of this section: -Always -Small (On selecting this, the section will be visible on mobile devices only.) -Large (On selecting this, the section will be visible on large devices only.) Color scheme Select any color scheme defined in the theme settings>Colors>Schemes. Background Choose the section background from below options: - Solid - Gradient Container width Choose the container width from below options: - Small - Standard - Wide - Edge - Fullwidth

Section spacing

Choose from Choose spacing for: - Desktop - Mobile Desktop: Top spacing Adjust the range bar to add spacing at the top of the section for desktop view.

Desktop: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for desktop view.

Mobile: Top spacing Adjust the range bar to add spacing at the top of the section for mobile view.

Mobile: Bottom spacing Adjust the range bar to add spacing at the bottom of the section for mobile view.

Desktop layout

Media height Adjust the range bar to choose the height for desktop. Card radius Adjust the range bar to determine the radius of image card. (Note: Radius is automatically optimized for mobile.) Column gap Adjust the range bar to determine the gap between columns, on the desktop view.

Mobile layout

Media height Adjust the range bar to choose the height for mobile. Number of columns in a row Adjust the range bar to determine the number of columns in a row, on the mobile view. Column gap Adjust the range bar to determine the gap between columns, on the mobile view. Enable swipe Select this checkbox to enable the swipe of cards on mobile.

Block settings: Lookbook slide

Image

Desktop image Choose any image from the store library for desktop. Mobile image Choose any image from the store library for mobile.

Overlay

Enable overlay Select this checkbox to show overlay on slide media. Style Choose from solid or gradient to determine the overlay style. Solid color Choose any color for the solid overlay. Gradient color Choose any color for the gradient overlay.

Spotlight

Hotspot color Choose from light or dark to determine the hotspot color. Make the first spotlight active by default Select this checkbox to make the first hotspot active by default.

Content

Heading

Add heading text. (Note: Enter ++ for a line break and wrap text in [ ] to apply the highlight settings.) Heading tag Specify heading code types from H1-H6, div, span or p tag for SEO and search engines for crawling purposes. Heading size Select the font size from the following options: - Heading XL - Heading L - Heading M - Heading S - Heading XS - Heading XXS Description

Add description text. Description font size Choose the font size from following options: - Extra Large - Large - Medium - Regular - Small - Extra small Text alignment Choose the alignment from below options: - Left - Center - Right Vertical alignment Choose the vertical alignment from the below options: - Top - Middle - Bottom Mobile text alignment Choose the alignment from below options: - Left - Center - Right Content background Choose any color for the content background. Heading color Choose any color for the heading text. Description color Choose any color for the description text. Highlight text Highlight style Choose the style from following options: - None - Underline - Text color - Gradient Font Choose the text font family from the following options:

- Heading - Body - Accent (Note: These fonts can be changed in theme settings>typography.) Highlight color Choose any solid or gradient color for the heading's highlight text. Color Mobile content background Choose any color for the content background. Heading and description color Choose any color for the heading and description text.

Spotlight

Product Choose any product from the store library.

Position

Choose for Set the position for desktop and mobile. Horizontal position Adjust the range bar to determine the horizontal position. Vertical position Adjust the range bar to determine the vertical position.

Last updated