> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-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-7-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-07.myshopify.com/collections/combined-products-listing/?fts=0\&preview_theme_id=137341599849) 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/bdRgUwpdOvjuDuUNrr4A" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WN9vvuXqC17IY8mcSMxI" 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 ->** **Variant pills.**
4. Scroll to choose **Enable combined products listing**

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

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

<figure><img src="/files/Un02kY2iS2JMiDnT1Rmx" 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** -> **Metafields and metaobjects**.
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: List - Product
```

<figure><img src="/files/M1Y9VHTddFN2teFsE9WE" 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/iOhj65VXTeCaPr8jhZcK" 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/GSzeu2G2MUyksBtM2PR2" 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/EP9iNkFnWtXR2KSaxscX" 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/4u1ltU8BSnVGHY5aOy1K" 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/qzgwtxYHe9shs6GkvVIB" alt=""><figcaption></figcaption></figure>