Lookbook

Show all products in a curated collection that are logically arranged in the main image, to portray your fashion line and reflect a style concept, so buyers feel complete with your visual presentation

Lookbook

Heading

Use the "Heading" placeholder to add a section title. It will be placed at the top of the section by default. Start typing text in the field to view the additional settings:

The font size of the title can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.

If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.

Description

Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.

Note! By default, the button appearance on the desktop depends on the "Layout" of content and underneath products on mobile.

The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.

Media

In the "Image" selector, press "Select" to upload the background animation for both desktop and mobile.

Content

The "Layout" picker provides two options to change the look and feel of the section on the desktop view:

• "Fullwidth". Select the option to display the Lookbook in full-screen width. The page width depends on the settings applied in the "Page layout" global section. The corresponding product will be shown over the main image when the mouse hovers over the dots.

View the example of the layout on the DEMO.

• "2 columns". Activate the option to display a list of suggested products on the right side of the screen. Using this option, the corresponding product will be highlighted in the list when hovering over the spot on the main image.

The "2 columns" option can be viewed on the DEMO.

Note! The layout of the section can not be changed on mobile. The corresponding product will be highlighted in the list located under the banner when pressing the corresponding spot on the main image.

Here is an example view of the section on mobile:

Product card

Choose the appropriate aspect ratio of the product images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.

Adjust the product card's corner rounding using the "Product corner radius" scale, which ranges from 0 to 20 pixels.

Additionally, one can change the product image size from 20% to 60% using the "Image width in grid" scale. This setting will be applied to images on mobile and the "2 columns" layout on the desktop.

Show vendor

Display the product vendor above the product title by simply enabling the checkbox.

Button

Set the desired option using the "Type" picker to define the button behavior. The section includes two types:

• "Buy all". Leave the option to force visitors to purchase all the products posted in the Lookbook by pressing the button.

• "Link button". The "Buy all" button will be changed to a link after the option is selected. This type of button works as a redirect to another page. Using this option provides additional settings to customize the button:

Change the internal button text in the "Label" field.

To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.

The color and style settings can be applied to any button type:

Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three available styles that can be applied in the section: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.

Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.

Section layout

Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use the "None" option.

On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

Animations

To add a dynamic image motion to a static image, select the option under the "Image behavior" drop-down:

• "None". Disables smooth image motion.

• "Ambient movement". The option adds a slight circular movement of an image.

• "Zoom in out". Creates a smooth zoom-in and then, zoom-out effect on the image.

• "Zoom out in". Applies a zoom-out effect followed by image enlargement.

Tip: To add a new dot over the image, use the "Product" block. The given block can be added up to six times by pressing the "Add Product" button.

Note! For the "2 columns" layout, products will be added two items per row, with the added blocks then carried over to the next row.

---

Product

Connect a desired product with the block using the "Product" selector. If you need to create a new product, press the "Create product" button to navigate to your Shopify admin -> Products.

To replace a product image with the desired one, press "Select" in the "Image" source selector to set one from the Store library or upload from a device.

Use the "Horizontal position" scale from 0% to 100% to specify the dot's position on the main image inline.

Change the "Vertical position" of a spot from 0% to 100%.

Determine how a product will pop up when hovering over the dot on the main image by selecting one of the options in the "Alignment" picker. The product image with specifications can be displayed on the "Top", "Bottom", "Left", or "Right" from the spot. These settings can be applied to the desktop and only for the "Fullwidth" layout.

Here is how the block might be displayed in a store: