> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/lookbook.md).

# Lookbook

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Header</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header.md)", "[<mark style="color:blue;">Image</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook/image.md)", and "[<mark style="color:blue;">Shoppable items</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook/shoppable-items.md)" blocks.
{% endhint %}

### Content

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

* **"Full width"**. Select the option to display the image in full-screen width. The page width depends on the settings applied in the "[<mark style="color:blue;">Page layout</mark>](/unicorn-shopify-theme/theme-settings/page-layout.md)" global section. The corresponding products/collections are shown over the main image when the mouse hovers over the hotspots.

{% hint style="success" %}
View the layout example on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-valuable.mpthemes.net/).
{% endhint %}

<figure><img src="/files/vS7oXzLuYUx7sf0thXku" alt=""><figcaption></figcaption></figure>

* **"2 columns"**. Activate the option to display a list of suggested products/collections on the right side of the screen. When using this option, the corresponding product/collection is highlighted in the list when the desired location on the main image is hovered over.\ <mark style="color:orange;">**Note!**</mark> For this layout, products will be added two items per row, with the following blocks carried over to the next row.

<figure><img src="/files/RA87F8bqdGNxcn9zYmPc" alt=""><figcaption></figcaption></figure>

<mark style="color:orange;">**Note!**</mark> The layout of the section can not be changed on mobile. The corresponding product/collection is highlighted in the list (located under the banner) when pressing the corresponding spot on the main image.

<figure><img src="/files/CG93UWcksqYjp0Bw7BwR" alt=""><figcaption></figcaption></figure>

### Product cards

{% hint style="info" %}
The settings apply to all "[<mark style="color:blue;">Product</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook/shoppable-items.md#product)" and "[<mark style="color:blue;">Collection</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook/shoppable-items.md#collection)" blocks used in the section.
{% endhint %}

**Image ratio**\
Choose the appropriate aspect ratio of the product/collection images. You can use one of the options that display well on all screen sizes: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).

**Enable corner radius**\
Rounds the corners of the card and image on desktop devices for a softer appearance.

**Product corner radius**\
Controls how rounded the corners appear:

* **0 px** - square
* **20 px** - more rounded corners

**Image width in grid**\
Change the product/collection image size from 20% to 60% using the scale. This setting applies to images on mobile devices and to the "2 columns" layout on desktop computers.

**Show vendor**\
Display the product vendor above the product title by simply enabling the checkbox.\ <mark style="color:orange;">**Note!**</mark> The setting applies only to the "[<mark style="color:blue;">Product</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook/shoppable-items.md#product)" blocks.

### Collection

{% hint style="info" %}
The setting applies to all "[<mark style="color:blue;">Collection</mark>](/unicorn-shopify-theme/dynamic-theme-sections/lookbook/shoppable-items.md#collection)" blocks used in the section.
{% endhint %}

**Show product count**\
The enabled option shows the number of products available in each collection. Deactivate the option to hide the number.

### Button

**Type**\
Use the picker to define the button behavior.

* **"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 changes to a link after the option is selected. This button type functions as a link redirecting to another page. Using this option, additional settings are available to customize the button:

**Label**\
Enter the text displayed on the button.

**Link**\
Select a page or paste a URL that opens when customers click the button.

**Open in new tab**\
Enable this option to open the linked page in a new browser tab.

**Style**\
Select the desired style in the drop-down: "Primary", "Secondary", or "Link style".\
Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections/blocks/header/button.md).

**Color**\
Applies color settings according to the selected button style:

* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.

### Layout options <a href="#layout-options" id="layout-options"></a>

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.