Highlights Lookbook

To add this section, please follow below steps:

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Add section and choose "Highlights lookbook".

Section settings

General

Settings
Description

Section width

Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).

Padding for 'full width' option on desktop

Determine the left and right padding of the section when the full width layout is selected.

Background color

The background color of the section.

Background gradient

The gradient background of the section.

Section header

Title

Enter text for the section title.

Title color

Set color for the section title.

Title bottom margin

Determine the bottom spacing of the title.

Title top margin

Determine the top spacing of the title.

Title font size

Specify the font size of the section title.

Title font size on mobile

Specify the font size of the section title on Mobile device.

Description

Enter text for the section description.

Description color

Set color for the section description text.

Description bottom margin

Determine the bottom spacing of the description text.

Description font size

Determine the font size of the description text.

Description font size on mobile

Determine the font size of the description text on Mobile.

Alignment

Select the alignment of the content including title, description to be either to the Left, Right or Center.

Content width

Set the width for the section content.

View all

Enter text for the view all link.

'View all' link

Set URL for the view all link to redirect to.

'View all' link color

Apply color for the view all text.

Show 'view all' border

Toggle to show border/underline of the view link

'View all' font size

Set the font size for the view all text.

'View all' font weight

Select the font weight of the view all to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.

'View all' alignment

Select the position of the view all to be either to the Left, Right or Center.

Top margin of the view all button

Determine the top spacing of the view all link.

Lookbook image blocks

Settings
Description

Popup style

Select the style for the lookbook.

Style 1: A popup is a product card. Style 2: A popup is minimal with product title and price info only.

Enable lookbook popup maximum width

Toggle to apply the Lookbook Max Width setting on the Lookbook Popup style 2.

Lookbook popup maximum width

Set maximum width for the lookbook popup.

Pin icon width on desktop

Determine the size of the pin icon on desktop.

Pin icon width on mobile

Determine the size of the pin icon on mobile.

Pin icon shadow color

Set the pinning shadow color of the dot.

Pin icon border color

Set the pinning border color of the dot.

Show number on pin icon on desktop

The inner of lookbook dot turns into count number on Desktop.

Show number on pin icon on mobile

The inner of lookbook dot turns into count number on Mobile.

Pin icon color

Set the color for pin icon.

Number font size on pin icon on desktop

Determine the number font size on desktop.

Number font size on pin icon on mobile

Determine the number font size on mobile.

Truncate product title line to

Truncate product title line to 1 line or 2 line.

Show all button

Settings
Description

'Show product' text

Enter text for the show all lookbook products button

'Hide product' text

Enter text for the hide all lookbook products button

Background color

Set background for the show/hide all buttons.

Background gradient

Set background gradient for the show/hide all buttons.

Text color

Set color the buttons' text.

Button height - Button width

Determine the width and height of the buttons.

Section top padding

Settings
Meaning

Desktop

Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Tablet

Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Mobile

Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Section bottom padding

Settings
Meaning

Desktop

Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Tablet

Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Mobile

Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Blocks settings

[BLOCK] Lookbook image

Settings
Description

Image

Select/Upload image for the block.

Action when clicking on image

Decide the behavior of the image on clicked. The options are: Link Open fancybox

Link

Set URL for the image to redirect to if the "Redirect To URL" is selected.

Product 1 / Product 2 / Product 3 / Product 4

Product

Select a product for a lookbook dot

Pin icon horizontal position (%)

Determine the horizontal position of the dot relative to the block's left.

Pin icon vertical position (%)

Determine the horizontal position of the dot relative to the block's top.

Lookbook popup position

Choose the direction in the popup that appears when hovering the pin icon. There are 4 options: Right of the pin icon Left of the pin icon Above the pin icon Below the pin icon

Last updated