Shopify has a new feature called meta objects. In this article, we will explain what this meta object feature is, how to use it, and more, with examples.
Key points of this article
- Understand the overview of meta objects
- Understand the basics of how to use meta objects
What is a meta object?
Previously, in Shopify, various pieces of information (objects) such as products, customer information, and order information only had fields to store predetermined data.
That's where the new feature "Metafields" comes in. "Metafields" allow you to create fields to store your own data in addition to various other information, expanding the design possibilities for Shopify site construction.
In addition, a new feature that has been attracting attention this time is the introduction of "meta objects," which allows even greater design freedom than before.
The meta object is a new structure that has the following two features:
A structure that groups meta fields
A new object structure that does not belong to any object, such as products, customer information, or order information.
How to use meta objects?
As of March 2023, it is not available to all Shopify stores and is only available to stores that are displayed in the admin screen, including stores with paid plans and development stores.
If your store is available, you will see the following when you access the admin screen.
*A menu called "Content" will be added between the "Customer Management" and "Store Analysis" menus.
How to create a meta object
For example, an e-commerce site with physical stores may want to create a page that lists the stores. Traditionally, when creating such a page, the information for each store was written directly in HTML, but by using meta objects, the information for each store can be managed. Furthermore, updates can be easily performed from the management screen.
Creating meta-object definitions
1-1. On the admin page, click "Settings" > "Custom Data".
1-2. Click "+ Add Definition" under "Meta Objects" at the bottom of the screen.
1-3. Enter the name of the meta object in the "Name" text.
Example) Store list
1-4. Click the "Edit" link that appears to the right of "Type" below the "Name" text.
1-5. Enter the type of meta object in the "Type" text.
Example: shopList
*A type is like an ID for a meta object; it is unique within a meta object and cannot be set multiple times.
1-6. Click "+ Add field" under "Fields".
1-7. Select the content type of the data to be set in the "Field" from the list.
For example, you can select a line of text, a number, a URL, a date, an image, etc.
Example: Select a single line of text
1-8. Enter the name and key of the "Single line text", set other items as necessary, and finally click the "Add" button.
Example) Name: Store name, Type: name
*The key is like a field ID; it is unique within the same meta object and cannot be set multiple times.
*If you check "Use this field as display name", this field will become the display name in the entry list. (We will explain entries later.)
1-9. The "Store Name" field will be created.
1-10. Repeat steps 1-6 to 1-9 to create the fields required for the store list meta object.
Example) Creating a "Store Address" field
1-11. Once you have completed all the steps, click the "Save" button.
Creating a meta-object entry
Once you have created the meta object definition, you can then create the entries to be registered in it.
[What is entry?]
Represents the data (record) to be registered in the meta object.
2-1. On the administration screen, click "Content" > "Meta Objects" and then click "Add Entry". A list of definitions will be displayed below the "Add Entry" button, so select "Store List".
2-2. The registration form for the "Store List" meta object entry will be displayed. Enter the data you want to register in each field.
Example) Store name: Tokyo store, Store address: 1-1-1, Chiyoda-ku, Tokyo
*The default status is "Active" and is public. You can create a private entry by changing the status to "Draft."
2-3. Click the "Edit" link next to "Handle" to change your handle name.
Example) tokyo_store
*Handle is a unique ID for each entry and cannot be set twice. By default, the data of the field set in the display name is set, but full-width characters cannot be used, so it must be changed to half-width alphanumeric characters and symbols. Handle is mainly used when referencing from the front.
2-4. Click the "Save" button.
2-5. If you want to create other entries, repeat steps 2-2 to 2-4.
Example) Create "Chiba store" or "Saitama store"
2-6. You can check the list of entries you have created by clicking "Content" > "Meta Objects" on the administration screen.
How to display meta objects
We will display the created meta object on liquid. We will explain using actual screens and code as examples.
Front display image
code
<p>本店</p>
<div class="shop_info">
<p>店舗名： {{ shop.metaobjects.shopList.tokyo_store.name }} </p>
<p>店舗住所： {{ shop.metaobjects.shopList.tokyo_store.address }} </p>
</div>
<br>
<p>店舗一覧</p>
<div class="shop_list">
{%- for shopInfo in shop.metaobjects.shopList.values -%}
<div class="shop_info">
<p>店舗名： {{ shopInfo.name }} </p>
<p>店舗住所： {{ shopInfo.address }} </p>
</div>
{%- endfor -%}
</div>
Commentary
The head office refers to the information of the specified entry of the meta object.
The above code refers to information about the Tokyo store.
{{ shop.metaobjects.shopList.tokyo_store.name }}
shop：fixed
metaobjects: fixed
shopList: The type of meta object you want to reference.
tokyo_store: The handle of the entry you want to view
name: The field of the entry you want to reference.
The store list is accessed one by one by looping through all entries registered in the meta object using a for loop.
{%- for shopInfo in shop.metaobjects.shopList.values -%}
You can reference all registered entries by adding values after the type of meta object you want to reference.
Examples of applied use
Here is a list of stores created using the above method. (The design has not been adjusted.)
It consists of two meta objects: a list of areas and a list of stores by area.
The area list meta object is assigned an ID, and a list of stores in the area associated with that ID is displayed.
Even if you update the information for each store or add new stores or areas, you can easily update and add information by updating or adding entries from the management screen.
lastly
This time, I explained a simple way to use meta objects. You can easily create your own custom data structure from the admin screen, and you can also register and update data easily, so I think that in the future you will be able to build stores that are more maintainable than before.
An important point to consider when using meta objects is whether or not you can design them.
It is important to understand the concept and mechanism of meta objects and then be able to translate merchant requirements into meta objects.
Currently, it can only be used in a limited number of stores, but it is expected that the number of stores where it can be used will gradually increase.
Also, meta object data can only be updated from the admin screen, but it seems that it can also be updated from the app using the API. It is expected that the number of apps incorporating meta objects will increase in the future.
*This article is current as of March 2023. Due to future updates or changes to Shopify specifications, it may not be possible to set up exactly as described in this article.
