> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-customize-metafields.md).

# How to customize Metafields

Metafields help to display custom information on the storefront that isn't supported by the available settings in the Shopify admin.

For more information about Metafields, the functionality of Metafields, and the requirements for displaying custom data in your store, read [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/custom-data/metafields/).

{% embed url="<https://youtu.be/TvQFdfMqb7M>" %}

## Countdown timer

With Metafields, you can display the Countdown timer on product and collection pages. Read below how to set up the required settings in your admin for the following to display on your online store:

#### **Step 1**

Go to your *Shopify admin -> Settings -> Metafields and metaobjects*, and press the **"Products"** tab to add a metafield definition specifically for products.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8fVeOVWCRDa8pwaHW2pW%2Fsettings_meta.png?alt=media&amp;token=5399261c-00e4-41eb-b0a6-28059c0d8a9d" alt=""><figcaption></figcaption></figure>

#### **Step 2**

Then, hit **"Add definition"**.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F1RA5gGOZ3TdEwcYxqbvK%2Fmetafields_add.png?alt=media&amp;token=582596ec-4938-42bd-a040-78568a309b1b" alt=""><figcaption></figcaption></figure>

#### **Step 3**

In the dashboard, edit the fields. Here is an example of the settings:

* Name - **Time Countdown**
* Namespace and key - **custom.time\_countdown** (generated automatically)
* Description - **Sale countdown** (optional)
* Type - **Date and time (One value)**

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FgKaFPoxYmPCzVOnTyd9i%2Fmetafields_time%20countdown.png?alt=media&amp;token=047b6fc4-fffd-46b4-a121-2551821af660" alt=""><figcaption></figcaption></figure>

**Save the settings.**

#### **Step 4**

Now you can choose the product on which the Countdown timer will be displayed.

For this, go to Products in your Shopify admin, and select a product.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FwWrPHDtVlO47jZOtEvRG%2Fadmin_products.png?alt=media&amp;token=192d4eb9-6039-477b-a6fc-1ba55fcdde53" alt=""><figcaption></figcaption></figure>

#### **Step 5**

On the product page, scroll down to the "Metafields" section. Here you can view the available metafield to edit for the product. In the "Time Countdown" field, enter an expiration date and time.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtD64vszvqHRDcVTGZ1b8%2Fproduct_metafields%20countdown.png?alt=media&amp;token=a5e9957d-c544-40b7-bfb0-5db5c825ca81" alt=""><figcaption></figcaption></figure>

#### **Step 6**

Once you have completed the settings in your admin, click the **"Edit theme"** button in *Shopify admin -> Online Store* to open the Theme Editor.

