# Visual Lookbook

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

To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Visual lookbook**".

## Section settings

### General

<table><thead><tr><th width="326">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width).</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right padding of the section when the full width layout is selected.</td></tr><tr><td>Background color</td><td>The background color of the section.</td></tr><tr><td>Background gradient</td><td>The background gradient of the section.</td></tr><tr><td>Section header</td><td></td></tr><tr><td>Title</td><td>Enter text for the section title.</td></tr><tr><td>Title color</td><td>Set color for the section title.</td></tr><tr><td>Title bottom margin</td><td>Determine the bottom spacing of the title.</td></tr><tr><td>Title font size</td><td>Specify the font size of the section title.</td></tr><tr><td>Title font size on mobile</td><td>Specify the font size of the section title on Mobile device.</td></tr><tr><td>Description</td><td>Enter text for the section description.</td></tr><tr><td>Description color</td><td>Set color for the section description text.</td></tr><tr><td>Description bottom margin</td><td>Determine the bottom spacing of the description text.</td></tr><tr><td>Description font size</td><td>Determine the font size of the description text.</td></tr><tr><td>Description font size on mobile</td><td>Determine the font size of the description text on Mobile.</td></tr><tr><td>Alignment</td><td>Select the alignment of the content including title, description to be either to the Left, Right or Center.</td></tr><tr><td>Content width</td><td>Set the width for the section content.</td></tr><tr><td>View all</td><td>Enter text for the View All link.</td></tr><tr><td>'View all' link color</td><td>Apply color for the View All text.</td></tr><tr><td>'View all' link</td><td>Set URL for the View All link to redirect to.</td></tr><tr><td>Show 'view all' border</td><td>Toggle to show border/underline of the view link</td></tr><tr><td>'View all' font size</td><td>Set the font size for the view all text.</td></tr><tr><td>'View all' font weight</td><td>Select the font weight of the view all to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.</td></tr><tr><td>'View all' alignment</td><td>Select the position of the View All to be either to the Left, Right or Center.</td></tr><tr><td>Top margin of the view all button</td><td>Determine the top spacing of the View all link.</td></tr></tbody></table>

### Lookbook image blocks

<table><thead><tr><th width="328">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Popup style</td><td><p>Select the style for the lookbook. <br></p><p><mark style="color:orange;"><strong>Style 1:</strong> A popup is a product card.</mark><br><mark style="color:orange;"><strong>Style 2:</strong> A popup is minimal with product title and price info only.</mark></p></td></tr><tr><td>Enable lookbook popup maximum width</td><td>Toggle to apply the Lookbook Max Width setting on the Lookbook Popup style 2.</td></tr><tr><td>Lookbook popup maximum width</td><td>Set maximum width for the lookbook popup.</td></tr><tr><td>Pin icon width on desktop</td><td>Determine the size of the lookbook dot on desktop.</td></tr><tr><td>Pin icon width on mobile</td><td>Determine the size of the lookbook dot on mobile.</td></tr><tr><td>Pin icon shadow color</td><td>Set the pinning shadow color of the dot.</td></tr><tr><td>Pin icon border color</td><td>Set the pinning border color of the dot.</td></tr><tr><td>Show number on pin icon on desktop</td><td>The inner of lookbook dot turns into count number on Desktop.</td></tr><tr><td>Show number on pin icon on mobile</td><td>The inner of lookbook dot turns into count number on Mobile.</td></tr><tr><td>Pin icon color</td><td>Set the color for pin icon.</td></tr><tr><td>Number font size on pin icon on desktop</td><td>Determine the number font size on desktop.</td></tr><tr><td>Number font size on pin icon on mobile</td><td>Determine the number font size on mobile.</td></tr><tr><td>Truncate product title line to</td><td>Truncate product title line to 1 line or 2 line.</td></tr></tbody></table>

### Show all button

<table><thead><tr><th width="332">Settings</th><th>Description </th></tr></thead><tbody><tr><td>'Show product' text</td><td>Enter text for the show all lookbook products button.</td></tr><tr><td>'Hide product' text</td><td>Enter text for the hide all lookbook products button.</td></tr><tr><td>Background color</td><td>Set background for the show/hide all button.</td></tr><tr><td>Background gradient</td><td>Set background gradient for the show/hide all button.</td></tr><tr><td>Text color</td><td>Set color the buttons' text.</td></tr><tr><td>Button height</td><td>Determine the height of the button.</td></tr><tr><td>Button width</td><td>Determine the width of the button.</td></tr></tbody></table>

### Section top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>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).</td></tr><tr><td>Tablet</td><td>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).</td></tr><tr><td>Mobile</td><td>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).</td></tr></tbody></table>

### Section bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>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).</td></tr><tr><td>Tablet</td><td>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).</td></tr><tr><td>Mobile</td><td>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).</td></tr></tbody></table>

## Blocks settings

### \[BLOCK] Lookbook image

<table><thead><tr><th width="333">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Select/Upload image for the block.</td></tr><tr><td>Action when clicking on image</td><td>Decide the behavior of the image on clicked. The options are:<br><br><mark style="color:orange;"><strong>Link</strong></mark><br><mark style="color:orange;"><strong>Open fancybox</strong></mark></td></tr><tr><td>Link</td><td>Set URL for the image to redirect to if the "Redirect To URL" is selected.</td></tr><tr><td><strong>Product 1 / Product 2 / Product 3 / Product 4</strong></td><td></td></tr><tr><td>Product</td><td>Select a product for a lookbook dot.</td></tr><tr><td>Pin icon horizontal position (%)</td><td>Determine the horizontal position of the dot relative to the block's left. </td></tr><tr><td>Pin icon vertical position (%)</td><td><p>Determine the horizontal position of the dot relative to the block's top.</p><p> </p></td></tr><tr><td>Lookbook popup position</td><td>Choose the direction in the popup that appears when hovering the pin icon. There are 4 options:<br><br><mark style="color:orange;"><strong>Right of the pin icon</strong></mark><br><mark style="color:orange;"><strong>Left of the pin icon</strong></mark><br><mark style="color:orange;"><strong>Above the pin icon</strong></mark><br><mark style="color:orange;"><strong>Below the pin icon</strong></mark></td></tr><tr><td><strong>Link</strong></td><td><em><mark style="color:orange;">Shown below the image.</mark></em></td></tr><tr><td>Link text</td><td>Enter text for Link.</td></tr><tr><td>Link</td><td>Add link for Link.</td></tr><tr><td>Show text underline</td><td>Toggle to show the underline for link text.</td></tr><tr><td>Link color</td><td>Set the color for the link text.</td></tr><tr><td>Link hover color</td><td>Set the color for the link text when hovering.</td></tr><tr><td>Top margin</td><td>Determine the top spacing of the link text.</td></tr><tr><td>Font size</td><td>Specify the font size of the link text.</td></tr><tr><td>Font size on mobile</td><td>Specify the font size of the link text on the mobile.</td></tr><tr><td>Alignment</td><td>Select the alignment of the link text to be either to the Left, Right or Center.</td></tr><tr><td>Maximum width</td><td>Set maximum width for link text.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/visual-lookbook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.