# 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>


---

# 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://halosoft.gitbook.io/ella-documentation/product-page/product-information/combined-products-listing.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.