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

# Lookbook

A guide to set up a collection list

{% embed url="<https://youtu.be/cBVc6BSy0bY>" %}

This section allows you to create images packery called Lookbook, you can freely design your lookbook in many ways you like. Its very flexible.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/TNJi4SiLXoOH5ric5LrU/Lookbook-home.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Lookbook**
3. **Save**
   {% endhint %}

## Gallery settings

#### 1. Section header and general

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/mT2YyErGywqSnlWDHScI/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose between Container, Wrapped container, Full width for the banner layout.

**Color schema:** You are allowed to change text color, background color with preset color.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/rz4vnKj1bsKeY3hgSuzJ/image.png" alt=""><figcaption></figcaption></figure>

#### 2. Lookbook settings

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/8TeErI7jLrYIoJ4KzgrA/image.png" alt=""><figcaption></figcaption></figure>

#### 3. Lookbook action

**Click on dots**: Open popup, Redirect to url

**Open as**: Simple product popup, Quickview

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/M7OBanbg9ripWznpvKm8/image.png" alt=""><figcaption></figcaption></figure>

#### 4. Carousel settings

Select **Enable slider** and **Auto slide** options to run the list automatically.

You can also use pagination or navigation

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/y8IHYLKIqwOZufK9APUB/image.png" alt=""><figcaption></figcaption></figure>

#### 5. Section padding

Section padding allows you to specify the space between the slideshow and the preceding or following sections, or both.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/CriAM8cLZtR3KiHTIdYs/image.png" alt=""><figcaption></figcaption></figure>

#### 6. Lookbook item

To tag products on the item image, you must add the chosen products. Then, use the offset top and left to adjust the annotation icon. You can add up to 5 products/annotation icons for one lookbook item (image).

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/0G9ABCX1OMqNQTXix5jK/image.png" alt=""><figcaption></figcaption></figure>

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<div><figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FjYcM20dceNDbVusyWVpo%2FScreenshot%202023-12-19%20120220.png?alt=media&amp;token=471137ca-13eb-468e-b20a-8563a3699223" alt=""><figcaption></figcaption></figure> <figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F72U7oFwfcp8dT2NaJxcs%2FScreenshot%202023-12-19%20140615.png?alt=media&amp;token=656cbb71-4fe3-4838-9160-6e24be350e41" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}