• Topic 主题 トピック Topic Topic
  • Sign in

Guide to Using Metafields Feature

 

The Metafields feature enables you to store additional fields in the SHOPLINE admin panel, allowing for customization of store appearance and functionality. With Metafields, you can implement personalized configurations or various display effects on store design and product pages, such as:

  • Adding different user manuals for multiple products on the product detail page
  • Adding different discount information on different Collections
  • Adding different material descriptions, washing instructions, etc. for clothing products
  • Adding Carat weight display information for jewelry products
  • Adding different shipping notices for different products

 

In This Article

 


 

Overview of Metafields Usage

Module selection: Each metafield is specific to a particular module, so before using metafields, you must identify the module for which you want to create them. Currently, Metafields supports the following modules: Product, Product variants, Product category, Page, Customers, Blog, Blog category, and Order.

Steps: 

  1. Enter basic information for the metafield.
  2. Assign values to the metafield in your store’s SHOPLINE admin panel.
  3. Insert dynamic sources in the page editor or insert call codes in the SHOPLINE Layout Engine.

 


 

Introduction to Metafields

Metafield Composition

Entering the basic information of metafields. A metafield is composed of the following information: Field Name / OwnerResource / Namespace / Key / Description, and dataType.

  • Field Name: The name of the metafield. For example: The material of the product.
  • OwnerResource: The type of resource to which the metafield belongs, also known as the “OwnerResource Type”. For example: Products, Custom pages, etc.
  • OwnerID: The ID of the OwnerResource to which the metafield belongs. For example: The ID of Product A is 1605898661.
  • Namespace: A container for a group of metafields. Grouping metafields by namespace helps prevent conflicts between metafields with the same key name for different merchants. For example: my_fields.
  • Key: The name of the metafield, used to reference a specific metafield, serving as a code identifier for the metafield. For example: materials.
  • dataType: The type of data stored in the metafield, such as Single-line text, url, Whole number, etc.
  • Description: Descriptive information defining the metafield, helping you enter the correct value when assigning values. For example: Input the material information for the jewelry.
  • Value: The data to be stored in the metafield. For example: 925 silver.

Metafield Data Types

The following are the data types available for the Metafield feature:

Data Type Subclass Whether the value list is supported Features Use Cases
Text Single-line text Yes Supports single-line plain text input. Add shipping notices for your products.
Multi-line text Yes Supports multi-line plain text input. Add a product ingredient table for your product.
Color None Yes Supports RGB values in the #RRGGBB format. Add a background color to your page.
Json None No Supports raw JSON data for advanced use cases. Add custom modules to your store pages.
Number Whole number Yes Supports only whole number input. Add a specific page count info for a book product.
Decimal Yes Supports whole number + decimal input. Add carat information for jewelry on the product detail page.
URL None Yes Supports adding HTTP, HTTPS, and mailto: Add a URL link to your product detail page.

Date and Time


 

Date Yes Supports date values in the ISO 8601 format without a time zone. Add product expiration date, order delivery date, or customer birth date. Example: 2022-05-28.
Date and Time Yes Supports date values in the ISO 8601 format and time values in UTC time. 2022-01-01T12:30:00
True or False None No Boolean type, creates a checkbox to select whether the condition is true or false. Add whether an option is available, for example, whether a product can be engraved. Example: true.

Measurement


 

 

Weight Yes Supports whole number and decimal values. Weight is measured in metric or imperial units, such as kg, g, lb, oz.

Add the weight of a product or ingredient, for example, the grams of sugar.

Example: {"value":3.0,"unit":"oz"}.

Size Yes Supports whole number and decimal values. Size is measured in metric or imperial units. mm,cm,m,inch,foot,code

Size: Add the height of a packaging box or the length of a product, for example, the length of a scarf.

