Open Store Free
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket

Kalles Shopify Theme

home/Documentation/Kalles Shopify Theme
Popular Search:Import demo, Update theme, Custom color
  • 1. GREETING
  • 2. CHANGELOGS
  • 3. INSTALLATION
    • How to get Instagram Access Token
    • How to update the theme?
    • Import Demo
    • Recommend Shopify App
    • Some Basic Before Using Theme
    • Upload Theme
  • 4. RECOMMEND APPS
    • Facebook Messenger - Live Chat
    • Flash Search
    • Growave
    • LayoutHub
    • Loox
    • ReCharge
    • Ryviu
    • Slider Revolution 6
  • 5. UPDATE THEME
    • How to update the theme between versions 3.x.x
    • What is new in version 3.0
  • 6. PRODUCT PAGE
    • Advance Product Type
    • Back in stock notification (Notify me form)
    • Brand Image (Vendor Image)
    • Configure Metafield on Kalles 3.x - supported OS 2.0
    • Configure Product 3D, AR models
    • Configure Size Guides for Products on Kalles ver 3.x.x
    • Configure Submenu Labels and Custom Product Labels
    • Configure the notice: "Will not ship until..." for Pre-order product
    • Configure variant images for product in Shopify dashboard
    • Configure variant on the Product page
    • Frequently Bought Together
    • Product Description sidebar with Collapsible tabs
    • Product Summary option
      • Configure Product Summary - Blocks Content
      • Configure Product Summary - Settings
    • Use the Custom HTML with Metafields in the Description Product tab
  • 7. COLLECTION PAGE
    • Filter by Product Options
    • Filter by Tags
  • 8. THEME SETTINGS
    • Cart & Search Widgets
    • Checkout
    • Collection Page
    • Custom CSS, JS
    • Favicon
    • General Settings
    • Group Variants Image
    • Header
    • Header Configuration
    • Language, Currency
    • Layout
    • Logo Header
    • Other settings
    • Product Item Settings
    • Product Page Settings
    • Recommendation Pop-up Add to Cart
    • Social Media
    • Style and color
    • Typography
  • 9. THEME SECTIONS
    • About us
    • Banner
    • Banner Custom
    • Banner Custom 2
    • Collection Banner
    • Collection Grid
    • Collection List
    • Collection list
    • Collection List Manual
    • Collection List Packery
    • Collection Slider
    • Custom HTML
    • Custom Liquid
    • Custom Section
    • Custom Section 2
    • Daily Deal Of The Day
    • Gallery
    • Image with text
    • Image With Text Overlay
    • Packery Collection
    • Packery Collection Manually
    • Promo Text
    • Rich text
    • Search Section
    • Shipping Text Simple
    • Store Information
    • Tab Collection
    • Tab Collection Slider
    • Testimonials
    • Text Columns with Images
  • 10. SECTIONS
    • Age verification popup
    • Blog Manual
    • Blog Posts
    • Brand List
    • Configure Product Quickview
    • Cookie Law Info
    • Exit Product Popup
    • Footer bottom
    • Footer top
    • Mobile menu & Mobile Categories
    • Newsletter popup
    • Sales popup
    • Shopping Cart Widget
    • Sticky Toolbar Mobile
    • Text Columns with Images 2
  • 11. BLOG
    • Default Blog
    • Filter by Tag for Blog
    • Portfolio Configuration
  • 12. THEME FAQs
    • Change currency format on Checkout Page
    • Countdown timer & Design images option for all sections
    • Custom HTML code for Size Guide page
    • How to change title "Product" to other words on "Collections/All" page?
    • How to configure custom colors swatch for your store?
    • How to enable/ disable Terms & Condition checkbox on Cart sidebar/ Cart Page?
    • How to enable/disable "Shipping calculated at checkout"?
    • Trick, Helpful Custom CSS
  • 13. MAIN NAVIGATION
    • Configure Megamenu on Kalles 3.x (New Type block)
  • 14. VARIANT CONFIGURATION
    • Configure different ID for Product Variants
    • Configure product Grouped
    • Configure Variant on loop & Collection page
  • 15. PAGES
    • About us

Configure Metafield on Kalles 3.x - supported OS 2.0

1964 views 4 December 3, 2021 Updated on January 24, 2022 Kate

In the Kalles theme version 3.x.x – support Shopify 2.0, you need to follow the instruction below to know how to configure Custom Metafield for your Products.

