# Metal and stone chips

Chapter 8 of the Clasp user guide.

Jewelry is chosen by its metal first. Clasp shows metals and stones as small, polished **chips** wherever a shopper chooses one, from your own option names, with no app and no per-product setup:

* **On the product page, in quick view and in Featured product**: every option named in **Metal option names** shows as a row of round chips under its label, which spells the choice out: "**Metal:** Rose gold". Each chip is a tiny polished disc in the metal's colors with a soft highlight and a fine ring; the chosen one gets a dark ring around it. Hovering a chip shows its name. A value that no variant can sell (with the other choices as they are) is faded and struck through, and stays selectable so shoppers can see the price and ask to be told when it's back. A value with no color (below) shows as a small text tile in the same row, so "Oxidised silver" or "Champagne" still work.
* **On product cards**: up to four small **metal dots** sit centred above the product name, then "+2" for the rest. Choosing a dot switches the card's photo, link and price to that metal, without moving anything on the card.
* **Under the price**: **material badges** ("14k gold fill", "Nickel free", "Hypoallergenic"), each a small badge with a facet, from the product's `custom.materials` metafield (chapter 7).
* **On collection tiles**: the Collections section's **Ovals with metal chips** style puts a chip over the foot of each oval whose tile names a metal in **Metal chip** (Shop by metal, chapter 4).
* **In filters**: a filter whose label is in **Metal option names** shows its values as chips with their names (chapter 14).

## Which options become chips

In **Theme settings › Jewelry**:

| Setting | Default | What it does |
| --- | --- | --- |
| Metal option names | Metal, Finish, Stone, Colour, Color | Options with these names show as round chips. Separate names with commas; capitals don't matter. Add your own words: a shop whose option is called "Metal colour" or "Plating" adds it here. |
| Chip colours | Thirteen lines (below) | The colors of each metal and stone, used when the option value has no Shopify swatch |

An option whose values carry Shopify swatches (set on the product's option values in admin) also shows as chips, whatever its name. Every other option keeps its size tiles or select menu (chapter 6).

## Where a chip's color comes from

For each value, the first of these that has a color wins:

1. **A Shopify swatch image** on the option value: the chip shows the image (a close-up of the metal or stone works well).
2. **A Shopify swatch color** on the option value: the chip shades from a lighter to a darker tone of that color, so give the swatch the metal's mid-tone.
3. **Chip colours**: a line in the setting whose name matches the value. An exact match comes first (capitals don't matter); then the first line whose name the value contains, so "14k Yellow gold" finds "Yellow gold". Put longer names above shorter ones ("Yellow gold" above "Gold"), as the defaults do.
4. **Nothing**: the value shows as a text tile on the product page, gets no dot on cards and shows as a plain filter value.

## The Chip colours format

One value per line: the name, a colon, then a light and a dark color as hex codes. The chip shades from the light color to the dark one and back, under a soft highlight, like polished metal:

```
Yellow gold: #f2d98c #b08a3e
White gold: #f4f4f1 #b9bbbd
Rose gold: #f3c9b5 #b97a63
Sterling silver: #eceeef #9fa4a9
Gold vermeil: #f6d27a #c08f2a
Silver: #eceeef #9fa4a9
Gold: #f2d98c #b08a3e
Pearl: #fbf7f0 #d9cfc4
Garnet: #c0394d #4a0c16
Emerald: #3fae7c #0e4a31
Sapphire: #4d6fc6 #142a66
Opal: #f4f1ec #a9cfd9
Diamond: #ffffff #c9d3da
```

These are the defaults. Add a line for each metal or stone you sell that isn't there, such as `Amethyst: #b48ad6 #5b2d86` or `Oxidised silver: #9a9da1 #3f4246`. A line with only one color uses a darker shade of it for the second. A line without a colon is ignored, and only codes starting with `#` (3 or 6 digits) are read. Write the names as your option values are written, or as a part of them.

## Card dots

With **Theme settings › Product cards › Show swatches** on (the default), a card's dots come from the first option named in **Metal option names** that has at least one value with a color; failing that, from the first option with Shopify swatches. Values without a color are skipped, and a product with none shows no row. **Swatches before "+" count** (4, 2 to 8) sets how many dots show before "+2", which opens the product page.

## Material badges block

The **Material badges** block goes in the **Product** and **Featured product** sections (the presets put it under the price); quick view always shows it.

| Setting | Default | What it does |
| --- | --- | --- |
| Badges to show | 4 (1 to 6) | How many entries show |
| Source | Materials metafield | **Materials metafield** reads the product's `custom.materials` (a list of single line text, chapter 7). **Text** uses the **Materials** setting below for every product. |
| Materials | Empty | Comma-separated, used when Source is Text or the product has no materials, such as "14k gold fill, Nickel free" |

With no materials, the block shows nothing; in the theme editor it shows three sample badges tagged **Sample**.