> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/sections/sections/products/shop-the-look-grid.md).

# Shop the Look Grid

The **Shop the Look Grid** section is designed to display a grid layout of products in an interactive format, where users can view products linked to specific 'looks' in a visually appealing way.

[**View Shop the Look Banner section.**](/sections/sections/products/shop-the-look-banner.md)

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FK6AQjQk2wJ2iR9ErnO44%2Fshop-the-look-grid.gif?alt=media&amp;token=2d4978b5-0268-40ec-aefe-195abff73fd7" alt=""><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="238.9521484375">Settings</th><th width="175.484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Products per row on desktop</td><td align="center"><code>range</code></td><td>Set how many products appear per row.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload the main image for the section.</td></tr><tr><td>Image position</td><td align="center"><code>select</code></td><td>Choose image alignment: <code>Left</code> or <code>Right</code>.</td></tr><tr><td>Set custom aspect ratio</td><td align="center"><code>checkbox</code></td><td>Toggle to enable a custom aspect ratio.</td></tr><tr><td>Aspect ratio</td><td align="center"><code>range</code></td><td>Define image aspect ratio.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title of the section.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Scale the heading size.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text content under the heading.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Scale the paragraph text size.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Align text <code>Left</code> or <code>Center</code> (desktop only).</td></tr><tr><td>Show hotspots</td><td align="center"><code>checkbox</code></td><td>Toggle to display product hotspots.</td></tr><tr><td>Show buttons arrow</td><td align="center"><code>checkbox</code></td><td>Show/hide arrow in buttons.</td></tr><tr><td>Popup heading</td><td align="center"><code>text</code></td><td>Title shown in the product popup.</td></tr><tr><td>Show free shipping message</td><td align="center"><code>checkbox</code></td><td>Toggle visibility of free shipping text.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Hotspot color</td><td align="center"><code>color</code></td><td>Color for product hotspot markers.</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>Hotspots 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 for popup content.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label text.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button should link to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose button color style.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose button appearance style.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</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>Set section width: <code>Full width padded</code> or <code>Page width</code>.</td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Padding above the section.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Padding below the section.</td></tr></tbody></table>