# Shop the look

{% hint style="info" %}
Shop the look is available in v3.0 and later. Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme).
{% 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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FP1VJg5AKFybuup33tUDM%2Fshop-look.png?alt=media&#x26;token=97ae9a6f-a969-4c86-b143-a5b647e50e74" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FCVknUext8JU8w5HMmWXN%2Fshop-look-mobile.png?alt=media&#x26;token=98eca341-cc29-40bc-9516-7000b9ed5f16" 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](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#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="../overview/section-styles#overlay-colors">#overlay-colors</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e">overlay-color-gradient.png</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>