What is SHOPIFY's meta field? Thorough explanation to the implementation method!
When registering products on Shopify, using the “Description” text editor allows you to freely manage text, URLs, and images, making it very user-friendly.
However, if you put all the information together in one place, it can be a hassle to find where to update things, and there’s a risk of accidentally deleting important information. Also, if you want to dynamically change the display, you can’t extract specific values from the “Description” text editor.
Metafields are what solve these kinds of issues.
This time, I’ll explain how to implement metafields so that you can set them up even with zero coding knowledge, as well as their functions and benefits.
What is a metafield?
A metafield is a flexible feature that allows you to add specific information to Shopify objects such as products, orders, customers, and collections—information that can’t normally be managed from the standard admin panel. By using metafields, you can track details internally or display certain information on your store.
With metafields, you can register various types of information, such as text, dates, images, or data from other pages within the same store. You can also customize the information to fit the unique needs of each store.
These features are included as part of Shopify’s core functionality, so there’s no need to install an app.
Types of metafields
Metafields allow you to set a variety of values. There are multiple formats, called content types, available, so you can flexibly configure them for purposes like organizing information or receiving values.
We have summarized multiple content types in table format.
| Date and Time |
You can register release dates or use them as triggers to switch site displays upon release. |
| Measurement |
Supports a variety of units, such as product weight, cosmetic volume, and box size. |
| Number |
Supports up to 13 digits for integers and up to 9 digits for decimals. |
| File |
Supports images up to 20MB and videos under 1GB. |
| Reference |
You can reference products, existing pages, or collection data within the site. |
| Text |
Add short single-line text or multi-line text with line breaks. |
| Rich Text |
In addition to line breaks, you can add styles such as headings, bold, italics, and underline. |
| Color |
You can register RGB values and change display colors. |
| Amount |
Register costs related to products, such as shipping fees. |
| Rating |
Set a range and assign a numerical rating. |
| true,false |
Creates a checkbox to select true or false. Frequently used for toggling label displays and similar tasks. |
| URL |
Insert links. |
Check out articles about metaobjects too!
Try implementing metafields
From here, let's use metafields that can actually be set without code and display them on product pages.
1. Select metafields from Settings
In the admin screen, click Settings > Custom Data at the lower left.
Metafields can be set for the following data.
・Product
・Variation
・Collection
・Customer
・Order
・Location
・Page
・Blog
・Blog Post
This time, let's select a product.
Then, click the "Add definition" button or the "Add definition" button. *Either one is fine.
2. Enter the metafield definition.
In the admin screen, click Settings > Custom Data at the lower left.
For the definition, you will set the following four items.
・Name
This is the name of the metafield. Using a clear and descriptive name makes it easier to manage.
・Namespace and key
This is the unique ID for the metafield, used by the system to identify it. It's best to use related English letters and numbers. *Once set, it cannot be changed.
・Description
You can enter a description for the metafield. This text is not usually displayed on the site, so it's okay to leave it blank.
・Select a type
Select the content type of the metafield as explained above.
This time, set the name to "Release Date", the namespace and key to ".release", and leave the description blank.
Then, select "Date" as the content type. If you are not setting any specific rules, minimum and maximum settings are not required.
Finally, click Save, and the metafield will be saved.
3. Enter the value of the metafield for the product.
Once the metafield is saved, the metafield item will be added to the bottom of the product registration screen in product management.
This time, set and save the date as September 1, 2024.
4. Output the value of the metafield dynamically.
On the management screen, click Online Store > Theme > Customize.
From the search menu at the top, click Products > Default Product.
Insert the text and enter up to "Release Date:".
Insert the dynamic source on the right sidebar > Click the release date.
When you do this, the value for the release date you set in the metafield, “September 1, 2024,” is dynamically output.
Let's build a store that's easy to manage with metafields.
Isn't it a strength of Shopify that you can create such dynamic displays this easily?
You can easily set this up on other pages and content types as well, so try customizing your store in various ways!
At GO RIDE Inc., we support custom fields and also offer even more functional and manageable full customization options.
If you're a business owner considering EC operations and have many requests but aren't sure if they're feasible, feel free to contact us here.
Thank you for reading until the end!
2023/03/03 Published
2024/09/10 Updated
We also recommend the following articles!
Popular articles
