How to set up metafields

Metafields are extra fields you can add to things in your store — a product, a collection, a page. Shopify stores the data; the theme reads it. Homage uses metafields in a couple of places where you might want a custom image that isn't the default product or collection photo.

This article walks through creating a metafield in Shopify, then hooking it up in the theme.

Create a metafield definition

You only do this once per metafield "type" you need.

1. In your Shopify admin, go to Settings > Custom data.
2. Choose what the metafield belongs to — Products or Collections, depending on what you're setting up.
3. Click Add definition.
4. Give it a clear name (e.g. "Hover image" or "Navigation tile image").
5. Under Type, choose File and pick Image (or Video for product hover media — Homage supports both).
6. Save.

Shopify assigns a namespace and key. For definitions you create yourself, the namespace is almost always custom. The key is usually a short version of the name — e.g. hover_media or nav_image. Together that's written as custom.hover_media.

Add values to individual items

Definitions are the template; you still need to fill in the value on each product or collection.

1. Open a product or collection in the admin.
2. Scroll to the Metafields area (near the bottom of the page).
3. Find your new field and upload the image (or video) you want for that item.
4. Save.

Repeat for each product or collection that should have its own custom image.

Where Homage uses metafields

Product card hover image

Theme settings > Product cards > Hover settings

1. Set Hover media to Use metafield.
2. In Hover media metafield, enter the full namespace and key — e.g. custom.hover_media.

On hover, the card shows that product's metafield image (or video) instead of another image from the product gallery. Products without a value set simply won't show hover media.

See Product cards for the rest of the card settings.

Subcollection navigation tiles

Collection banner > Subcollections (when Style is Image and text)

1. Set Image source to Metafield.
2. In Metafield key, enter only the key part — e.g. for custom.nav_image, enter nav_image.

Each collection in your subcollection menu can then have its own tile image via that metafield. The theme always looks in the custom namespace for this one.

See How to set up subcollections for the full menu setup.

📝 Note: The two settings ask for the metafield differently — product cards want namespace.key, subcollection tiles want just the key. That's how the theme is built; match the format shown in each setting.

Quick example: hover image on product cards

1. Settings > Custom data > Products → Add definition named "Hover image", type File > Image. Note the key (say hover_media).
2. Open a product → Metafields → upload a lifestyle shot into Hover image → Save.
3. Theme settings > Product cards → Hover media: Use metafield → Hover media metafield: custom.hover_media.
4. Preview a collection page and hover a product card.

Quick example: custom tile images for subcollections

1. Settings > Custom data > Collections → Add definition named "Nav tile image", type File > Image. Note the key (say nav_image).
2. Open each subcollection (e.g. "Men's Shirts") → Metafields → upload a square-ish image → Save.
3. Collection banner → Style: Image and text → Image source: Metafield → Metafield key: nav_image.
4. Preview a parent collection page and check the subcollection tiles.

💡 Tip: Square images around 200×200px or larger work well for subcollection tiles. For hover images, use the same aspect ratio as your product card images so the swap doesn't feel jarring.

For more on metafields in general, Shopify's guide is helpful: Metafields overview.