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

Metafields in Theme Design

To enable you to independently expand fields and flexibly customize product details and the product list page, SHOPLINE has upgraded the Metafields functionality module. Through visual configuration in theme design, this upgrade facilitates personalized requirements, significantly enhancing store decoration flexibility, scalability, and customization capabilities, while effectively reducing the technical costs associated with store customization.

Note: This feature is an optimized version of Anti-crawler settings. If you have entered anti-crawler pages in Anti-crawler settings, the system will automatically append the corresponding disallow text at the end of the Robots.txt file.

 

In This Article

 


 

Introduction to Metafields

The Metafields functionality module supports you in creating specific extended fields for products and categories, displaying them on the page. You can add text (single-line & multi-line), images, URLs, numbers, colors, JSON, reference products, etc., to summarize notes for customers, provide usage instructions, showcase more product details, and help your store gain more favor and trust from customers.

 

Functional Effects

Using a women's clothing store as an example, for its product detail page, it is necessary to display clothing information, including some standardized introductory details such as the main image of the clothing, fabric material, detailed color display, washing recommendations, downloadable files, and design specifications. You can utilize Metafields to create standardized procedures. After configuring the information uniformly, you can automatically generate introductory details for different products, reducing the complexity of the configuration process.

  1. Adding Metafields to a Product on the Product Management Page.

    FAQ_MetafieldTheme_ProductPage.png

  2. You can add image and text metafields in the Product detail page > Image with text module on the store design page. Once added, each product's corresponding images and descriptive text will be displayed in the Image with text module. 

    d6e6e6a0-3175-4cd9-a424-56407681b088

 


 

Scope of Application

Supported pages and components:

Owned resource Pages Component

Products


 

Product detail page/ Encompasses all default/optional sections within the product detail page, excluding the header/footer and other full-page components.

Homepage/ Product list page/ Custom page

Category page/ Blog/ Blog category/ Cart page/ 404/ Search page

Single product only

Categories


 

Product list page Encompasses all default/optional sections within the product list page, excluding the header/footer and other full-page components.

Homepage/ Product detail page/ Custom page

Category page/ Blogs/ Blog collection/ Cart page, other pagers-404/ Search page

  • Featured products component only
  • Category block for product categories only (excludes settings)

 

Supported themes:

  • Arise Theme
  • Along Theme
  • Impress Theme
  • Brooklyn Theme
  • Blouse Theme

 

Note: Currently, in addition to the above themes, the entry for configuring metafields is only available in the Featured products > Categories-Block component.

 


 

Addable Controls

The dynamic sources that can be added to each control and their metafield settings are associated with the data types. The table below demonstrates the data types supported by each control in the current editor.

Control Name Supported Metafield Data Types Single/Multiple Selection
richtext/textarea

Text: single-line, multi-line text

Number: integer, float

Multiple selection: Only one dynamic source can be chosen each time, but multiple dynamic sources can be added to one input box.
text

Text: single-line

Number: integer, float

Multiple selection
color Color Single selection

url

 

url Single selection
image_picker Reference: File Single selection

page_picker

 

Reference: Custom page Single selection
product_picker Reference: Product Single selection

 


 

Steps

Configuring metafields involves four steps:

  1. Creating Metafields
  2. Assigning Values to Metafields
  3. Selecting Metafields When Decorating the Store According to Requirements
  4. Modifying Metafields

This article provides an example using a women's clothing store for reference.

 

Creating Metafields

  1. Go to the homepage and click Settings > Metafields in the lower left corner.

    ecf542cc-bc5f-45ee-bbf6-5fac23464c95

  2. On the metafields page, you can define metafields for Product, Product category, Product variants, Page, Customers, Blog, Blog category, and Order. Here, we will take Product as an example.

    a1846761-892e-4389-a767-c10ded15f2c6

  3. Click Add fields.

    a267de7a-1002-4084-8560-bde4bf678719

  4. Add product metafield definitions.
  • 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.
  • Data Type: The type of data the metafield will store, such as text, document, or URL. Configuration of single or multiple data types is supported.
  • Access options: You can set up automatically generated collections.

    a063e36c-7974-4b0a-83db-925c27254348

    For instance, Sales Copy, and fill in the namespace, key, and description. Choose its data type; here, select text. Additionally, you can also choose color, document, number, url, weight, size, etc., according to your needs.

    0bd2d66b-9e53-46d6-8f66-623a7c3a7fd4

    After selecting text, a selection box for Single-line text or Multi-line text will appear. Based on your requirements, select Multi-line text, input the content, and click the Add
    button.

    Upon completion of the creation, it automatically returns to the list page, displaying a popup confirming successful creation. The top line of the list shows the newly created metafield Sales Copy, with the No. of field values currently at 0.

    0147735d-7296-4aa6-a734-d249c98c2c28

Assigning Values to Metafields

