# 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FlxWEGWWMAT1UsjXTQCSp%2FCombined-Products-Listing-Home-30.jpg?alt=media&#x26;token=2a31bfca-1c72-405d-85ac-81fc8731187c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FMgd9slRzKmXTWdqeEDKD%2Fcombined.gif?alt=media&#x26;token=f53337f8-8c3d-4060-9280-73f491099310" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F5i69JQAwUFuX5Ly4O7gX%2Fimage.png?alt=media&#x26;token=7087eb05-96b7-4150-aac0-c10bdaab3425" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FW759mtGhxBUOFhD0yQHl%2Fimage.png?alt=media&#x26;token=13ffff06-b3e3-406b-a052-6da690709510" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FhjctdcOo6pRNzIwmzaxl%2FScreenshot_1.png?alt=media&#x26;token=d85dafa0-221f-490f-87a3-f28cbc13a9a2" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FlTXAv68o9xfO3ivIaR63%2FScreenshot_2.png?alt=media&#x26;token=5caeac30-bcef-4e56-a1c2-99290693b5db" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fok6UUnj1UI1TWUOKehUF%2FScreenshot_3.png?alt=media&#x26;token=6b6cdc70-3022-4b45-b14f-de2849f7882d" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FU5n5cgbFO8sl7Y2NBsR7%2Fpositive-vibes-bundle-on-the-product-card-30.png?alt=media&#x26;token=43803122-26c3-425c-b2a8-14c35fcad48c" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F792GWfHJuULWQtykdXt9%2Fpositive-vibes-bundle-on-the-product-card-31.png?alt=media&#x26;token=5ef42d4b-5a0e-46e9-b44e-0d2135933e86" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FMp52J1gJqy8mwWztJsNK%2Fpositive-vibes-bundle-on-the-product-card-32.png?alt=media&#x26;token=198032fc-24d6-45cb-814e-d33cb2eba627" alt=""><figcaption></figcaption></figure>
