Metafields

Metafields are a flexible way for you to add information to a specific object like the product, or collection. You can add descriptions for different products, specifications, release dates, size guides, etc. In this article, we will guide you to build Metafields for the Gecko theme.

1. Enable the option to configure the Metafield

To active the Metafield, please click on the Theme Settings > General Settings > Admin tool button > Enable Metafields Editor.

When you enable it, select Admin Tools Settings on the sidebar> Edit Metafields with your product.

2. Configure Metafields

We support clients in many fields. To better understand the uses we will introduce each field.

2.1. Short description

Enter the short description for each product that you want. You can fill the text or HTML code here:

2.2. Size guide

This option will help you configure the size guide for your product.

Metafield for Size guide has 2 different sections: Image size guide and HTML size guide.

To show configure size guide in the Metafield product, you need to add image or HTML (create the page with HTML) in the Create List Page Or Create List Page.

Size Guide image

Step 01: Go to Settings > Files then upload your size guide image. Another way, you can upload your images directly.

Step 02: Go to Setting Tools > Click Edit Metafield with your products.

Step 03: Look at the "Size guide image" then select it. You can select the image for each different product and then click Update Metafields for each product.

Step 4: Go to Product Page > Product Summary > Select Size Chart, Delivery, Ask block.

You change the Size chart type with Image.

Result:

HTML size chart

Similar to the Size guide Image, you will also follow the same steps. However, you will create a page in the Online Store > Page > select Show HTML.

Create List Page will select the page size guides you want. Please follow the video below:

2.3. Countdown

You can add a countdown timer for your product. It is a feature of Product Upsell Features.

To show the countdown timer on the Product page, you need to add the Countdown Timer Block in the Product Summary.

Then you set up the countdown timer in the Metafields like the video guideline:

2.4. External / Affiliate

If you wanna add an External/ Affiliate button for each product, you can configure it to use the MetafieldExternal/ Affiliate for your products.

Follow this guideline below:

2.5. Delivery Time

This option allows you to add a time date from Delivery Start to Delivery End of products. To show it please add the Delivery time block.

Then you will configure the date from Delivery Start to Delivery End with metafield for each product.

Result:

About how to calculate the Delivery Time, you can refer here.

2.6. Custom Tab

This option allows you to add the Metafield Tab for the product. To show it, you need to add Custom Tab block into Tab Descriptions.

Note: The Metafield Tab block that you add must match the Custom tab metafield.

This is video guideline to configure Custom Tab Metafield:

3. Apply new data for selected products

You can select the products you want to config Metafield by clicking on the Add Selected Products.

Note:

  • If you click "Override this field data for all products", it will update your data, which means all products you have chosen will use new data.

  • If you leave it blank, so the products which already have config Metafield before won't apply new data, the old data still show.

[Private offer] EComposer Partner Plan

Exclusively for Gecko 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 Gecko 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 “Gecko+EComposer” to upgrade for free.

Cheers, The4.

Last updated