# Product variation swatches

Demo: <https://minimog.thememove.com/product/slim-high-ankle-jeans/>

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FQwZgUwTSW4yX8xsZdfSp%2FSwatches.png?alt=media&#x26;token=128b6a79-6605-4311-9fc1-2483a7cf5588" alt=""><figcaption></figcaption></figure>

*Follow these steps to create Product Variation Swatches.*

{% hint style="info" %}
To use Product variation swatches feature, you need to install and activate the **Insight Swatches** plugin.&#x20;

From the Dashboard, go to **Insight Core >** **Plugins** > **Install &** **Activate Insight Swatches.**
{% endhint %}

## Create variations

**Step 1:** From the Dashboard, navigate to **Products > Attributes**&#x20;

**Step 2:** Fill in the Attribute name (such as Size, Color, Image, etc)

*For example, you want to add color attribute to the product then fill in “Color” in “Name” field.*

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2Fsk4aoxvK2u2ntLjdY1OI%2Fimage.png?alt=media\&token=6eeb9051-99fd-43ab-824e-dc5b60a9e02a)

**Step 3:** You can determines how this attribute's values are displayed with **Type**

You can display your attribute in 3 types:

* TEXT

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FBJOQa6jzOLOhHmfuYANF%2FType_Text.png?alt=media&#x26;token=6491e418-0adb-499e-b8b9-691327df84df" alt=""><figcaption></figcaption></figure>

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FLlOiskVLOoWDfqp9NZ4A%2Fimage.png?alt=media\&token=d9a0d7c3-226b-4546-94cf-a045031a0656)

* COLOR

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2F2p92eQiMCGhlYJMyVnPl%2FType_Color.png?alt=media&#x26;token=4d5f9208-e0a3-4137-9b3d-5593220a8ab6" alt=""><figcaption></figcaption></figure>

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FMt65xI2BwQD4njKXuZCj%2Fimage.png?alt=media\&token=b1cad212-17ea-4104-ba9b-190622446f19)

* IMAGE

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FzXjsAaiKGuAzRb0nMzPQ%2FType_Image.png?alt=media&#x26;token=01637f05-d67b-4a03-951d-97b184a1dbd3" alt=""><figcaption></figcaption></figure>

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FrMJIPHjrCCCMepEvR0IB%2Fimage.png?alt=media\&token=806f22cd-4a9b-494b-93b3-527a7021b131)

**Step 4:** Hit **Add attribute** when you’re done. Now click on **Configure terms** link to add new terms to the attribute. Here you’ll see the new field shows up.

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2Fos8gDImlEJoHlnApFGCD%2Fimage.png?alt=media\&token=36784c90-f6ef-44af-9b51-208c99b5ab06)

When you're done, you can choose to create new product using this attribut&#x65;**,** or add this attribute to the products you've already create.

{% hint style="info" %}
To change how your variation display, from Attributes, click Edit the Attribute you've just created > Select Type > Update&#x20;
{% endhint %}

## Set up variation swatches for product**s**

**Step 1:** From the admin dashboard, navigate to **Products > All Products**.

{% hint style="success" %}
Note: If you haven't created any product, go to Product > Add New, then fill in all the need information
{% endhint %}

**Step 2:** Select the product you want to set Product variation swatches. At the Product data section, select Product type as Variable product.\
**Step 3:** Choose tab Attributes > Add the attribute you've just created

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2Fkb7BHgbWB1gettqfh3la%2Fproduct%20swatch%201.png?alt=media\&token=9a979c06-ebbf-4236-a1e1-d8fb5ef017e2)

**Step 4:** Click on each attribute tab to fill in its value by typing in the value you want then hit Add new. Also, put a tick on 2 options that are Visible on the product page and Used for variations. And finally hit Save attributes.

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FXPjaQvoPY3Q7YsiXlakj%2Fimage.png?alt=media\&token=d0c25e80-ed53-46fd-9d85-e71794082d71)

**Step 5:** Move to tab Variations, click the dropdown menu and choose Create variations from all attributes, click Go.

![](https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2Fzp5SG3f8j7Pv6eNGcFRw%2Fproduct%20swatch%203.png?alt=media\&token=1646a161-487f-48c5-9825-e32529a2f848)

**Step 6:** Now you will see all the variations appear based on the product’s attributes. Firstly, select the default variation if you want. Next, select the attribute that you want to show on shop catalog.\
**Step 7:** Click on each variation to set up its image, price, sale countdown, and other details as you want.

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FJwRFzbf6njIppIVBrvRt%2FVariations_Tab.png?alt=media&#x26;token=31c25caf-d42c-46a8-884c-8ed949916e65" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You can add gallery images for each variation. Instructions to do this are [here.](https://minimog-wp.gitbook.io/minimog-ecommerce-wordpress-theme/ecommerce-features/variation-gallery-images)
{% endhint %}

**Step 8:** Finally, click Save changes after you finished all of them. And click Update to save changes to the product.

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

## Hide out-of-stock variations

**Required**: Insight Swatches plugin ver 1.5.0

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2F1JCOurJh4BqXmlJZtj1T%2Fhide_out_of_stock_variations_1.png?alt=media&#x26;token=75072787-d21a-41af-821b-3e292a4d6e4d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2Fo0dXplZfcQOCaonDndYp%2Fhide_out_of_stock_variations_2.png?alt=media&#x26;token=b449f3b9-f96a-442a-bae7-98993dbda9c2" alt=""><figcaption></figcaption></figure>

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

## **Show attribute on shop catalog**

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FtjpPxN3h7JNpSE2lOkMM%2FSwatches_on_Shop_page.png?alt=media&#x26;token=43dee1ff-48af-49e8-9bb7-7ef7a99dc848" alt=""><figcaption></figcaption></figure>

To show attribute on shop catalog, you need to Edit product > Go to Variations tab > Select the attribute you want to display on shop catalog.

<figure><img src="https://3192842155-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCGEvkIGZQql1dvbXwu25%2Fuploads%2FlYAJBna0TDhewk2m3gk3%2FSwatches_on_Shop_page_setup.png?alt=media&#x26;token=9bf57820-10fc-43d0-aa2c-54c33fc3ad0a" alt=""><figcaption></figcaption></figure>
