Metafields

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. How to create a metafield in Shopify

1.1. Add the Metafield definitions

From the Shopify Admin > Settings > Metafields and metaobjects. You can add the metafield definitions here.

Then click the Add Definition button:

For example, I wanna configure a metafield for Product Delivery time. The metafield definitions have the 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.
• Select content type button: Click here to choose a type for the Metafield content that you wanna use.

For example, I choose content type: Single line text

Then, in Type setting, you can choose:

• One value: choose this option for a single value
• List of values: choose this option for a list of values you want to insert

• Validation (optional): This option allows you to configure the limitations of the content type that you pick. For example, with Text, we can configure maximum/ minimum length and regular expression.

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

1.2. Adding values to metafields

Go to Shopify Admin > Products > All Products > Select a certain product that you want to display in the metafields content.
For example: Select the “Leather Watch” product.

Open the “Leather Watch” product > Scroll to the Product Metafields section. You can add the value to the definition that you have just created > Click the Save button. For example, I set the delivery time for this product as 3-5 business days.

2. How to show a metafield on the Product page?

In the EComposer app, create/edit a product template and add a Metafield element to the position you want:

Note: On that product page, you should change the preview product to Leather Watch

Next step, select the metafield that you want to show there:

3. How to adjust the Metafield Label and Metafield appearance

In the Content tab, you can configure how the metafield label appears on your page in the Label category.

• Show label: Enable this option to display the metafield’s label. For example, if your metafield label is Delivery time, it will appear alongside the metafield value.

• Label text: Enter custom text to display instead of the metafield’s default label.

• Label position: Choose Left or Right to set the label’s position relative to the metafield value.

You can also customize how the metafield element behaves when its value is empty using the When empty setting. Choose one of the following options:

• Hide element: Hide the metafield element when no value is available.
• Show fallback text: Display alternative text when the metafield value is empty.

4. Design tab

4.1. How to Style the Metafield Text

• Alignment: Set the alignment of the Metafield text.
• Typography: Customize the typography of the Metafield text, including font size, font weight, font family, line height, text transform, and more.
• Text Color: Set the color of the Metafield text to match your design.
• Spacing: Adjust the margins and padding around the Metafield text.

You can style the Label text by adjusting Alignment, Typography, and Text Color settings.

4.2. How to style the button in Metafield

When you select a file-type metafield, such as Media, Video, Image, or File, you can choose Button as the display style.

The settings in this category allow you to customize the button’s appearance, including Typography, Box Shadow, and Spacing. You can also adjust Width, Height, Text Color, Background, Border, and Border Radius in the Normal and Hover states.

4.3. How to style Image Metafield

You can adjust the Width, Max Width, Height, and Image fit of the image. In the Normal and Hover tabs, you can adjust the Box Shadow, Border, and Border Radius in both states.