> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/look-list.md).

# Look list

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The "Look List" section is provide by the Flute theme. show off your products in style with a Look list section - a visual collection that tells the story of your brand through eye-catching images.

{% hint style="info" %}
**Recommendation Size**\
Look list image desktop size: 1770x820\
Look list image mobile size: 770x620
{% endhint %}

<table><thead><tr><th width="286">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td><strong>Text</strong> <br>Enter text to display as a main heading of the Look list section. </td></tr><tr><td>Description</td><td>Enter text to display as a Description of the Look list section. </td></tr><tr><td>Image</td><td>Upload the <strong>main desktop image</strong>. This is the primary image displayed in the section.</td></tr><tr><td>Container color scheme</td><td><p>In this section, you can change the background and foreground color of a content container using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Image</strong> </p><p>Upload a <strong>mobile-specific background image</strong>. This image will be shown on mobile devices instead of the desktop default image. Leave it blank to use the desktop image.</p><p></p><p><strong>Product view</strong> </p><p>Choose how products are displayed on mobile:<br>• <strong>Inside</strong> – Products appear on image.<br>• <strong>Outside</strong> – Products appear below the image.</p></td></tr></tbody></table>

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

## **Add product**

To add blocks to the look list section, click on the 'Add product'. There are many options available similar to the product, as you can see in the below points and screenshot:

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Title</td><td>Add a <strong>custom title</strong> for the product label that appears on the image. Leave it blank to display the product title on desktop.</td></tr><tr><td>Product</td><td>Select a product to display selected product in the section.</td></tr><tr><td>Desktop position</td><td><strong>Horizontal position</strong><br>Use "Horizontal position" to customize the Look list icon's position from left to right. You can give a minimum of 0%, and a maximum of 100% value to “Horizontal position”.<br><br><strong>Vertical position</strong><br>"Vertical position" is used to customize the Look list icon from the icon position top to bottom. You can give a minimum of 0%, and a maximum of 100% value to “Vertical position”.</td></tr><tr><td>Mobile position</td><td><strong>Horizontal position</strong><br>Use "Horizontal position" to customize the Look list icon's position from left to right on mobile devices. You can give a minimum of 0%, and a maximum of 100% value to “Horizontal position”.<br><br><strong>Vertical position</strong><br>"Vertical position" is used to customize the Look list icon from the icon position top to bottom on mobile devices. You can give a minimum of 0%, and a maximum of 100% value to “Vertical position”.</td></tr></tbody></table>

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