# Shop the look

{% hint style="info" %}
Shop the look is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme.md).
{% endhint %}

Use the **Shop the look** section to showcase multiple products that go together next to a featured image or video that displays them in context. With quick shop enabled, customers can add directly to their cart.

* Add a featured image or autoplay video
* Add overlay text content
* Display products as a list or grid

<div><figure><img src="/files/IeLNbmlCjgLh1llB2A0S" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/72l9PuyP30hX0Ghuf7vY" alt="" width="102"><figcaption></figcaption></figure></div>

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Shop the look**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Set up featured media

***

Add an image or autoplay video (without sound) as the featured media. Use media that shows all the products being showcased.

After uploading your media, you can select the **focal point** of your media and add a **color overlay**.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors">/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors</a></td><td><a href="/files/r6qvEikOKVMq5Hv30JkJ">/files/r6qvEikOKVMq5Hv30JkJ</a></td></tr></tbody></table>

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="180"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

`Click section for settings`

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop media size</mark></td><td>Change the width of the featured media as a percentage of the section width.</td></tr><tr><td><mark style="color:blue;">Media position</mark></td><td>Place media on the <strong>Left of products</strong> or <strong>Right of products</strong></td></tr><tr><td><mark style="color:blue;">Sticky media on scroll</mark></td><td>Fix the feature media to the top of the window when scrolling down to view products.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image.</td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.</td></tr><tr><td><mark style="color:blue;">Video</mark></td><td>Add a short autoplay video (without sound) to replace the image.</td></tr><tr><td><mark style="color:blue;">Mobile video</mark></td><td>Add an alternate autoplay video that appears on mobile screens.</td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.</td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>For desktop and mobile, select an <strong>aspect ratio</strong> to crop the media to be a uniform shape, or select <strong>Natural</strong> to display media in their original shape.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Select the color scheme to apply as the overlay colors.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay. <br><br>Set the opacity to 0% to turn off the overlay.</td></tr></tbody></table>

## Add overlay content

***

After adding an image or video, add **headings**, **text**, and **buttons**. You can adjust the **text size** and change the **position** of the content.

&#x20;

`Click section for settings`

<table><thead><tr><th width="148">Setting</th><th width="425">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overline</mark></td><td>Add small heading text.</td><td></td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add main heading text.</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading from small to large.</td><td><strong>1-8</strong></td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td><td><strong>H1 - H6</strong></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.</td><td></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the text from small to large.</td><td><strong>1-8</strong></td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong><br><strong>Outline</strong><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Set the position of the overlay content for desktop screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Set the position of the overlay content for mobile screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr></tbody></table>

## Add products

***

Click **(+) Add product** and select the product that you want to feature. You can add a **custom image** to replace the default product images.

Product items within the drawer

### Change products layout

***

In the section settings, change the **heading** above the products, choose to show the product **vendor** names, and change the **image aspect ratio**.

Change the products layout to a **list** or **grid**. If you have if you have more than 4 products, we recommend using grid and enabling **Slider on mobile**.

`Click section for settings`

<table data-full-width="false"><thead><tr><th width="188">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text above the products.</td></tr><tr><td><mark style="color:blue;">Show vendor</mark></td><td>Show the product vendor name above the product titles.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop product images to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.</td></tr><tr><td><mark style="color:blue;">Products layout</mark></td><td>Display product items as a <strong>list</strong> or <strong>grid</strong>.</td></tr><tr><td><mark style="color:blue;">Enable slider on mobile</mark></td><td>Display products as a single row slider. Toggle off to display products as stacked column with multiple rows.</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://help.fluorescent.co/eclipse/sections/shop-the-look.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.