# Metafields

## Product Metafields

{% hint style="warning" %}
**IMPORTANT!**

&#x20;If you use the theme version 4.12.0 or higher, you can customize Metafileds in your *Shopify Admin -> Settings -> Metafields and metaobjects -> Products*. Check this [<mark style="color:blue;">**video tutorial**</mark>](https://www.youtube.com/watch?v=u7xcBE9MVUY\&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df\&index=35).

&#x20;If you use lower theme versions, please consider installing an app, e.g., a free Metafields Guru app. Check the [<mark style="color:blue;">**video tutorial**</mark>](https://www.youtube.com/watch?v=7qQNZudcstY\&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df\&index=33) for more information.
{% endhint %}

## Shopify Admin

{% hint style="danger" %}
**IMPORTANT!** No capital letters are allowed in the namespace and key fields!
{% endhint %}

&#x20; You can add meta fields to products from your Shopify Admin.

{% hint style="warning" %}
**Please note** that if you previously customized meta fields via the app, this method will not work. You need to remove all meta fields in the app before starting configurations in your Shopify Admin.
{% endhint %}

&#x20;**How to add Metafields to your products from Shopify Admin:**

* Add a Metafield format in *Shopify Admin -> Settings -> Metafields and metaobjects -> Products:*

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F1Tpm5SoesVaIhSNAz2mp%2Fmetafields_create.png?alt=media&#x26;token=6a76c2ac-594f-409f-8a16-9296bcea8d66" alt=""><figcaption></figcaption></figure>

* Press “Add definition” and fill in the fields. Save changes.
* In *Shopify Admin -> Products -> Metafileds*, add the value to the field. Save the changes.

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FPvRPSYagFHXPaqDmqAXV%2Fmetafields_products.png?alt=media&#x26;token=edb3439e-c638-413e-a698-bb6e341fcd49" alt=""><figcaption></figcaption></figure>

### Labels

&#x20;You can add two labels via Metafields: **“New”** and **“Hot”**.

Step 1

&#x20; Enable labels “New” and “Hot” in *Theme settings ->*\
&#x20;*->* [*<mark style="color:blue;">**Product -> Collection Page**</mark>*](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page#labels) (for Collection pages/Collections)\
&#x20;*->* [*<mark style="color:blue;">**Product Page & Quick View**</mark>* ](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#show-label-new)(for Product pages)

Step 2

&#x20;Meta field format for a label **“New”**:

* Name = e.g., **New label**
* Namespace and key = **labels.new**
* Description = Your text
* Select content type -> Text -> Single line text
* Value = **true**

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FHBtNwqmCT9cXAq5f26Ef%2Fmetafield_new%20label.png?alt=media&#x26;token=d4a8407f-c668-4922-8d7c-d28f0d0709a5" alt="" width="563"><figcaption></figcaption></figure>

Step 3

&#x20;Add the value “true” to the corresponding field for each product in *Shopify Admin -> Products -> Metafileds:*

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FIMdUn4YvKGdoS67kR9A7%2Fproduct%20label_metafield.png?alt=media&#x26;token=6d2ac411-7f20-484c-ace0-0b80377f9086" alt=""><figcaption></figcaption></figure>

Meta field format for a label **“Hot”**:

* Name = e.g., **Hot label**
* Namespace and key = **labels.hot**
* Description = Your text
* Select content type -> Text -> Single line text
* Value = **true**

### **Sale Countdown**

&#x20; The Sale Countdown will be shown for the product on the Collection page and the Quick View pop-up, on the Product page.

Step 1

&#x20;Set the “Compare at price” in *Shopify Admin -> Products*

Step 2

Collection pages:

&#x20;Enable the option “Show countdown” in *Theme settings ->* [*<mark style="color:blue;">**Product -> Collection Page**</mark>*](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page#elements) (for Collection pages/Collections).

Product pages:

&#x20;Add the [<mark style="color:blue;">**Time countdown**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/products/product-page/theme-blocks#time-countdown) block in *Products -> Product page.*

Step 3

&#x20;Add the Metafield format:

