> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/variant-images/set-up-a-product.md).

# Set up a product

Sort a product's photos into variant groups by hand.

Open a product in **Variant images** (click its row or the pencil icon) to sort its photos yourself.

## 🛠️ Steps

{% stepper %}
{% step %}

### Choose which options change the photos

Under **Which options change the photos?**, click the option — usually **Color**. It becomes the **main group**: one photo group per value. You can turn on up to 3 options.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-541f97fa9f1de98020fe07749f0f9c985c8ff2ea%2Fvariant-images-edit-01-options.png?alt=media" alt="Which options change the photos"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Move photos into groups

Click photos in **Unassigned** to select them, then drag them into a group — or use **Move to** in the bar at the bottom. Each photo sits in one place at a time.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-0cd3d4e780171b4a44fd470e48e8a0576f58d39f%2Fvariant-images-edit-03-unassigned.png?alt=media" alt="Unassigned photos waiting to be grouped"><figcaption><p>1. Unassigned area. 2. A photo waiting to be moved.</p></figcaption></figure>
{% endstep %}

{% step %}

### Add common photos

Drag photos that apply to every variant — size guide, packaging, lifestyle shots — into **Common**.
{% endstep %}

{% step %}

### Pick the opening shot

Click the star on a photo to show it first when a shopper picks that value.
{% endstep %}

{% step %}

### Turn it on and save

Switch on **App status** in the right column, then click **Save** in the save bar.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-e83a629ed595d6b42400a93c4d34f43bb5c49d46%2Fvariant-images-edit-04-status.png?alt=media" alt="App status switch and Common photos"><figcaption><p>1. App status switch. 2. Common photos shown for every variant.</p></figcaption></figure>
{% endstep %}
{% endstepper %}

## Good to know

* **Featured image** is the first photo shoppers see before they pick a variant.
* **Compact view** / **Detailed view** switches how big the photo tiles are.
* **Edit product** opens the product in Shopify — save or discard your changes here first.
* **Preview** opens the product on your store.
* A group holds up to 250 photos, and so does **Common**.

→ *Photos still in **Unassigned** are hidden on your store while the product is on — the badge shows how many are left.*

***

💬 If you have any related questions, please contact us via **Live chat** in the app.
