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
customnamespace (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:
- Type the Name (yours to choose; it's what you see when you edit a product).
- 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" givescustom.sticker_png, but "Sticker art" would givecustom.sticker_art, which the theme won't find. Keys are case-sensitive. - 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.
- 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:
- Name: Sticker PNG. Key:
custom.sticker_png. Type: File, One value. - 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.