Lookbook With Collection
Last updated
Last updated
To add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Lookbook With Collection".
| Settings | Description |
|---|---|
Layout | Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width). |
Padding Container Full Width | Determine the left and right padding of the section when the Full Width layout is selected. |
Background Color - Background Gradient | Set color (or gradient) for the section background. |
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately. |
Title | Enter text for the section title. |
Title Color | Set color for the section title. |
Set color for the section title. | Determine the bottom spacing of the title. |
Title Font Size | Specify the font size of the section title. |
Title Font Size 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 Spacing Bottom | Determine the bottom spacing of the description text. |
Description Font Size | Determine the font size of the description text. |
Description Font Size 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 Color | Apply color for the View All text. |
View All Link | Set URL for the View All link to redirect to. |
Enable 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, Bolder or Black. |
View All Position | Select the position of the View All to be either to the Left, Right or Center. |
View More Spacing Top | Determine the top spacing of the View all link. |
| Settings | Description |
|---|---|
Lookbook Style | Select the style for lookbook. - Style 1: A popup is a product card. - Style 2: A popup is minimal with product title and price info only. |
Enable Lookbook Max Width | Toggle to apply the Lookbook Max Width setting on the Lookbook Popup style 2. |
Dot Size On Desktop | Determine the size of the lookbook dot on desktop. |
Dot Size On Mobile | Determine the size of the lookbook dot on mobile. |
Dot Pinning Shadow Color | Set the pinning shadow color of the dot. |
Dot Outer Color | Set the outer ring of the lookbook dot. |
Dot Inner Color | Set the inner background of the lookbook dot. |
Show Number On Dot On Desktop | The inner of lookbook dot turns into count number on Desktop. |
Show Number On Dot On Mobile | The inner of lookbook dot turns into count number on Mobile. |
Dot Number Desktop Font Size | Determine the number font size on desktop. |
Dot Number Mobile Font Size | Determine the number font size on mobile. |
Product Title Truncate Line | Decide the number of line to truncate product title if the title length exceeds the line. |
| 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. |
Color | Set color the buttons' text. |
Button Height - Button Width | Determine the width and height of the buttons. |
| Settings | Description |
|---|---|
Lookbook Image | Select/Upload image for the block. |
When Click On Image | Decide the behavior of the image on clicked. The options are: Open Fancybox for a clearer image view, Redirect To URL.
|
Link | Set URL for the image to redirect to if the "Redirect To URL" is selected. |
Choose a product | Select a product for a lookbook dot |
Dot Horizontal Position (%) | Determine the horizontal position of the dot relative to the block's left. |
Dot Vertical Position (%) | Determine the horizontal position of the dot relative to the block's top.
|
Lookbook Position From Dot | Select the direction of the Loobook Style 2 to appear relative to the dot on hovered on Desktop. |
