Show who's wearing it

Add each model once in the Shopify admin, pick one on every product they wear, and a small card shows their photo, name, height and size.

The Model info card sits on the product page and tells shoppers who is wearing the piece in the photos: a small round photo, their name, their height ("Height: 5'5 ft") and the size they wear ("Wears Small"). It helps shoppers judge the fit. The same details show under the fit in the size guide.

A product page on a computer with the model card in the bottom-left corner: a small photo of the model, "@ariiana_r", "Height: 5'5 ft" and "Wears Small"
On a computer the card floats in a bottom corner while shoppers look at the product

You add each model once and reuse them. If Ariana wears twenty pieces, you pick "Ariana" on each one, and changing her photo later updates all twenty.

One Model entry, Ariana, with her height and size, picked on three products
One model, picked on every product she wears

Setting it up takes four steps in the Shopify admin. You do the first two only once.

1. Create the Model type

This tells Shopify what a model holds.

  1. In the Shopify admin, go to Settings, then Custom data, then Metaobjects, and add a definition.
  2. Name it Model. Check that its type is model.
  3. Add the fields below. The key in the second column has to match exactly, or the theme won't find the field.
Field name Key Type Notes
Name name Single line text, required Shown on the card, for example "Ariana" or "@ariana_r".
Photo photo File (images) Optional. A head-and-shoulders photo works best; it shows as a small circle.
Height height Single line text Optional. Type it the way you want it read, for example "5'5 ft" or "165 cm".
Size worn size_worn Single line text Optional. For example "Small" or "M".
  1. Turn on Storefronts access for the definition. Without it, your store can't show the card.
  2. Save.

2. Let products pick a model

  1. Still in Custom data, open Products and add a definition.
  2. Name it Model, with the namespace and key custom.model.
  3. For its type, choose a metaobject reference, and pick Model.
  4. Save.

3. Add your models

  1. Go to Content, then Metaobjects, open Model and add an entry.
  2. Fill in the name, photo, height and size worn, and save.

4. Pick a model on each product

  1. Open a product in Products.
  2. In Metafields, pick the model in Model, and save.

The card shows on that product straight away. A product with no model picked shows no card.

The model card close up: a round photo, the name, and the height and size worn
What shoppers see

On a computer the card floats in a bottom corner of the screen while shoppers scroll through the photos, and stays clear of a music player. On phones it sits under the description, above the sizes.

The product page on a phone, with the model card between the description and the color and size options
On a phone

If the product also has a size guide, the same model shows under the fit, so shoppers can compare their own height with the model's.

The size guide open over the product page, with the model's photo, name, height and size under the fit
In the size guide, under the fit

Where the card shows

The card comes from the Model info block in your product page layout. In the theme editor, open a product page, then select Model info in the sidebar to change its corners, shadow, colors and style (Solid or Glass). If you don't see it, choose Add block in the product details and pick Model info.

If a product's model wore a different size for its photos, add a second entry for them, for example "Ariana (Medium)".

Already using the older model fields?

Stores set up before Models used three fields on each product (custom.model_image, custom.model_spec_1 and custom.model_spec_2). Those still show on any product with no Model picked, so nothing disappears while you move over.