How to configure Product Metafield?
To configure the Metafield for your products, please go to Dashboard Settings > Metafields option. Kindly follow the video below:
1. Product Metafield – Countdown
If you wanna add a Countdown option for each product – with a different time, you can configure to use the Metafield Countdown for your products.
1.1. Add Metafield Countdown
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield countdown here. Example: I added the field Name is Product Metafield Countdown.
Namespace and key: You have to add theme.countdown key here. This is a required option, if you do not add theme.countdown key here, the Metafield countdown cannot work.
Description: You can add the Description for the Metafield countdown here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is Date and time. This is a required option, if you do not choose the content type is Date and time here, the Metafield countdown cannot work correctly.
Actually, you guys can configure following image below:
Click Save button and then you will get the option below:
1.2. Configure Metafields Countdown in Product
After configuring the Metafields Countdown in Settings, next step, you need to go to Products > Open the product that you wanna add the Metafields Countdown.
You guys can follow the video below:
1.3. Show Metafields Countdown on the Product Page
Please follow my video below to know how to add the Metafields Countdown in Customize > Products page.
With all the rest products that you do not configure the Metafield Countdown, the countdown Timer still show if you configure the Countdown Timer Loop in a day in the Product Page > Countdown Timer option:
And choose All products here:
If you only wanna show the Countdown Timer option on the Product page with the Product that has been configured Metafield Countdown, you should remove the Time Settings here:
2. Product Metafield - Frequently Bought Together
You can learn more this article.
3. Product Metafield - Product Grouped (Advanced Products)
You can learn more this article.
4. Product Metafield - External/ Affiliate
If you wanna add an External/ Affiliate button for each product, you can configure to use the Metafield - External/ Affiliate for your products.
4.1. Add Metafield title External/ Affiliate:
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield External/ Affiliate here. Example: I added the field Name is External Title.
Namespace and key: You have to add theme.external_title key here. This is a required option if you do not add theme.external_title key here, the Metafield External/ Affiliate cannot work.
Description: You can add the Description for the Metafield External/ Affiliate here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is Single line text. This is a required option, if you do not choose the content type is Single line text here, the Metafield External/ Affiliate cannot work correctly.
Actually, you guys can configure following the image below:
4.2. Add Metafield button Link External/ Affiliate:
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield External/ Affiliate here. Example: I added the field Name is External Link.
Namespace and key: You have to add theme.external_link key here. This is a required option, if you do not add theme.external_link key here, the Metafield External/ Affiliate cannot work.
Description: You can add the Description for the Metafield External/ Affiliate here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is URL. This is a required option, if you do not choose the content type is URL here, the Metafield External/ Affiliate cannot work correctly.
You guys can configure following the image below:
After configuring done, we will get 2 Metafield definitions as the image below:
4.3. Configure Metafields External/ Affiliate in Product.
After configuring the Metafields External/ Affiliate in Settings > Metafields, the next step, you need to go to Products > Open the Product that you wanna add the Metafields External/ Affiliate button. Kindly follow my GIF image below to know how to add the Metafield External/ Affiliate for the product.
And when you view the product, you will see the External/ Affiliate button shown as the image below:
5. Product Metafield - Delivery Start/ Delivery End
5.1. Add Metafield - Delivery Start Date
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield countdown here. Example: I added the field Name is Estimate Start Date.
Namespace and key: You have to add theme.estimateStartDate key here. This is a required option, if you do not add theme.estimateStartDate key here, the Metafield Delivery cannot work.
Description: You can add the Description for the Metafield Delivery here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is Number > Integer. This is a required option, if you do not choose the content type is Number > Integer here, the Metafield Delivery cannot work correctly.
Actually, you guys can configure following the image below:
5.2. Add Metafield - Delivery End Date
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield countdown here. Example: I added the field Name is Estimate End Date.
Namespace and key: You have to add theme.estimateEndDate key here. This is a required option, if you do not add theme.estimateEndDate key here, the Metafield Delivery cannot work.
Description: You can add the Description for the Metafield Delivery here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is Number > Integer. This is a required option, if you do not choose the content type is Number > Integer here, the Metafield Delivery cannot work correctly.
After configuring, we will get 2 Metafield definitions as the image below:
5.3. Configure Metafields Delivery in Product
After configuring the Metafields Delivery in Settings > Metafields, next step, you need to go to Products > Open the Product that you wanna add the Metafields Delivery. Kindly follow my GIF image below to know how to add the Metafield Delivery Start/ End for the product.
5.4. Show Metafields Delivery in Customize > Product Page
You can follow my image below:
Example: Today is October 11, 2022 and I set the start date for delivery as the next 2 days, it's October 13. And the End date of delivery is the next 4 days, it's October 15, 2022.
6. Product Metafield - Custom Badge
6.1. Add Product Metafield Custom Badge
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield Custom Badge here. Example: I added the field Name is Custom Badge.
Namespace and key: You have to add theme.custom_badge key here. This is a required option, if you do not add theme.custom_badge key here, the Metafield Custom Badge cannot work.
Description: You can add the Description for the Metafield Custom Badge here. In addition, this is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is Text > Single line text or Multi-line text. This is a required option, if you do not choose the content type is Text, the metafield Custom badge cannot work correctly.
Then click Save button to save all changes, we will get the metafield definition as the image below:
6.2. Configure Metafield in Products
In Shopify backend, go to Products > All Products option and open the product that you wanna add the Product Custom Badge. In the product, please scroll down to the bottom of the page, you will see the Product Custom Badge metafield option. Kindly follow the video below:
6.3. Configure Metafield Custom Badge in Theme Customize
In Shopify backend, click the Customize button to go to Theme Settings > Products > Scroll to Badges option > Tick on the Use custom badge checkbox > The custom badge will show as the image below:
7. Product Metafield - Custom Image
This feature shows the additional image(not product image) on a section of product page.
7.1. Add Product Metafield
You need to configure some options below:
Name: You can add the name that you wanna show for the Metafield Custom Image here. Example: I added the field Name is Custom Image.
Namespace and key: the namespace must be "theme.", and you can add any key here. For example: theme.custom_image
Description: This is not a required option, so you can choose to add a Description or not.
Select Content Type: Please choose the content type is File. This is a required option, if not, the metafield cannot work correctly.
7.2. Configure Metafield in Products
In Shopify backend > Products > open the product that you wanna add the Product Custom image. In the product, please scroll down to the bottom of the page, you will see the Custom Image metafield option. Then choose the image you wanna show for this product.
7.3. Configure Custom Image in Theme Customize
Go to Theme > Customize > Add section you want to show the image. For example: image with text section.
Click on "Connect dynamic source" > choose Custom Image
Then the image will show on the product page
[Private offer] Unsen Partner Plan
Exclusively for Unsen users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
FREE 100% EComposer Standard plan for 6 months (save you $114)
Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
Create advanced sections & add to Unsen with ease
Save up to 50 pages/sections
100+ professional, stunning pre-designed templates
Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Unsen+EComposer” to upgrade for free.
Cheers, The4.
Last updated