# How to use Color Swatches with Amplify Bundles

## What is "Color Swatches with Amplify Bundles"

Color swatches allow customers to visually select product variations based on color, making the shopping experience more intuitive and engaging. When used with the **Amplify Bundles**, color swatches help customers seamlessly choose their preferred product combinations.

This feature is managed through **Shopify's Category Metafields**, which store product attributes such as color options. If configured in Shopify for regular products, color swatches will automatically appear on your product pages and in the Amplify bundle widgets.

## Steps to Configure Color Swatches in Shopify

Follow these steps to set up color swatches for your bundle and upsell scenarios:

#### 1. **Assign A Category to Each Product**

To ensure your products support color swatches, you must assign them to a Category that supports native Shopify color swatches. 

* Go to **Shopify Admin** > **Products**.
* Select the product you want to configure with color swatches.
* Scroll down to the **Category** section and assign an appropriate category that supports "Color" **category metafield** (e.g., "Apparel" or "Accessories").

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2FXwkf0klVMRbBZ9MQBY5J%2FHow%20to%20use%20Color%20Swatches%20with%20BND%20-%201.png?alt=media&#x26;token=934717b4-d172-43b0-9ddb-c3397aeebff9" alt=""><figcaption></figcaption></figure>

***

#### 2. **Add Color Options to Metafields**

Once a category is assigned, you can define available colors.

* In the **Category** **Metafields** section of the product, look for a field related to color.
* Add the available colors as predefined options (e.g., **Red, Blue, Green**).

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2FrwHp59SyxOyeIAaVay6P%2FHow%20to%20use%20Color%20Swatches%20with%20BND%20-%202.png?alt=media&#x26;token=d1e26949-fbba-4e04-a0a3-3e8e0daa82b3" alt=""><figcaption></figcaption></figure>

***

#### 3. **Link Variants to the Color Metafield**

To ensure customers can select colors seamlessly:

* Go to **Variants**.
* Check that each variant has a corresponding color option configured.
* If a product has multiple colors, they should be automatically pulled by the metafields.

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2FopaSN4QLWyHyYtEM6myK%2FHow%20to%20use%20Color%20Swatches%20with%20BND%20-%203.png?alt=media&#x26;token=498890ff-b544-43fb-9f74-01f3619f84cc" alt=""><figcaption></figcaption></figure>

***

#### 4. **Save and Test the Bundle on the Storefront**

After making these changes:

* Click **Save** to apply the changes.
* Preview the product page to check if color swatches appear.
* If everything is set up correctly, customers will see color swatches when selecting a product.

<figure><img src="https://1518757330-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE6PSEvXnU2fXbO4Sq6Ym%2Fuploads%2FOam7xaaKdk8OUF2cUCak%2FHow%20to%20use%20Color%20Swatches%20with%20BND%20-%204.png?alt=media&#x26;token=2c13ca8d-8384-437b-b660-39584d64d357" alt=""><figcaption></figcaption></figure>

***

## Commonly asked questions about how to use Color Swatches

<details>

<summary>Can I use color swatches with all Amplify scenarios?</summary>

Color swatches are currently supported in the following Amplify scenarios: Bundle As Product, Build Your Own Bundle Page, and Upsell Popup.

</details>

<details>

<summary>What should I do if I set up everything on Shopify, but the Color Swatches don’t appear in my Amplify bundles?</summary>

If color swatches don’t show up, go to the **Amplify app**, navigate to **Settings**, and click **Sync Products**. This will update the metafields and refresh the color swatches on your Amplify bundle widgets.&#x20;

</details>

<details>

<summary>Do I need to manually add color swatches for every bundle?</summary>

No, if your products are assigned to a category with color metafields, after you configure them in Shopify, the swatches should be applied automatically based on the available variants in your bundles.

</details>

<details>

<summary>What happens if I add a new color to a product after setting up the bundle?</summary>

If you add new colors to a product, and they don't appear in the bundle automatically; go to the **Amplify app > Settings > Sync Products** to refresh the product data.

</details>

<details>

<summary>Are color swatches supported for all categories?</summary>

Shopify's native color swatches are supported by only the categories that has "Color" category metafield. If your currently selected product category doesn't have this metafield, you can select a different category that has it and configure your product options with swatches.&#x20;

</details>

***

### Conclusion

Using **color swatches with Amplify bundles** improves the shopping experience by allowing customers to easily select product variations. By setting up **Shopify metafields**, assigning product categories, and linking variants, color options will automatically be displayed in your bundle widgets.

With color swatches enabled, your bundles become more interactive and visually appealing, making it easier for customers to choose the perfect product combinations! 🚀

***

<table data-card-size="large" data-column-title-hidden data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th data-hidden></th><th data-hidden></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><mark style="color:purple;"><strong>Get Bundles &#x26; Upsell</strong></mark> </td><td>Try free </td><td> </td><td><p>1. Color Swatches Shopify</p><p>2. Product Variants Shopify</p><p>3. Shopify Metafields</p><p>4. Bundle as Product Color Options</p><p>5. Shopify Variant Swatches</p><p>6. Customize Bundle Page</p><p>7. Enable Color Selection Shopify</p><p>8. Product Customization Shopify</p></td><td><a href="https://apps.shopify.com/product-kits-bundles-pickystory?surface_intra_position=1&#x26;surface_type=partners&#x26;surface_version=redesign">https://apps.shopify.com/product-kits-bundles-pickystory?surface_intra_position=1&#x26;surface_type=partners&#x26;surface_version=redesign</a></td><td></td></tr></tbody></table>