To configure the Metafield for your products, please go to Dashboard Settings > Metafields option. Kindly follow my video below:

Click the Add definition button to start configuring Metafield.

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 meta.countdown key here. This is a required option, if you do not add meta.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 my 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 my GIF image below:

Then you will see the Metafield Countdown shows on Loop as the image below:

But first, in the Collection Page/ Collection Section, you need to turn on the Countdown Timer feature as the image below:

1.3. Show Metafields Countdown on Product Page

In addition, the Metafield Countdown also can show on the product page. Please follow my GIF image below to know how to add the Metafields Countdown to the Products in Customize.

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 – 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.

2.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 Metafield External/ Affiliate.
  • Namespace and key: You have to add external.title_is key here. This is a required option, if you do not add external.title_is 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 Text > 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 my image below:

2.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 Metafield External/ Affiliate.
  • Namespace and key: You have to add external.link_is key here. This is a required option, if you do not add external.link_is 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 my image below:

After configuring done, we will get 2 Metafield definitions as the image below:

2.3. Configure Metafields External/ Affiliate in Product.

After configuring the Metafields External/ Affiliate in Settings > Metafields, 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 show like the image below:

3. Product Metafield – Short Description

3.1. Add Metafield – Short Description

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Short Description here. Example: I added the field Name is Metafield Short Description
  • Namespace and key: You can add any keyword here. Example: You can add the key: meta.shortdes or any words you want.
  • Description: You can add the Description for the Metafield Short Description 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. This is a required option, if you do not choose the content type is Single line text here, the Metafield Short Description cannot work correctly.

You guys can configure following my image below:

3.2. Configure Metafields Short Description in Product

After configuring the Metafields Short Description in Settings > Metafields, next step, you need to go to Products > Open the Product that you wanna add the Metafields Short Description. Kindly follow my GIF image below to know how to add the Metafield Short Description for the product.

3.3. Show Metafield Short Description in Customize > Product Page

Next step, you need to go to Online Store > Customize > Product Page > Default Product > Change Preview product to the product that you just configured the Metafield Short Description. You also can follow my GIF image below to know how to choose to show Metafield Short Description in Customize.

4. Product Metafield – Delivery Start/ Delivery End

4.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 meta.estimateStartDate key here. This is a required option, if you do not add meta.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 my image below:

4.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 meta.estimateEndDate key here. This is a required option, if you do not add meta.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.

Actually, you guys can configure following my image below:

After configuring done, we will get 2 Metafield definitions as the image below:

4.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.

4.4. Show Metafields Delivery in Customize > Product Page

You can follow my image below:

Then you will see the Metafields Delivery End/ Delivery Start show as the image below:

5. Product Metafield – Custom Tab

5.1. Add Metafield Custom Tab – Title

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Custom Tab – Title here. Example: I added the field Name is: Metafield Custom Title.
  • Namespace and key: You can add any keyword here. Example: You can add the key: meta.customtitle or any words you want.
  • Description: You can add the Description for the Metafield Custom Tab – Title 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. This is a required option, if you do not choose the content type is Text > Single Line Tex here, the Metafield Custom Tab cannot work correctly.

Actually, you guys can configure following my image below:

5.2. Add Metafield Custom Tab – Page

You need to configure some options below:

  • Name: You can add the name that you wanna show for the Metafield Custom Tab – Page here. Example: I added the field Name is: Metafield Custom Tab.
  • Namespace and key: You can add any keyword here. Example: You can add the key: meta.customtab or any words you want.
  • Description: You can add the Description for the Metafield Custom Tab – Page 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 Reference > Page. This is a required option, if you do not choose the content type is Reference > Page here, the Metafield Custom Tab cannot work correctly.

Actually, you guys can configure following my image below:

After configuring done, we will get 2 Metafield definitions as the image below:

5.3. Configure Metafields Custom Tab in Product

After configuring the Metafields Custom Tab in Settings > Metafields, next step, you need to go to Products > Open the Product that you wanna add the Metafields Custom Tab. Kindly follow my GIF image below to know how to add the Metafield Custom Tab for the product.

5.4. Show Metafields Custom Tab in Customize > Product Page

You can follow my image below:

NOTE: If you don’t want show Metafield contents above for some products, please do not configure the metafield option in Products as the image below:

Was this helpful?

4 Yes  No
Copyright 2021 the4.co. All Rights Reserved.
Popular Search:Import demo, Update theme, Custom color