Adding product highlights with metaobjects

Metaobjects help you add and store additional structured information for your store. Metaobjects can be used in your Shopify admin for data storage or to create reusable, structured content that's displayed in your online store. Here are some examples of metaobjects and where you can use them:

  • Add fabric types to your products and display them on your product pages in your online store.
  • Create FAQs for your products and display them on your product pages in your online store.
  • Create ambassador or influencer profiles with images and text and then display them on a page in your online store.

You can add metaobjects to your products, collections, customers, orders, and other parts of your store, directly from your Shopify admin.

If you have an Online Store 2.0 theme, then you can connect your metaobject to your theme by creating a metaobject reference with metafields. If you're using vintage themes, 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.

Product highlights tutorial

In this tutorial, you learn how create a custom metaobject for product highlights and display them on your online store.

What you'll learn

After you've finished this tutorial, you'll have accomplished the following:

  • Created a metaobject for product highlights
  • Created several entries for product highlights using the metaobject you created
  • Created a metafield definition that references the metaobject
  • Connected your entries to specific products
  • Published your metaobject entries

Step one: Create a metaobject

  1. From your Shopify admin, go to Settings > Custom data.
  2. Under Metaobjects, click Add definition.
  3. Name your metaobject definition Product Highlights.
  4. Click Add field and select the type of content you want to display in this metaobject. Fields define the content displayed in your metaobject, and each field has its own set of options and validations.
    • For this tutorial, we're building a product highlights metaobject that will display an image, the name of the product, a caption, and a description. To add the first field, select File.
  5. Configure the type and validations. Name the field Image, and enter a brief description.
  6. Under Access, Storefront is automatically selected. Keep this option selected as it allows the content to be accessed and displayed by your store.
  7. Add the image field to your metaobject. Choose Add field > File.
    • Name this field Image.
    • Uncheck Videos to limit this metaobject to only display images.
    • Enter a description.
    • Click Add when done.
  8. Add the heading field to your metaobject. This time, choose Add field > Single line text as the field type. Do the following:
    • Name this field Heading.
    • Check Use this field as display name to use this field as the entry name in the index.
    • Enter a description.
    • Click Add when done.
  9. Add the caption field to your metaobject. Click Add field > Single line text. Do the following:
    • Name this field Caption.
    • Enter a description.
    • Click Add when done.
  10. Add the description field to your metaobject. Click Add field > Multi-line text. Do the following:
    • Name this field Description.
    • Enter a description.
    • Click Add when done.
  11. Save your new metaobject definition.

After your metaobject definition has been saved, you can start creating entries.

Step two: Create entries

  1. From your Shopify admin, click Content.
  2. Click the Product Highlights metaobject definition to base the new entry on, and then click Add entry.
  3. Complete the fields for your entry:
    • Click Select image and choose or upload an image for this product highlight.
    • Add a Title and a Description.
  4. The status is automatically set to Active. If you aren't ready to use the entries, then you can change the status to Draft.
  5. Click Save.

Your entry has a generated Handle, which is a unique identifier specific to a single content entry. After you start connecting your entries to areas of your store, editing the handle isn't recommended. Learn more about the impact of changing an entry handle after you have been using it in your store.

Repeat the steps above to create three more entries based on the product highlights metaobject definition.

After you have your metaobject definition and entries saved, you can create a metafield definition that references the metaobject.

Step three: Create a metafield definition that references the metaobject

  1. From your Shopify admin, go to Settings > Custom data.
  2. In the Metafields section, click Products.
  3. Click Add definition. Enter a unique name and description, and then click Select content type.
  4. Click Select type and then Metaobject.
  5. In the Reference section, select the metaobject definition you want to reference. Choose Product Highlights. This limits the metafield product definition to only display entries related to the product highlights metaobject.
  6. Define whether this definition can display one entry, or a list of them. For this example, choose the List of entries option.
  7. In the Access section, the Storefronts option is selected by default.
  8. Click Save.

Next, you'll connect the entries to the products you want to display them on.

Step four: Connect your products to the entries

  1. From your Shopify admin, go to Products.

  2. Select a product that you want to display product highlights on.

  3. In this example, we want to display some of, but not all, the product highlights entries that we've created. In the Product metafields section, click the entry field next to your Product Highlights metafield. If product highlights isn't in the metafields list, then click Show all.

  4. Click Select entries. In this step, you're selecting the entries you want to display on this particular product. Choose two of your product highlights.

  5. Return to your products page. Select a different product, and follow the previous step to assign two different product highlights entries to the product.

Next you will publish your metaobjects on your online store.

Step five: Publishing your entries to your online store

Now that you've connected your entries to your products, it's time to display your entries on your store. This step uses the theme editor to select the blocks and sections where your metaobject entries will be linked.

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

Connect dymamic source icon

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Customize.
  3. Use the drop-down menu at the top of your screen to select Products > Default product. This loads the default product template in the theme editor.
  4. Click Add section in the left sidebar and choose Multirow as the new section type.
  5. Click the first row of the Multirow section.
    • The settings for the first block display in the right sidebar. In your column block, you can manually select an image, insert a heading, add a caption, and add a description. You can also click each individual data source icon, and link the block setting to your desired entry.
  6. Click the Connect dynamic source next to the block name to select Product Highlights. Your theme editor populates your new multirow block with your product highlights entries.
  7. Configure remaining blocks in the Multirow section, or remove the unused blocks.
  8. Click Save to publish your product highlights entries.

Your entries only display on the products they're connected to and the section won't publish if a product isn't connected to entries. That means you can set up a single product template that will work for all your products.

Can't find answers you're looking for? We're here to help you.