# Shoppable feed

{% hint style="info" %}
Shoppable feed is available in v4.0 and later. Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme).
{% endhint %}

The **Shoppable feed** section allows customers to shop multiple ‘looks’ directly from a gallery of images. Add images to showcase multiple products that pair well together, which customers can quickly view and buy in a ‘shop the look’ drawer.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FZjdlkOObIaAnIEzCf7mU%2Fshoppable-feed-drawer.png?alt=media&#x26;token=17f0b4a0-1398-4f33-9d2d-557a85d7ee36" alt="" width="563"><figcaption></figcaption></figure>

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Shoppable feed**. 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 the **Header** and general **section styles** for colors, width, and spacing:

<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><tr><td align="center"><mark style="color:blue;"><strong>Section header</strong></mark></td><td><a href="../overview/section-styles#section-header">#section-header</a></td><td></td></tr></tbody></table>

### Section layout

***

In the section settings, you can adjust the overall layout of the shoppable images

* Display images in a **Grid** (multiple rows) or **Slider** (single row)
* Select the **number of columns** to show per row
* Choose to show the slider indicator bar

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F0WmPFDgYta7F7uurVZGW%2Fshoppable-feed-multi-grid.png?alt=media&#x26;token=de8105bf-d935-446e-b8ec-a3b1f17ae4cb" alt="" width="375"><figcaption><p>Grid layout</p></figcaption></figure>

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="385">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Layout</mark></td><td>Display shoppable feed items in multiple rows (grid) or in a single row slider that visitors rotate through.</td><td><strong>Slider</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Grid</strong></td></tr><tr><td><mark style="color:blue;">Show slider indicator</mark></td><td>When enabled, a bar below the slider that shows how far visitors have scrolled.</td><td></td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of images per row on desktop screens.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>4</strong></td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of images per row on mobile screens.</td><td><strong>1</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>2</strong></td></tr></tbody></table>

## Add shoppable feed items

***

The **Shoppable feed items** are image cards that open a list of products that customers can view and purchase. Click a block to set up a shoppable item:

* Add an image that showcases multiple products that pair well together
* Select the products to show in the 'Shop the look' drawer

The uploaded image will appear in the section gallery and at the top of the "Shop the look" drawer.

`Click Shoppable feed item block 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;">Image</mark></td><td>Select or upload an image that shows the products.</td></tr><tr><td><mark style="color:blue;">Products</mark></td><td>Select the products that will appear in the 'shop the look' drawer</td></tr></tbody></table>

## Change shop button icon

***

In the section settings, you can select the **Shop button icon** that overlays the image card.

<table data-full-width="false"><thead><tr><th width="188">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shop button icon</mark></td><td>Select the <strong>Bag</strong> or <strong>Cart icon</strong> for the Shop button.</td></tr></tbody></table>

## Change image ratio (shape)

***

The **Image aspect ratio** setting lets you crop your uploaded images to make them all **Square (1:1)**, **Landscape (3:2)**, or **Portrait (2:3)**. You can select the **Natural** option to show all images with their original orientation.

In the section settings, select an image ratio for both the card images and drawer images. By default, the image ratio uses your theme settings.

{% hint style="warning" %}

### **Use consistent image ratios**

If you select the **natural** aspect ratio, it's important that your images use the same image ratio. Using images with varying image ratios (for example, landscape and portrait) can affect the layout of the section.

Check out [Shopify's guide for the image editor](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor#crop-an-image) to learn how to crop images to have the same ratio.
{% endhint %}

<details>

<summary>What are aspect ratios?</summary>

The **aspect ratio** describes the relation between the image width (w) and height (h). An image that's 400px by 200px has an aspect ratio of **2:1** because its width is twice as large as its height. Square images have an aspect ratio of **1:1** because the width and height are equal.

<img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fgit-blob-a1c288a8c20161326a93dce363d3dfe30bf321af%2Faspect-ratio.png?alt=media" alt="" data-size="original">

</details>

`Click section for settings`

<table data-full-width="false"><thead><tr><th width="199.5">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Card image aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop card images to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.<br><br>For <strong>Natural</strong>, we recommend using images that have the same aspect ratio or shape.</td></tr><tr><td><mark style="color:blue;">Drawer image aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop the images in the 'shop the look' drawer to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.</td></tr></tbody></table>

## Product shop now link

***

In the drawer, the "Shop now" links can either open the product page or the Quick view popup, allowing customers to add the products directly to their cart.

For "Quick view", make sure **Quick shopping** is enabled in **Theme settings > Product listings.**

`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;">Show vendor</mark></td><td>Show the product vendor name above the product titles.</td></tr><tr><td><mark style="color:blue;">Shop now link action</mark></td><td>When the "Shop now" link is clicked, choose to direct customers to the product page or open "Quick view"  to allow them to add the products directly to their cart.</td></tr></tbody></table>