* Name = e.g. **Sale Countdown**
* Namespace and key = **countdown.date**
* Description = Your text
* Select content type -> Text -> Single line text

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FmL8aLrf02MlWlvFaydlC%2Fmetafield_sale%20countdown.png?alt=media&#x26;token=7ae498cf-8530-43d1-a2fa-58063e8c953e" alt="" width="563"><figcaption></figcaption></figure>

* Value = e.g., 11 November 2021 20:30 or 2021-11-11 20:30 (date string)

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FYCeP9mNfEVvVeVgRhEK4%2Fcountdown_metafield.png?alt=media&#x26;token=6ce50b2e-1386-4392-8b2a-1c1e69553b71" alt=""><figcaption></figcaption></figure>

### Size guide

&#x20;Create a unique “Size guide” for each product via Metafields.

Step 1

&#x20;Enable an option “Size guide” in *Theme settings -> Product Page & Quick View ->* [*<mark style="color:blue;">Popups</mark>* ](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#popups)(for Product pages). Then, add the [<mark style="color:blue;">**Popups**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/products/product-page/theme-blocks#popups) block in *Products -> Product page*.

Step 2

&#x20;Meta field format:

* Name = e.g. **Size Guide**
* Namespace and key = **sizeguide.html**
* Description = Your text
* Select content type -> Text -> Single line text

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FNz9xyxmlJr4cUdGPNhVW%2Fmetafield_size%20guide.png?alt=media&#x26;token=5bf6a86c-408d-4f47-85c3-b08ce437f566" alt="" width="563"><figcaption></figcaption></figure>

* Value = your HTML code

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FtcZ3St3HkMHNc3k2gy0C%2Fsize%20guide_metafields.png?alt=media&#x26;token=d733ea4f-816c-4e68-90b9-b68f0ce8fdad" alt=""><figcaption></figcaption></figure>

You may find the example HTML code from the demo store [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#show-button-size-guide).

### Hide 'Size Guide' popup per product

&#x20;If you have already added the Meta field format for “Size guide”:

* Name = e.g. **Size Guide**
* Namespace and key = **sizeguide.html**

&#x20;You may simply paste the value for a product:

* Value = **hide**

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FLoe6DXaq2fQFmQ4igJlc%2Fhide%20size%20guide_metafields.png?alt=media&#x26;token=a9c3a209-29f5-4c9d-b780-ab5b30990282" alt=""><figcaption></figcaption></figure>

### Custom Tab

You can create four unique tabs. Use the **tab**, **tab1**, **tab2,** or **tab3** namespace for each tab. Add two meta fields for the tab.

&#x20;Meta field format #1:

* Name = e.g. **Custom Tab**
* Namespace and key = **tab.title (tab1.title, tab2.title, tab3.title)**
* Description = Your text
* Select content type -> Text -> Single line text

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FfqprvNcZozD2CpyzCKHI%2Fmetafield_custom%20tab%20title.png?alt=media&#x26;token=ea1d8c90-fbdb-4dfe-935d-06c7a789b14e" alt="" width="563"><figcaption></figcaption></figure>

* Value = your title for the tab

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FpqggocAfIsqvESDP6nKp%2Fcustom%20tab_metafield.png?alt=media&#x26;token=4bdda76d-0f80-4198-8eeb-ca109e777265" alt=""><figcaption></figcaption></figure>

&#x20;Meta field format #2:

* Name = e.g. **Custom Tab**
* Namespace and key = **tab.content**
* Description = Your text
* Select content type -> Text -> Single line text

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2Fd2NNS1wrFwwPp23gsZ0U%2Fmetafield_custom%20tab.png?alt=media&#x26;token=35735615-b0f8-4330-8211-9612995627d8" alt="" width="563"><figcaption></figcaption></figure>

* Value = your HTML code

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FDu1J5rkma5BUNgRuEqpU%2Fcustom%20tab%20content_metafield.png?alt=media&#x26;token=cb14b968-0710-4495-ab68-546ea0253252" alt=""><figcaption></figcaption></figure>

## Metafields Guru app

&#x20;Now let's take a deep look at how to customize each meta field in the app:

### Labels

&#x20;You can add two labels via Metafields: **“New”** and **“Hot”**.

Step 1

&#x20; Enable labels “New” and “Hot” in *Theme settings ->*\
&#x20;*->* [*<mark style="color:blue;">**Product -> Collection Page**</mark>*](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page#labels) (for Collection pages/Collections)\
&#x20;*->* [*<mark style="color:blue;">**Product Page & Quick View**</mark>* ](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#show-label-new)(for Product pages)

Step 2

&#x20;The Meta field format for a label **“New”**:

* Type = **Single line text**
* Namespace = **labels**
* Key = **new**
* Value = **true**

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mk1mxYBed8-UU8uxNzv%2F-Mk1osGeI3L3I4Z2cHMr%2Flabels_app.png?alt=media\&token=253d075e-13b5-4192-9528-1514a6ce46f8)

