Displaying metafields on your online store

After you add metafield definitions and assign metafield values to parts of your store, you can connect metafields to your theme to display your specialized information on your online store in a variety of ways. For example, a candle seller might want to display a burn time for candles on their product pages, whereas a grocery store might want to display a product expiration date for canned goods.

The following are other examples of specialized information that you can display on your online store:

  • part numbers
  • color swatches
  • product release dates
  • featured products or variants
  • product star rating
  • files for download
  • ingredient lists

If you have an Online Store 2.0 theme, then you can connect most metafields to your theme by using the theme editor. If you're using a vintage theme, or if you want to add metafield types that your theme doesn't support, then you can edit your theme code or hire a Shopify Partner to help you. Learn more about hiring a Shopify Partner.

Some standard product categories have available category metafields with default entries. For example, if you add the product category Apparel & Accessories > Clothing > Shirts & Tops, then you can add category metafields for clothing size, neckline, sleeve length type, length type, age group, material, and color. Category metafields have default metaobject entries that you can either use as is or customize further. For example, if the color black isn't in line with your branding, then you can rename it to graphite. Learn more about category metafields.

Category metafields can be used in your storefront for customer to find the products they need faster. When you use color entries as variant options, you can display variant options as swatches for color options on your storefront products pages. When you're adding metafields to your storefront, you can also filter them by product category and any metafield that is associated with that category displays in the results.

Connecting metafields to your theme by using the theme editor

If your theme supports metafields, then you can choose how to display metafields on your online store by using the theme editor. To find out which metafields are available in your theme, refer to your theme's documentation or contact your theme's developer.

You can connect metafields to your theme by adding sections or blocks that support dynamic sources. For example, the Product info section can support product metafields, and a Collection section can support collection metafields.

After you add a section or block, you can search for and select a single metafield by clicking the connect dynamic source icon:

Connect dymamic source icon

If the connect dynamic source icon displays a +, then you can search for and add up to 20 metafields in a single template by clicking the icon, and then selecting one metafield at a time:

Insert dymamic source icon

For step-by-step instructions, refer to Using metafields and dynamic sources.

You can connect a list of content types to Text or Rich Text sections and blocks. Product reference lists require a custom section or a third-party theme that uses product list settings.

Editing your theme code to add metafields

If you want to edit your theme code to display metafields on your online store, then you can use Liquid to reference metafields in your page templates.

Edit your theme code only if you have coding experience. If you need help with editing your theme code, then you can hire a Shopify Partner from the Shopify Partner Directory. Learn more about hiring a Shopify Partner.

Displaying Brand assets with metafields

You can use metafields to display your brand assets on your online store. Brand assets are used as a default setting, meaning after you have brand assets added, they're automatically synced with any feature that uses the Brand API.

Shopify's Online Store 2.0 themes can use your brand assets in your theme settings. You'll need to manually connect your brand assets by opening the theme editor. Find the theme setting you want to use the brand assets on, such as the logo in your store header, and click the Connect dynamic source button.

Picture of the image select screen for logo within theme settings with the connect dynamic source button highlighted.

Click the brand asset that you want to use in your header to connect it to your theme.

The connect dynamic source panel with Default logo selected.

If the option to connect brand assets doesn't exist, then the app, channel, or theme might not be integrated with the Brand API.

Ready to start selling with Shopify?Try it free