Understanding of metaobjects and their use in a store
Metaobjects is a Shopify tool that can help add and store new data in the admin, which can then be displayed on store pages using theme functionality, sections or blocks.
Last updated
Metaobjects is a Shopify tool that can help add and store new data in the admin, which can then be displayed on store pages using theme functionality, sections or blocks.
Last updated
This article provides several examples of how metaobjects can be practically used in the theme. But of course, you can implement this functionality into other parts of the theme according to your needs by following Shopify's recommendations. More about metaobjects can be read on the following help page.
If you need to separate a product or group of products for which the following content will be used, operate templates as a new block should be added to a page that can be unnecessary for other product pages.
First, let's explore how to add new data for products that dynamically change based on a product. To complete this task in your store, follow these steps:
Creating the metaobject! This step is required to create a new metaobject definition with entries that allow you to add and store new data in your admin.
Go to your Shopify admin -> Settings -> Custom data -> Metaobject definitions and click on the "Add definition" button.
Create a metaobject definition by adding its name and fields. In our example, we will add a definition with the name "Additional features" and three fields:
First field. The first field will be formed to display an icon. So, it will be set with the following parameters:
Name - Icon
Single line text - One value
Second field. The next field will be added to display texts:
Name - Text
Single line text - One value
Third field. Add a field with the next parameters to display an image:
Name - Image
File - One file
Accept specific file types - Images
Note! The "File" type field cannot be used as the display name of a metaobject entry that will be formed in the next step. For personal convenience, create an additional field specifically for this purpose if you need to display only an image on the storefront (without using text fields), for example:
Name - Title
Single line text - One value
To add metaobject entries, go to Shopify admin -> Content -> Metaobjects, and click on the definition name. Then, hit the "Add entry" button.
Create as many entries as necessary by editing the provided fields, for example:
First entry - Icon
Icon - icon name. The list of theme icons can be checked here.
Text - add the desired text line.
Second entry - Image
Icon/Title - title the entry.
Text - add the desired text line.
Image - select image.
Building a metafield! This step is necessary to link new data with the corresponding product in your admin and the following display of this information on the storefront.
Create a metafield definition by pressing the "Add definition" button in your Shopify admin -> Settings -> Custom data -> Metafield definitions -> Products. How to build the metafield definition can be read here.
The example of the metafield definition can be viewed below:
Name - Feature 1
Namespace and key - custom.feature_1
Metaobject - Additional features
One entry
If you need to display several metafields with different content per product, add more metafield definitions. We added three metafields to display three content lines on a product page.
Link metafields with products in your Shopify admin -> Products. Select a metaobject entry for each metafield to show several content lines on the storefront.
In your Shopify admin -> Online Store, press the "Customize" button next to the desired theme. Then, go to Products -> Product information in the Theme Editor. In the provided section, hit the "Add block" button and select the "Icon with text" block.
Now you can link each metafield with the corresponding content:
You can certainly use the traditional method of creating new pages using templates, as described on the following help page. However, if you need to create multiple pages of the same category across a store with the same sections and blocks but with unique content per page, you want to do it quickly, efficiently, and in bulk, the Shopify functionality for setting metaobject templates can be extremely useful.
Metaobject templates can be used to create pages with information about vendors, artists, shop locations for finding sales spots of specific products, and more. In our example, we will create three pages featuring information about the artists whose work is showcased in the store.
Let's go through a step-by-step guide on how to use metaobject templates:
First, add a metaobject. In your Shopify admin, go to Settings -> Custom data -> Metaobject definitions and press the "Add definition" button.
Create a metaobject definition by adding its name and fields. Add as many fields as necessary to display the desired content on the storefront, such as text, images, links, icons, etc.
This example demonstrates a definition with the name "Artists" and four fields:
First field. The first field will be formed to display an artist's name. So, it will be set with the following parameters:
Name - Artist name
Single line text - One value
Second field. The next field will be added to display a text paragraph with the main description of the artists:
Name - About artist
Multi-line text
Third field. Add a field with the next parameters to display an image:
Name - Image
File - One file
Accept specific file types - Images
Fourth field. Select the "URL" type to create a field for the link:
Name - Link
URL - One value
To store and organize content that will be displayed on the storefront, add metaobject entries. In the Shopify admin, go to Content -> Metaobjects and click on the definition name. Then, click the "Add entry" button.
Create as many entries as needed by editing the provided fields, such as:
Artist name - artist's name.
About artist - add some paragraphs.
Image - add an image.
Link
We want to display three pages featuring artists, so we've added three entries, each corresponding to a different artist.
Add a metaobject template in the Theme Editor using the top selector.
In the opened popup specify the metaobject definition such as "Artists".
Then, edit the provided fields with the corresponding information if necessary:
Page title
Meta description
URL handle
Next, click the "Create template" button.
To navigate to the desired template, select it from the top drop-down menu.
Now you can customize the page with the required content by selecting the appropriate section with blocks.
Press the "Add section" button in the "Template" and select a section. The "Media" section will be used as an example.
Specify content in the corresponding fields of the section by hitting the dynamic source icons.
Repeat the same steps to assign content to all the fields, such as heading, description, image, link, and so on.
Press the "Change" button next to the page title to view other pages. Then, select another page.
Metaobjects are useful for adding the same content to dynamic sections across different parts of a store, helping you avoid the repetitive task of adding information to each block when using multiple blocks in a section.
Additionally, with metaobjects, you only need to edit the information in the entries once, and it will automatically update in the corresponding sections throughout the store.
Let's take a closer look at how it works.
You can use an existing metaobject or add a new one in your Shopify admin -> Settings -> Custom data -> Metaobject definitions by pressing the "Add definition" button.
To create a new metaobject definition with entries, follow the Step 1 and Step 2 above.
We will use the same metaobject created earlier to display information about artists.
Now, create a metafield to connect metaobjects with theme sections. To handle it, go to Shopify admin -> Settings -> Custom data -> Metafield definitions. Here, you can add metafields for any page category, such as Products, Collections, Pages, and so on. Select the page category where you want to display the content.
In our example, we want to represent all artists on an individual page. So, we will build a Page metafield definition.
Add a metafield definition by pressing the "Add definition" button. The example of the metafield definition can be viewed below:
Name - Artists
Namespace and key - custom.artists
Metaobject - Artists
List of entries (As we need to display several artists on a page we use the "List of entries" option)
In this step, you can use a default page or create a new template and assign it to a page.
Variant 1: Create a new template
Add a new template in the Theme Editor by pressing the top drop-down menu and selecting the "Pages" category or any other relevant category. Then, press the "Create template" button. For more details, refer to the following help page.
Create a new page or use the one you've already created. Navigate to Shopify admin -> Online Store -> Pages and add a new page. How to create pages can be read here.
Assign a template to the page.
Variant 2: Use the existing page. Select a page in Shopify admin -> Online Store -> Pages.
Then, follow the steps below regardless of the variant used above:
On the opened page, press the "Show all" button in the "Metafields".
Assign all entries to a metafield.
Save changes.
Link the content with a section:
Go to the Theme Editor and select a corresponding page.
Then, add a section from the list. In our example, we will use the "Multicolumn" section with the "Column" block.
In the "Column" block, press the dynamic source icon to reference a metaobject.
All the metaobject entries should be added at once.
Note! Shopify needs some time to update the information or several refreshes.
Since the "Column" block in the "Multicolumn" section contains an additional "Icon SVG" field, we've previously added an extra field to the metaobject definition and edited the entry accordingly.
Another scenario is when you need to place unique content per page. For instance, you may want to feature information about artists, vendors, or store locations on pages within the same category, with content that dynamically changes based on the relevant page. This can also be accomplished using metaobjects.
This example demonstrates how to showcase artists on collection pages where their products are featured. For this, we utilize the same metaobject that was used before.
We'll skip Step 1 and Step 2 since you can refer to the above to learn how to build a metaobject. Instead, we'll move on to the next step: creating a metafield.
Since the goal is to display artists on specific collection pages, we'll create a metafield associated with the collections. To do this, go to Shopify admin -> Settings -> Custom data -> Metafield definitions, and select "Collections". If you need to display content on another page category, create a metafield for the corresponding page by hitting it in the list. Then, follow the guidance described below.
Press the "Add definition" button. The example of the metafield definition can be viewed below:
Name - Artist
Namespace and key - custom.artist
Metaobject - Artists
One entry (As the only artist will be linked to a metafield on the specific collection page)
Save the settings.
Link a metafield with a page, such as collections, by going to Shopify admin -> Products -> Collections. In this step, you can assign the exact content you need to showcase on a specific collection using the metaobject entries.
Once you have completed all the necessary settings in the admin, proceed to the Theme Editor and associate the content to a section. In the Theme Editor, select a page (for example, "Collections") and add a section. Then, connect content by pressing the dynamic source icon next to each field.
In this example, we used the "Media" section.
