# Lookbook

{% hint style="info" %}
**Pages -> lookbook-> Lookbook**
{% endhint %}

{% hint style="warning" %}
**IMPORTANT!** In order to make your Lookbook page more attractive to buyers, add various sections by pressing **“Add section”**. The theme includes different content sections for a Product page, such as [<mark style="color:blue;">**Builder**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/builder), [<mark style="color:blue;">**Article carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/article-carousel), [<mark style="color:blue;">**Brand Carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/brand-carousel),[ <mark style="color:blue;">**Product Carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/product-carousel), [<mark style="color:blue;">**Review Carousel**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/review-carousel), [<mark style="color:blue;">**Contact Form**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/contact-form), [<mark style="color:blue;">**FAQs**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/faqs), [<mark style="color:blue;">**Gallery**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/gallery), [<mark style="color:blue;">**Information line**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/information-line), [<mark style="color:blue;">**Search Form**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/search-form), [<mark style="color:blue;">**Subscription form**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/subscription-form), [<mark style="color:blue;">**Collections**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/collections), [<mark style="color:blue;">**Lookbook**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/lookbook), [<mark style="color:blue;">**One product**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/one-product), [<mark style="color:blue;">**Slider Revolution**</mark>](https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/), [<mark style="color:blue;">**Spacer**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/spacer). How to configure each of them you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections).
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=9owCyCDdIbk&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df&index=34>" %}

## Lookbook

&#x20;Here you can change the main settings for the lookbook.  If you want the title displayed for the section, enable the option **“Show title”**. In the **“Layout”,** you can choose one of the two possible layouts for the lookbook on a desktop view:

{% tabs %}
{% tab title="Layout #1" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeyPU5p9ybgODMW-ku9%2F-MeySBsuxhInSd5dgod9%2FScreenshot_57.png?alt=media\&token=717fdc82-c6d4-4069-8e14-e806ca7d0331)
{% endtab %}

{% tab title="Layout #2" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeyPU5p9ybgODMW-ku9%2F-MeySEb8ZUM7Gkvg4NHf%2FScreenshot_56.png?alt=media\&token=04948f6b-644d-4048-888f-2ac0120c2f9f)
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**VIEW DEMO**

[<mark style="color:blue;">**Look Book V1**</mark>](https://shella-demo.myshopify.com/pages/lookbook)

[<mark style="color:blue;">**Look Book V2**</mark>](https://shella-demo2.myshopify.com/pages/autumn-winter-2018)
{% endhint %}

&#x20;In the **“Products per row” (Extra large),** you can choose how many products should be displayed in one row: 2, 3, or 4.&#x20;

{% hint style="warning" %}
**Please note,** the layout and image display settings can be applied to desktop mode only. It will be shown one item in a row on mobile by default.
{% endhint %}

&#x20;This is how it may look on mobile:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MgKJY7jyXvz7oStuEq1%2F-MgKKtcHsvrFer4XEIFL%2FScreenshot_2.png?alt=media\&token=2e3204e2-7f50-4518-af7e-fd7e0dc454f2)

&#x20;In the **“Responsive size”,** you can write the size of the image from 1 to 12 for different screen sizes. Where each value is assigned to a different screen size (Extra large, Large, Medium, Small, Extra small).

&#x20;This is an example of the Lookbook page, for which we have added 6 "Image" blocks and set the “Responsive size” to half of a line both for desktop and mobile view.

Desktop view:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MhDWSLHBgZ3xhyP34Zt%2F-MhDaPH4wGv6HSrfGoLl%2FScreenshot_21.png?alt=media\&token=2f43e607-9ddb-46e8-bd6e-dabc30d30195)

Mobile view:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MhDWSLHBgZ3xhyP34Zt%2F-MhDaWJqm-zkmH7C4GL0%2FScreenshot_22.png?alt=media\&token=893235b7-a4c4-4229-bf15-782c24662257)

&#x20;On the **“Image size”** scale from 200 to 1000px, you can set the quality of the image.

## Theme Blocks

## **Image**

&#x20;Here you can add content to your lookbook by adding the block **“Image”**. You can add as many “Image” blocks in the content as you wish. It depends on how many images you want to have in your lookbook. Make sure that you have created a lookbook page in your Shopify Admin first. How to add and edit a page you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/get-started/how-to-add-and-edit-a-page).&#x20;

{% hint style="warning" %}
**Please note**, when creating a lookbook page, you need to choose the **template suffix “page.lookbook”** in the Template:
{% endhint %}

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeySJPZrLGFyW_jKV5G%2F-MeyTmS_mpK1KYbIur_Y%2F05-04-template-suffix.png?alt=media\&token=c65843bd-404d-4ea3-9be2-7f421d23185a)

&#x20; In the **“Image”,** you can select the image of the products on the models.

## **Product**

&#x20;In this block, you can add the products with their information. In the **“Product”** select the product. Then choose the image to which you want to order this product.

{% hint style="warning" %}
**Please note,** the Shopify functionality can not display more than 20 products from different collections as shown in LookBook. &#x20;
{% endhint %}

&#x20;It was added manual filling in of the product block (**“Product image”, “Product title”, “Product price”, “Product compare at price”**) for those products that cannot be displayed due to the 20 product limit. This information is subject to change for each product that exceeds the limit.

&#x20;This is how it may look like in the Look book:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-MeyYnPFxj-VKa8qlRUz%2F-Mey_ohxrgwIxyOpLQSq%2FScreenshot_58.png?alt=media\&token=9b007865-f395-41ba-8604-6f787c251ed9)

&#x20;On the **“Horizontal position”** and **“Vertical position”** scales from 0 to 100% you can order the position of the products displayed on the image. The products will overlay an image as dots which one can click and see the product details. This option is available for **“Layout #1”** only.
