# Set up Peel's metafields

Chapter 7 of the Peel user guide.

Peel's features read three kinds of data, none of which needs an app:

* **Product and variant metafields** in the `custom` namespace (the one Shopify admin uses when you create a definition): a sticker's transparent PNG and a card's sub-line.
* **Theme settings** in **Theme settings › Finish and size**, **Free gift progress** and **Mix-and-match packs** (chapter 2).
* **Product option names and values**, for finishes, sizes and pack sizes (chapters 8 and 10), and **product tags** for packs and two badges.

Peel doesn't use metaobjects, so there is nothing to set up under Content › Metaobjects. You only need the data for the features you use, and nothing breaks while you fill it in.

In Shopify admin, metafield definitions live under **Settings › Metafields and metaobjects** (called **Custom data** in older versions of the admin, and in a few of the theme editor's hints).

## The metafields Peel reads

| Name (yours to choose) | Namespace and key | Owner | Type | Example | What it does |
| --- | --- | --- | --- | --- | --- |
| Sticker PNG | `custom.sticker_png` | Product, and optionally **Variant** | **File** (an image), **One value** | `sleepy-cloud.png` | The cut-out art for See it on (chapter 9) and for **Sticker cut: Contour** on cards. For See it on, a variant's PNG wins over the product's. Cards read the product's only, and so do a mix pack's slots and bag thumbnails. |
| Card note | `custom.card_note` | Product | **Single line text**, **One value** | Six stickers, one sheet | The line under the name on a card, in place of the product type |

Two more metafields are filled in by review apps, not by you: `reviews.rating` and `reviews.rating_count` give the **Rating** block. And a **Spec row** block (chapter 6) can show any other product metafield you create, such as `custom.thickness`.

## The product tags Peel reads

Capitals don't matter in any of these.

| Tag | What it does |
| --- | --- |
| `mix-pack` | Sells the product only through the Mix-and-match packs section: no variant picker or buy buttons on its page, a card **+** that links to its page, and quick view links out too (chapter 10). This is the default: change the tag itself in **Theme settings › Mix-and-match packs › Mix pack tag**. |
| `new` | A **New** badge |
| `best-seller` | A **Best seller** badge |

A card shows one badge, so Sold out, Save and Only 3 left come before New and Best seller (chapter 2).

## Step 1: create the product metafield definitions

In admin, go to **Settings › Metafields and metaobjects › Products** and click **Add definition** for each metafield you need:

1. Type the **Name** (yours to choose; it's what you see when you edit a product).
2. Check the **Namespace and key** under it and change it to exactly the key in the table above. Shopify suggests `custom.` plus the name, so "Sticker PNG" gives `custom.sticker_png`, but "Sticker art" would give `custom.sticker_art`, which the theme won't find. Keys are case-sensitive.
3. Click **Select type** and choose the type in the table:
   * **Sticker PNG**: **File**, then **Image** if the list offers it, **One value**.
   * **Card note**: **Single line text**, **One value**.
4. **Save**.

## Step 2: create the variant metafield definition (optional)

You only need this when a variant's art is different, such as a Clear version with its own cut-out. Go to **Settings › Metafields and metaobjects › Variants** and click **Add definition**:

1. **Name**: Sticker PNG. Key: `custom.sticker_png`. Type: **File**, **One value**.
2. **Save**.

This is a separate definition from the product's: both use the same key, and the theme looks at the variant first.

## Step 3: fill in your products

Open a product in admin and scroll to **Metafields**: every product definition you created is listed there. For a variant's PNG, click the variant and scroll to its **Metafields**.

* **Sticker PNG**: upload the file (below). Anything that isn't an image, such as a PDF, is ignored, and the theme falls back to the featured image.
* **Card note**: a short line, as shoppers should read it. It only shows while **Show the line under the name** is on.

To fill many products at once, use **Bulk edit** from the products list and add the metafield columns. Add tags in the product's **Tags** field.

## Prepare a transparent sticker PNG

Peel draws the white die-cut border itself, around the shape of your art. So it needs the art alone, on nothing: a PNG whose background is transparent. The same file works for `custom.sticker_png`, the hero's **Sticker** blocks, and product images when **Sticker cut** is **Contour**.

1. **Start from your print file**, or from a photo cut out with a background remover. Use the art, not a mock-up: no shadow, no laptop and no table.
2. **Make the background transparent.** In Procreate, turn off the background layer. In Illustrator, Affinity or Photoshop, hide the background layer. A checkerboard behind the art means it's transparent.
3. **Leave out your own white border.** The theme adds one, so a border in the file comes out doubled. The art's outer edge should be the line you want the white to follow.
4. **Crop it close.** Trim the empty space around the art, leaving a few pixels. Empty space counts towards the sticker's width, so a loose crop looks smaller on the scene and sits off centre.
5. **Export a PNG at about 1200px on the long side.** The theme asks for it at up to 800px, so anything bigger only adds upload time. Keep it under about 1 MB. JPG can't hold transparency, and a JPG uploaded here shows as a square.
6. **Name it for the sticker**, such as `sleepy-cloud.png`, so you can find it again in **Content › Files**.

Check it in the theme editor: open a product with See it on and scene images. If you see a white square where there should be a shape, the background isn't transparent.

**Which finishes need what.** A transparent PNG shows every sheen cleanly in See it on, because the shine is cut to the art's shape. In the product gallery, a JPG has no transparent ground, so **Clear** lays its checker over the whole image. For stickers you sell in Clear, use a PNG as the product image too (chapter 8).

## What shows without the data

| Missing | What happens |
| --- | --- |
| `custom.sticker_png` | See it on uses the featured image as a small square die-cut, with its white outline: honest, if less exciting. **Contour** cards and a mix pack's slots and bag thumbnails use the featured image. |
| `custom.card_note` | The card shows the product type, or no line if there's no type |
| `reviews.rating` | No Rating block |
| All of the above | The product still sells |

In the theme editor, features with no data show a sample so you can see the design: the finish swatches and size chips on a product with no such options, a sample rating, three drawn See it on scenes, a sample mix pack and a gift bar at 62%. Samples are tagged **Sample** where they could be mistaken for real ones, and shoppers never see them.