Example: {\"value\":2.0,\"unit\":\"in\"}.

Volume Yes Supports whole number and decimal values. Volume is measured in metric or imperial units with a single value and a volume unit. Valid unit values: ml, cl, l, m3(cubic meter), us_fl_oz, us_pt, us_qt, us_gal, imp_fl_oz, imp_pt, imp_qt, imp_gal.

Volume: Add the volume capacity of a water cup.

Example:{\"value\":1.0,\"unit\":\"us_fl_oz\"}.

Ratings None Yes Supports configuring ratings or the star rating.

Add a user rating or star rating for a product.

Example: {\"value\":\"5\"}.

Reference


 

 

 

 

Products Yes Supports referencing a product in your online store.

Set featured products to be displayed on Product pages or Product collection pages in your online store.

Example: gid://shopline/Product/160589866.

Product variants Yes Supports referencing a product variant in your online store. Set other clothing products with the same color to be displayed on Product pages in your online store. Example: gid://shopline/ProductVariant/1805951613.
Categories Yes Supports referencing a category in your online store. Example: gid://shopline/collections/1225615767.
Pages Yes Supports referencing a Custom page in your online store.

Insert a Policy page or detailed care instructions for a product in your online store.

Example: gid://shopline/Page/59592784.

Document Yes

Images: Refer to the store’s document library or upload images in JPG, JPEG, PNG, or GIF formats with a size of up to 10MB.

 

PDFs: Refer to the store’s document library or upload PDF files with a size of up to 10MB.

gid://shopline/MediaImage/59301914

 

gid://shopline/GenericFile/596207872

Money None No A numerical amount with a currency code matching the store’s currency. {\"amount\":\"2\",\"currency_code\":\"USD\"}

 


 

Creating Metafields

The following will be an example of creating metafields for the product module.

  1. Open the SHOPLINE admin panel, and go to Settings > Metafields.
    3.4.png
  2. Select the module for the metafield you want to create. Currently, you can create metafields for the following modules: Product / Product category / Product variants / Page / Customers / Blog / Blog category / Order. In this process, we will choose the Product module for creating metafields. 
    3.2.png
  3. Click Add fields.
    3.3.png
  4. Fill in the details and click Add once finished.
    3.4.png
  • Field name: Used to identify the metafield in the SHOPLINE admin panel, for example, Color.
  • Namespace and Key: The unique identifiers for the metafield. You can use namespaces to group similar metafields, but each namespace and key must be unique. For example, “custom.color”.
  • Description (optional): Provides descriptive information, such as the values to be entered for the metafield.
  • dataType: The type of data the metafield will store, such as text, document, or URL. Configuration of single or multiple dataTypes is supported.
  1. The creation is completed.
    3.5.png

After the metafield is created, you can assign values to the metafield.

 


 

Assigning Values to Metafields

  1. Select the module you want to assign values to. In the previous process, we created a metafield for the product module. Therefore, we will go to the Product page in the SHOPLINE admin panel to assign values. Choose the specific product you want to assign values to. In this example, we will select the first product and go to the detail page.
    4.1.png
  2. At the bottom of the page, locate the Metafields module and select the metafield for assigning values. The type of value you can input depends on the data type of the metafield.
    5.2.png

Complete the process of assigning values to metafields.

 


 

Configuring Metafields in Theme Design

Inserting Metafield Dynamic Sources in the Editor

Please refer to the specific operating instructions: Metafields | Configuring Metafields in Theme Design.

Inserting Call Codes in the Layout Engine

After creating and assigning values to metafields, you can find the corresponding call code for the fields in the SHOPLINE admin panel under Settings > Metafields. Copying this code allows you to apply it in the Layout Engine online code editor to meet your customization needs.

4.2.png

Note: To access the online code editor, please contact SHOPLINE’s online customer service or website consultants.

 


 

Recommended Practices

Extending Fields Independently for Flexible Customization of Product Detail Pages

A well-crafted product detail page plays a crucial role in guiding customers toward a purchasing decision. In the fiercely competitive landscape of cross-border e-commerce, the devil often lies in the details. By showcasing unique and relevant information on their product detail pages, sellers not only earn the trust and goodwill of potential customers but also establish a distinctive competitive edge, enabling them to outshine their rivals.

For instance, consider a scenario where a merchant wishes to include washing instructions for a product. By creating an extended field specifically for washing information, customers can easily access these details on the product detail page. This not only enhances their confidence and trust in the product but also reduces the likelihood of returns resulting from washing-related mistakes.

Aside from washing instructions, merchants have the flexibility to include additional details like material composition, origin, and size on the product detail page using metafields as required.

Implementing Personalized Feature Requirements through Simple Code Customization

In addition to flexibly displaying more information, metafields can also be utilized to customize personalized feature requirements tailored to specific business scenarios. This can effectively mitigate the technical costs and barriers that merchants encounter when customizing their stores. 

For instance, implementing TAB switching for product descriptions, adding a section for downloading related materials, or integrating a related product recommendation section.

Tab switching for product descriptions

Sometimes, the product detail page may need to present a wealth of information. However, if all this information is cluttered onto the page, it can overwhelm customers, making it challenging for them to find what they need promptly. This can lead to a subpar shopping experience and potential customer dissatisfaction.

To address this issue, merchants can utilize a tab-switching template to categorize and organize information effectively. This template allows merchants to present various categories of information within a single content box, enabling customers to navigate through different tabs to access the desired information. This approach ensures that the product detail page remains comprehensive while maintaining a visually appealing layout.

Previously, implementing such a feature required merchants to invest additional resources in hiring technical personnel for development, which was inconvenient. However, with the Metafields management tool, merchants can now independently create new extended fields and easily integrate a basic tab-switching template by copying and pasting the code. This simplifies the process of setting up a product description tab-switching template and displaying it on the product detail page.

Adding a download section for related materials

Not all information can be conveniently displayed directly on the product detail page. Some extensive material descriptions, such as installation manuals and material composition details, are better presented to customers in the form of documents.

With metafields, merchants can easily add download links for relevant materials to their products. This allows customers to click on the links and download the documents for local viewing, ensuring they have access to comprehensive information about the products.

Adding a Related Product Recommendation Section

Data shows that incorporating related product recommendations on individual product detail pages not only effectively increases customers' browsing time on the page but also enhances the average transaction value of the store.

Previously, merchants required specific plugins to implement related product recommendations. However, with the Metafields management tools, merchants can easily create a related product recommendation module anytime, anywhere.

In addition to allowing merchants to create extended fields for resources such as products, categories, customers, orders, blogs, pages, and stores to store specific information, metafields can also facilitate data transmission and interaction with other e-commerce systems (CRM/IMS/ERP) through the Admin API. This enables Shopline stores to integrate more seamlessly with other systems, allowing merchants to conveniently manage and view various data.

Have more questions? Submit a request

Comments