Metafields

Author: Katie 166 views

Metafields allows you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn’t usually captured in the Shopify admin. You can use Metafields for internal tracking, or to display specialized information on your online store in a variety of ways.

For example, a candle seller might want to display a burn time for candles on their product pages, while a grocery store might want to display a product expiration date for canned goods. Other examples of specialized information include the following:

  • Part numbers
  • Color swatches
  • Launch dates
  • Related products
  • Blog post summaries
  • Files for download

1. Add the Metafield definitions

From Shopify backend > Settings > Metafield You can add the metafield definitions here.
Shopify backend > Settings > Metafields option
Then choose Product > Add Definition:
Metafield > Choose Products
Products > Click Add definition

For example, I wanna configure Metafield for Product Delivery time, the Metafield definitions have some following parts:

  • Name: Add the name for the Metafield here.
  • Namespace and key: The namespace and key create a unique identifier for your metafield. They’re separated by a ., and can only contain letters, numbers, underscores (_), and hyphens (-). You can use a namespace to group similar metafields together, but each namespace and key combination must be unique
  • Description (optional): The description is displayed on the Shopify admin page where you add values for your metafield.
  • Expose this metafield to Storefront API requests checkbox: Tick on this checkbox to give read access to Apps, storefronts, or anything using the Storefront API.
  • Select content type button: Click here to choose a type for the Metafield content that you wanna use.

For example, I choose content type: Text

Choose Text type
  • Accept list of values checkbox: Tick on this checkbox to enable List of values Metafield.
  • Content type (Value): The type and format of information that’s contained in your metafield. For example, plain text, URL, or integer. Learn more about the possible values here
Text type > Single line text
  • Validation (optional): That option allows you to configure the limitation of the content type that you pick. For example, with Text, we can configure maximum/ minimum length and regular expression.
Validation option

After configuring done, make sure that you press the Save button to save all the changes.

2. Adding values to metafields

Go to Shopify Admin > Products > All Products > Select a certain product that you want to display on the metafields content. For example: Select the “Barcelona Mini Clock” product.
Products > All Products > Choose a product to configure Metafield

Open the “Barcelona Mini Clock” product > Scroll to the bottom of page, you will see Matefield section appearing here.

Metafield option > Delivery Time

Set a value for the definition that you have just created > Click Save button. For example, I set the delivery time for this product is 3-5 business days.

View the video below to know how to configure Metafield in the Shopify backend:

3. How to show metafield on Product page?

Go to Ecomposer backend > Edit or Create a Product page > Go to Product page:
Choose the product that you just configured Metafield

Note: On that product page, you must choose to show the exact productBarcelona Mini Clockat thestep 2.

On left sidebar,Element tab > Single Products elements > Drag the Metafield element to the position you want.

Next step, go back to the Shopify backend > Settings > Metafield option > Products metafiled definition > Copy the value below:

Copy this Namespace and key
Then paste it to Metafield element > Namespace and Key option, the Delivery time will show up the value you set immediately. Put the Namespace And Key in “{{ }}.
For example: {{Namespace And Key}}
Metafield element shows the value that you set in Product backend

4. Design tab

  • Alignment: Allow you to align the title of the Newsletter input. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
  • Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Metafield text here.
  • Text Color: Configure the color for the Metafield text here.
  • Text Shadow: Allow you to add a shadow for the Metafield text by changing the Blur, Horizontal, Vertical, etc…
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Metafield text and other elements here. This option is available for desktop, tablet, and mobile devices.

You can view the video below to know how to configure the Metafield element in the Product page – EComposer admin:

Leave a Comment

On this page