As per your requirements, you can create multiple metafields for products, such as Detail Image-Color Display, Detail Image-Fabric Display, Sales Copy, and Product Care Guide. After creating the metafields, you need to return to the product management page and fill in the corresponding values for each required product's metafields.

  1. Go to Products > Product details page

  2. Scroll to the bottom of the page where you will see metafield text boxes. Enter the relevant fields or add images, then click Update after filling them in.

    FAQ_MetafieldTheme_ProductMetafields.png

  3. Once completed, click Update at the upper right corner, and repeat the above steps for multiple products.
  4. Return to the metafield management page. The number of field values has changed from 0 to 1 which indicates the number of products for which the Sales Copy metafield has been assigned a value.

    a06ab92d-27b9-4f75-8920-1e21c48e6dad

Selecting Metafields When Decorating the Store According to Requirements

After creating and assigning values to metafields, you can select metafields for unified configuration in store decoration.

  1. Add an Image with text component below the product details to display the main image and fabric information.
  2. Click Image with text component, and click the icon to add the metafield.

    9ef8a460-d768-48eb-a77d-abe3b5bdfa25

  3. For the Image with text
    Choose the title, click on the upper right icon, modify the dynamic source to Product Title, and finally click Save.

    d29ae273-efc4-4f2b-bfc1-d7fbff1b5b3e

  4. Select the text, click on the upper right icon, modify the dynamic source to Sales Copy, and then click Save.

    f1c63648-10e6-4b6c-ac7b-bbe98e6056e6


Modifying Metafields

You can also modify metafields, change their values, and their display method.

  1. Modifying Metafields: Click the lower left of the homepage, go to Settings > Metafields > Product > Product metafields, and click a specific metafield.

    6f0f4521-7db2-4314-84ca-0f5314789b8c

    At this point, only the Field Name and Description can be modified.

    e12e89df-752a-43b2-907e-b23d9171295c

  2. Changing Metafield Values: Go to Products > Product management detail page > Metafields section, click the metafield, directly modify it, and then save the modification.

    93950494-850d-4adb-9fad-bbd3f70fc793

  3. Modifying its Display: Simply click the metafield and choose from Edit value, Change dynamic source, and Delete dynamic source.
  • Edit value: It will redirect to the product management interface where you can directly modify the value of the product metafield.
  • Change dynamic source: You can switch to another metafield.
  • Delete dynamic source: Directly delete, or press the delete key on the keyboard to remove it.

 


 

Practical Suggestion

1. Extending Fields Independently to Flexibly Customize Product Detail Pages

A good product detail page can provide customers with the information they need to make a purchase decision. In the competitive cross-border e-commerce market, details often determine success. If sellers can showcase unique details to customers on their product detail pages, it can also help them gain more customers' goodwill and trust, form a differentiated competitive advantage, and surpass their competitors.

For example, if a merchant wants to add washing info for a product, they can create a washing info extended field for the product. This way, customers can see the washing info reminder on the product detail page, increasing their trust and goodwill towards the product, and reducing the likelihood of returns due to washing mistakes.

In addition to washing info, merchants can add information such as material, origin, and size of a product to the product detail page through metafields as needed.

2. Simple Code Customization: Implementing Personalized Feature Requirements

Note: Developers can proceed to the Metafileds Overview.


In addition to being able to flexibly display more information, metafields can also be used to customize personalized feature requirements based on specific business scenarios. This can effectively reduce the technical costs and technical barriers that merchants face in the process of customizing their stores.

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

  • Tab Switching for Product Descriptions: Sometimes, the product detail page needs to display a lot of information. If all of this information is placed on the product detail page, it can appear cluttered and crowded, making it difficult for customers to find the information they are looking for immediately, resulting in a poor shopping experience and potential customer churn. In such cases, merchants can use a TAB switching template to categorize and organize information, presenting it uniformly within a single content box. Customers can then browse different categories of information by switching tabs. This approach ensures that the information displayed on the product detail page is comprehensive while maintaining visual appeal. Previously, merchants who wanted to add this feature to their pages had to spend extra money to hire technical personnel for development, which was not convenient. With the Metafields management tool, merchants can independently create a new extended field and simply copy and paste the code for a basic TAB switching template. This makes it easy to set up a product description TAB switching template and display it on the product detail page.

  • Adding a Download Section for Related Materials: Not all information can be directly displayed on the product detail page. Some necessary material descriptions, due to their extensive content, are more suitable to be presented to customers in the form of documents, such as installation manuals and material composition descriptions. With metafields, merchants can add download links for relevant materials to the desired products, allowing customers to click and download them for local viewing.

  • Adding a Related Product Recommendation Section: Data indicates that incorporating related product recommendations on individual product detail pages not only effectively increases the browsing time of customers on the page but also enhances the average transaction value of the store. Previously, merchants needed specific plugins to implement related product recommendations. 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