Visual Lookbook
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 "Visual lookbook".
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 background gradient 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 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 color
Apply color for the View All text.
'View all' link
Set URL for the View All link to redirect to.
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.
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 lookbook dot on desktop.
Pin icon width on mobile
Determine the size of the lookbook dot 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 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 button.
Background gradient
Set background gradient for the show/hide all button.
Text color
Set color the buttons' text.
Button height
Determine the height of the button.
Button width
Determine the width of the button.
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).
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).
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
Link
Shown below the image.
Link text
Enter text for Link.
Link
Add link for Link.
Show text underline
Toggle to show the underline for link text.
Link color
Set the color for the link text.
Link hover color
Set the color for the link text when hovering.
Top margin
Determine the top spacing of the link text.
Font size
Specify the font size of the link text.
Font size on mobile
Specify the font size of the link text on the mobile.
Alignment
Select the alignment of the link text to be either to the Left, Right or Center.
Maximum width
Set maximum width for link text.