&#x20;The Meta field format for the label **“Hot”**:

* Type = **Single line text**
* Namespace = **labels**
* Key = **hot**
* Value = **true**

### Sale Countdown

&#x20;The Sale Countdown will be shown for the product on the Collection page and the Quick View popup, on the Product page.

Step 1

&#x20;Set the “Compare at price” in *Shopify Admin -> Products*

Step 2

Collection pages:

&#x20;Enable the option “Show countdown” in *Theme settings ->* [*<mark style="color:blue;">**Product -> Collection Page**</mark>*](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page#elements) (for Collection pages/Collections).

Product pages:

&#x20;Add the [<mark style="color:blue;">**Time countdown**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/products/product-page/theme-blocks#time-countdown) block in *Products -> Product page.*

Step 3

&#x20;Add the Meta field format:

* Type = **Single line text**
* Namespace = **countdown**
* Key = **date**
* Value = **2021-12-15 22:17:15** (date string)

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mk1mxYBed8-UU8uxNzv%2F-Mk1qDLIHj1bQPjAHRV_%2Fsalecountdown_app.png?alt=media\&token=f72e5e22-e35e-4312-8317-e4a95ce5f4ae)

### Size guide

&#x20;Create the unique “Size guide” for each product via Metafields.

Step 1

Enable an option “Size guide” in *Theme settings -> Product Page & Quick View ->* [*<mark style="color:blue;">Popups</mark>* ](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#popups)(for Product pages). Then, add the [<mark style="color:blue;">**Popups**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/products/product-page/theme-blocks#popups) block in *Products -> Product page*.

Step 2

&#x20;Meta field format:

* Type = **Single line text**
* Namespace = **sizeguide**
* Key = **html**
* Value = **\[ Your HTML code ]**

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mk0prBHl25vkuros8mM%2F-Mk1mr4T7JhyasD5mmkm%2Fsizeguide_app.png?alt=media\&token=002a01f9-c1b1-41e7-abd7-ae08f4d80616)

&#x20;You may find the example HTML code from the demo store [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/product-page-and-quick-view#show-button-size-guide).

### Hide 'Size Guide' popup per product

&#x20;If your store has different types of products and you may need to hide the size guide popup for some products.

&#x20;You may configure it with the 'hide' value.

&#x20;Meta field format:

* Type = **Single line text**
* Namespace = **sizeguide**
* Key = **html**
* Value = **hide**

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mk1mxYBed8-UU8uxNzv%2F-Mk1nf5JlfSrfFGCYSd2%2Fsizeguide_hide_app.png?alt=media\&token=b7268c70-a10c-498e-b171-6fe13e60777e)

### Custom Tab

&#x20;If you want to add a unique Tab for each product, you can achieve it via Metafields.

&#x20;You can create four unique tabs. Use the **tab**, **tab1**, **tab2,** or **tab3** namespace per each tab.

&#x20;Add two meta fields for the tab.

&#x20;Meta field format #1:

* Type = **Single line text**
* Namespace = **tab** (tab1, tab2, tab3)
* Key = **content**
* Value = **\[Your HTML code]**

&#x20;Meta field format #2:

* Type = **Single line text**
* Namespace = **tab** (tab1, tab2, tab3)
* Key = **title**
* Value = **Tab title string**

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mk1qhFwDZ7ryl_vA1B7%2F-Mk1rkVsjx6HFu9G6rv-%2Fcustom%20tab_app.png?alt=media\&token=2171b1de-61c1-4554-aee3-7daa3bf86519)
