> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/product-page/product-information/combined-products-listing.md).

# Combined Products Listing

Imagine you run an apparel shop, and your best-selling shorts are available in 8 colors. However, on the product listing page for the shorts, you only showcase one image per color. A customer interested in the ice blue shorts won't be able to see multiple images or different angles of the blue shorts, which makes them much less likely to make a purchase. This is a significant missed opportunity to boost sales.

The [**Combined Products Listing function**](https://new-ella-demo-11.myshopify.com/collections/combined-products-listing-home-30//?fts=0\&preview_theme_id=129232961587) allows Shopify merchants to better showcase products available in multiple colors from a single product listing.

This feature enables merchants to create a unified product listing that includes all variations of a product. Each variation can have its own image carousel, unique descriptive URL, and individual publishing controls.

{% hint style="warning" %} <mark style="color:orange;background-color:$danger;">Because each product is a separate color, there will be no swatch on the product card.</mark>
{% endhint %}

<figure><img src="/files/N4XOStXla5VwvjaMsxQx" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ljf3z8DrvIXyhHbqx0ZW" alt=""><figcaption></figcaption></figure>

### Enable Combined Products Listing

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **General.**
4. Scroll to **Variant picker** and choose **Enable combined products listing**

<figure><img src="/files/SBJ06VT6WK1a6VVsr3BQ" alt=""><figcaption></figcaption></figure>

5. From **Product information ->** Click **Add block** -> Choose **Variant picker**.

<figure><img src="/files/8MOvbSioqhnxndn3Yabs" alt=""><figcaption></figcaption></figure>

You can use **Metafields** to show "**Combined Products Listing**" by each product.

### **How to add new Metafields?**

1. &#x20;From your Shopify admin, go to **Settings** -> **Custom Data**.
2. Click **Products → Add Definition.**
3. Please enter correct **Name** as we noted below.

#### - Combined Products Listing

```
Name: Combined Products Listing.
Namespace and key: custom.combined_products_listing
Select content type: Product
```

<figure><img src="/files/zOwnDINNS42f2MNdm7zO" alt=""><figcaption></figcaption></figure>

#### - Combined Products Listing Image

```
Name: Combined Products Listing Image.
Namespace and key: custom.combined_products_listing_image
Select content type: File
```

<figure><img src="/files/E8KAzLuLyGStdWNG1b0H" alt=""><figcaption></figcaption></figure>

#### - Combined Products Listing Name Color

```
Name: Combined Products Listing Name Color.
Namespace and key: custom.combined_products_listing_name_color
Select content type: Single line text
```

<figure><img src="/files/2oiDtRYD3k14ZEywETPg" alt=""><figcaption></figcaption></figure>

### How to insert content for Product Metafields?

1. From your Shopify admin, go to **Products -> All products**.
2. Find and choose the product that you want to edit.

#### - Combined Products Listing

1. At **Combined Products Listing**, click "**Select products**".
2. Choose the product you want to display.

<figure><img src="/files/55bcgDmyzyVua84iPVwL" alt=""><figcaption></figcaption></figure>

#### - Combined Products Listing Image

1. At **Combined Products Listing Image**, click "**Select file**".
2. Choose the image you want to display (if this file is not selected, the first image of the product will be chosen as a replacement).

<figure><img src="/files/OKM5t6tlPnn7CrjX19eS" alt=""><figcaption></figcaption></figure>

#### - Combined Products Listing Name Color

1. At **Combined Products Listing Name Color** enter the text to display the name of the color.

<figure><img src="/files/lcUHFXgEfwaoS8QkrLzn" alt=""><figcaption></figcaption></figure>