Set up Ribbon's metafields

Ribbon's fit scale, model line, size charts, pairings, drop dates and edit kicker read product metafields in the custom namespace, the one Shopify admin uses when you create a definition. Size charts are metaobjects: you write a chart once (Dresses and tops, Knitwear, Shoes) and pick it on every product it fits. Two product tags add badges. You don't need an app, and you only need the data for the features you use: a shop that sells only one-size accessories can skip the fit and the size chart. Every feature hides when its data is empty, and the Fit and size block has fallback settings you can fill instead (chapter 9), so nothing breaks while you fill them in.

What Ribbon reads

And two product tags:

Two more are filled in by review apps, not by you: reviews.rating and reviews.rating_count give the stars and "4.9 · 86 reviews" in the Price block. And a Spec row (chapter 6) can show any metafield you create, such as custom.fabric.

Step 1: create the Size chart metaobject definition

Skip this step if you don't want size charts of your own: the Fit and size block's Default size chart then serves every product (chapter 9).

1. In admin, go to Settings › Custom data, scroll to Metaobject definitions and click Add definition.
2. Name it Size chart. Check that its Type (the handle under the name) is exactly size_chart, and change it if it isn't.
3. Add four fields. For each, type the name, check its key is exactly the one below (keys are case-sensitive), and choose the type:

4. Under the definition's access options, make sure Storefronts access is on, so your theme can read the charts. If you turn on Active-draft status, set each chart to Active: a draft chart isn't shown.
5. Save. Then add your charts under Content › Metaobjects › Size chart › Add entry, one per kind of garment.

The pipe format

The Rows field, the Fit and size block's Default size chart and the Size guide section's Size chart all use the same format:

Size | Bust | Waist | Hip
XS | 78-82 | 60-64 | 86-90
S | 82-86 | 64-68 | 90-94
M | 86-90 | 68-72 | 94-98
L | 90-96 | 72-78 | 98-104
XL | 96-102 | 78-84 | 104-110

• One line per row. Cells are separated by |, and spaces around them don't matter. Blank lines and lines starting with # are ignored, so you can leave yourself notes.
• The first line is the header. Its first cell names the size column ("Size"); the others name the measurements ("Bust", "Waist", "Hip", or any names you like: "Length" or "Inside leg" are shown in the table too).
• Every other line is one size: the size label first, written as your size option's values are (matched without regard to capitals, so xs finds "XS"), then one cell per measurement, as a range from-to (a hyphen or an en dash, such as 82-86 or 82–86) or a single number (88). Use . for decimals (33.5).
• Find my size uses the columns whose header contains bust or chest, waist and hip (capitals don't matter). A chart with none of them, such as a shoe chart (Size | Foot length), shows the table without Find my size.
• A line whose measurement cells aren't numbers is shown as you wrote it but skipped by Find my size. A chart with fewer than two lines that read as numbers isn't used: the product falls back to the block's Default size chart.

Write each chart in the unit you measure in: shoppers can switch the table between cm and in, and the theme converts it for them (chapter 9).

Step 2: create the product metafield definitions

In admin, go to Settings › Custom data › 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 "Model info" gives custom.model_info, but "Model" would give custom.model, which the theme won't find. Keys are case-sensitive.
3. Click Select type and choose the type in the table:
   • Fit: Integer, One value. Add validation: Minimum value 1 and Maximum value 5.
   • Model info and Edit: Single line text, One value.
   • Size chart: Metaobject, One value, and choose the Size chart definition from step 1.
   • Wear it with: Product, List of products.
   • Drop at: Date and time, One value.
4. Save.

Step 3: fill them in

Open a product in admin and scroll to Metafields: every definition you created is listed there. Pick the product's size chart from your entries, choose its pairings from your products, and type its fit and model line. To fill many products at once, use Bulk edit from the products list and add the metafield columns. Add the restocked and new tags in the product's Tags field.

How the theme reads what you type

• Fit must be a whole number from 1 to 5; anything else (or nothing) uses the block's Fit when a product has none setting.
• Model info is printed as you wrote it, after the fit advice. Write a whole sentence: "Model is 175 cm (5′9″) and wears S."
• Wear it with shows available pieces first, in your order, and skips the product itself and anything already in the shopper's bag.
• Drop at is a moment in your store's time zone. Products are gated only while it is in the future; once it passes, nothing changes on the product and it sells as normal.

What shows without the data

In the theme editor, blocks with no data show a sample tagged Sample so you can see the design; shoppers never see it.