# Shop the Look Banner

This section allows you to add a prominent image with interactive product hotspots. It’s ideal for showcasing popular products visually appealingly with customization.

[**View Shop the Look Grid section.**](https://palo-alto.presidiocreative.com/sections/sections/products/shop-the-look-grid)

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FCo5xQP3KkzMhTgOYEIRE%2Fshop-the-look-banner.gif?alt=media&#x26;token=b6a030d5-68ab-4eff-920b-2c44529ad3da" alt=""><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="238.205078125">Settings</th><th width="181.0751953125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload the main banner image.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Image scaling ratio</td><td align="center"><code>range</code></td><td>Adjusts the banner image’s aspect ratio (width to height).</td></tr><tr><td>Show product titles arrow</td><td align="center"><code>checkbox</code></td><td>Toggles arrows for hotspot product titles.</td></tr><tr><td>Default to open</td><td align="center"><code>checkbox</code></td><td>Opens the first product card by default.</td></tr><tr><td>Product card image aspect ratio</td><td align="center"><code>range</code></td><td>Adjusts product image size within the hotspot card.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Sets button color. Options: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Choose from <code>Solid</code>, <code>Outline</code>, <code>Solid with border</code>, or <code>Soft</code>. </td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Main heading for the section.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjust heading font size.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Subheading or description.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjusts body text size.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Choose <code>Left</code> or <code>Center</code> alignment.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Mobile image</td><td align="center"><code>image_picker</code></td><td>Optional alternate image for mobile view.</td></tr><tr><td>Image scaling ratio</td><td align="center"><code>range</code></td><td>Adjust mobile image aspect ratio.</td></tr><tr><td>Popup heading</td><td align="center"><code>text</code></td><td>Title shown on popup card.</td></tr><tr><td>Show free shipping message</td><td align="center"><code>checkbox</code></td><td>Displays a message indicating free shipping.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td><em><strong>Section</strong></em></td><td align="center"></td><td></td></tr><tr><td>Hotspot color</td><td align="center"><code>color</code></td><td>Sets color for the product hotspot.</td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td><em><strong>Hotspot contents</strong></em></td><td align="center"></td><td></td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color inside hotspot popups.</td></tr><tr><td><strong>Section spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Section width. Options: <code>Full width</code>, or <code>Full width padded</code>. </td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Space above section.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Space below section.</td></tr></tbody></table>