* After that, select the product template in the top drop-down of the Theme Editor. And add the "[<mark style="color:blue;">Countdown timer</mark>](/unicorn-shopify-theme/page-categories/products/product-details/countdown-timer.md)" block to the product page.
* To add the Countdown timer on the product card of the collection listing, activate the **"Show countdown timer"** option in *Theme settings -> Countdown timer ->* [*<mark style="color:blue;">Product cards</mark>*](/unicorn-shopify-theme/theme-settings/countdown-timer.md#product-cards)*.*

## Custom badges

Use the Metafields to create custom badges in your admin.

The theme includes settings to display eight built-in badges and four custom badges that can be displayed using images. On the following help page, we provide detailed instructions on setting up your store to display custom icons using both methods.

#### **Step 1**

To build a new badge, go to your *Shopify admin -> Settings -> Metafields and metaobjects*, and press the **"Products"** tab to add a metafield definition specifically for products.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8fVeOVWCRDa8pwaHW2pW%2Fsettings_meta.png?alt=media&amp;token=5399261c-00e4-41eb-b0a6-28059c0d8a9d" alt=""><figcaption></figcaption></figure>

#### **Step 2**

Then, hit **"Add definition"**.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F1RA5gGOZ3TdEwcYxqbvK%2Fmetafields_add.png?alt=media&amp;token=582596ec-4938-42bd-a040-78568a309b1b" alt=""><figcaption></figcaption></figure>

#### **Step 3**

#### **Theme badges**

The theme uses a unique **Namespace and key** to display badges on the storefront. So, make sure to create a definition for each custom badge using the metafield identity.

<table data-full-width="false"><thead><tr><th width="97">Badge</th><th width="288">Name</th><th>Namespace and key</th></tr></thead><tbody><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fkbi3lZ6PV2xePDSwBMUW%2Fimage.png?alt=media&amp;token=3ec65882-eb7f-42d6-998a-9b765da057a1" alt="" data-size="original"></td><td>custom_badge_buy_3_get_1_free</td><td>custom.custom_badge_buy_3_get_1_free</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FE8yf7nNDs8w5316Cj06n%2Fimage.png?alt=media&amp;token=c8bf2686-6e3b-46d5-94ec-92f9ee34f2ad" alt="" data-size="original"></td><td>custom_badge_back_in_stock</td><td>custom.custom_badge_back_in_stock</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F27HmHDf9y8Yb1LCuqVx6%2Fimage.png?alt=media&amp;token=d5b2822d-81a7-4d68-945a-482e12966db5" alt="" data-size="original"></td><td>custom_badge_bestseller</td><td>custom.custom_badge_bestseller</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FSL1AkIB09CA0NMs9Qqjj%2Fimage.png?alt=media&amp;token=b23d3338-0f2c-42d7-8429-bd7d154e0b28" alt="" data-size="original"></td><td>custom_badge_buy_1_get_1_free</td><td>custom.custom_badge_buy_1_get_1_free</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FhFWu9lKbMsMw7rGUtkI7%2Fimage.png?alt=media&amp;token=26cb0f2e-ce4b-4735-9405-91061d623476" alt="" data-size="original"></td><td>custom_badge_buy_2_get_1_free</td><td>custom.custom_badge_buy_2_get_1_free</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F4S3EQVj5J70mZkFvOwqt%2Fimage.png?alt=media&amp;token=1525b1fb-a595-46b6-9399-5c01e63a4ef9" alt="" data-size="original"></td><td>custom_badge_coming_soon</td><td>custom.custom_badge_coming_soon</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FqMcrZvr1UvavnO2tPEn0%2Fimage.png?alt=media&amp;token=a62a7f20-1932-46ef-9cf5-35d93a0a61f8" alt="" data-size="original"></td><td>custom_badge_free_shipping</td><td>custom.custom_badge_free_shipping</td></tr><tr><td><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtklsPWtrDArNDZTSoIDc%2Fimage.png?alt=media&amp;token=5c5bce5d-fcea-4ec8-a90b-984a3931b273" alt="" data-size="original"></td><td>custom_badge_outlet</td><td>custom.custom_badge_outlet</td></tr></tbody></table>

In the dashboard, edit the fields. Here is an example of the settings:

* Name - **custom\_badge\_outlet**
* Namespace and key - **custom.custom\_badge\_outlet** (generated automatically)
* Description - optional
* Type - **True or false**

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FkVArsbxLHj4AkKRv3yvY%2Fmetafields_custom%20badge.png?alt=media&amp;token=a2761578-babb-4c7e-8067-05323a68e7aa" alt=""><figcaption></figcaption></figure>

**Save the settings.**

#### Badges from images

To display badges as images, build metafield definitions with either "True or false" or "File" types. The theme includes settings to create four custom badges displayed from images. If you need more than one badge, add a metafield definition for each one.

Example 1:

Check the example settings for the boolean type:

* Name - **custom\_badge\_1** (custom\_badge\_2, custom\_badge\_3, custom\_badge\_4)
* Namespace and key - **custom.custom\_badge\_1** (custom.custom\_badge\_2, custom.custom\_badge\_3, custom.custom\_badge\_4) - generated automatically
* Description - optional
* Type - **True or false**

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FendSN2acz8tqsEmqgzWf%2Fmetafields_badge_1.png?alt=media&amp;token=482ff21b-1318-4d9b-ad0a-57d506cfe9fd" alt=""><figcaption></figcaption></figure>

Example 2:

Here are the example settings of the metafield definition to display an image from a file:

* Name - **custom\_badge\_1** (custom\_badge\_2, custom\_badge\_3, custom\_badge\_4)
* Namespace and key - **custom.custom\_badge\_1** (custom.custom\_badge\_2, custom.custom\_badge\_3, custom.custom\_badge\_4) - generated automatically
* Description - optional
* Type - **File - One file**
* Accept specific file types - **Images**

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F0ejBu9OgHFS5eLQj1las%2Fmetafields_badge_4.png?alt=media&amp;token=4bf73160-5da4-4abc-b8f9-fdb6a8cc3e42" alt=""><figcaption></figcaption></figure>

#### **Step 4**

Now, assign custom badges to products. For this, go to Products in your Shopify admin and select a product.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FwWrPHDtVlO47jZOtEvRG%2Fadmin_products.png?alt=media&amp;token=192d4eb9-6039-477b-a6fc-1ba55fcdde53" alt=""><figcaption></figcaption></figure>

#### **Step 5**

On the product page, scroll down to the "Metafields" section. Here you can view the available metafields to edit for the product. Hit each metafield to link a badge.

#### **Theme badges**

To display badges on the storefront, hit the "True" value in the corresponding fields. You can display all custom badges you have created or only pick the ones you need for a specific product.

In our example, all the badges have been used for the product.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FcErn5GOviJKH1BE5uuDp%2Fadmin_theme%20badges.png?alt=media&amp;token=11b31828-3f99-4bd0-9a94-627613b90746" alt=""><figcaption></figcaption></figure>

#### Badges from images

Example 1:

If you use the Boolean type to display images as badges, select "True". This method displays an image assigned in the Theme Editor. Go to the Theme Editor, *Theme settings -> Badges ->* [*<mark style="color:blue;">Custom badges</mark>*](/unicorn-shopify-theme/theme-settings/badges.md#custom-badges) to link images.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRKTzoJ68eIJdTjWqfBLv%2Feditor_custom%20badge.png?alt=media&amp;token=a563a904-54a6-4a39-98b4-56f2934d1421" alt=""><figcaption></figcaption></figure>

Example 2:

To display a badge using a custom image for a specific product, add the desired file to the corresponding field. In our example, we used the "custom\_badge\_4" metafield.

View the example settings below.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FHt0WwHuNey2a7ISi3yFl%2Fadmin_image%20badges.png?alt=media&amp;token=5587d65b-999d-4409-b817-51b50fc68863" alt=""><figcaption></figcaption></figure>

Press the **"Save"** button to accept the settings for a product.