# Swatch types - Swatchline 1.x documentation

> Colour, Image, Label and Dropdown: choose how each attribute's values show on the product page.

Each global attribute has a **Swatch type**, set on its add and edit forms under **Products → Attributes**. It applies to every product that uses the attribute.

![The swatch type on the attribute's edit form](https://storage.extendiment.com/media/148/screenshot-4.png)

| Type | On the product page | Set up per value |
|---|---|---|
| **Dropdown** (default) | WooCommerce's own dropdown, unchanged | Nothing |
| **Colour** | A colour chip per value, the name in a tooltip | A colour |
| **Image** | A photo per value (fabric, finish, pattern), the name in a tooltip | An image |
| **Label** | A button with the value's name | Nothing |

## Setting the type

1. Go to **Products → Attributes**.
2. To change an attribute, click **Edit** under it. To add one, use the form on the left.
3. Choose the **Swatch type** and click **Update** (or **Add attribute**).

The product pages change right away. Values without a colour or image yet show an empty, striped chip until you set one: see **Colours and images**.

## Which type to choose

- **Colour** for colours you can name and show as one flat colour: Sage, Navy, Terracotta.
- **Image** when a flat colour isn't enough: wood grains, metal finishes, prints, patterns, melange fabrics.
- **Label** for sizes, lengths, capacities, anything that reads better as a word: S, M, L, 500 ml.
- **Dropdown** for long lists (fifty fragrances) where a dropdown is quicker to scan.

## Custom attributes

Attributes typed on a product's **Attributes** tab (not under Products → Attributes) have no terms, so they can't have colours or images. They stay dropdowns unless you switch on **Custom attributes** in the settings, which shows them all as Label swatches.

> [!NOTE]
> Swatchline Pro adds a **Variation image** type and lets you set a type, colours and images on a single product, also for its custom attributes.

Source: https://www.extendiment.com/plugins/swatchline/docs/1.x/swatch-types