> For the complete documentation index, see [llms.txt](https://docs.shoppego.my/tutorials/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shoppego.my/tutorials/ms/online-store/metafield/product-metafield.md).

# Product Metafield

Metafield adalah **secebis code** yang mudah untuk menampilkan data yang boleh digunakan pada products dan juga pages.\
\
Perbincangan untuk Metafields adalah panjang, untuk tutorial ini adalah lebih kepada **built in Metafield** yang telah ditanamkan pada :

* Theme **Solaris**
* Theme **Hartamas**.
* Theme **Tampin**.

Lihat contoh untuk built in **Metafield** untuk **custom label.**

Lihat label **"Fast Selling"** berwarna oren tersebut merepakan built in custom label yang boleh digunakan pada kedai online masing-masing.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-ab9dc6e6f2887f824d713dbf07f0dafae54a4038%2F-MGqrx949dwAqD_49_vz.png?alt=media)

## Penetapan Product Metafield

1. Log masuk ke dashboard Shoppego dan klik pada **Online store.**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-70c4a33377466661b7d9ad083aec0c73abcda6de%2FVCvdwwBNMP2Wl4iZzvCi.png?alt=media)

2. Kemudian klik pada **Metafields**.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-bad01dd54b257152b2f8e41670c835ac93a96039%2FxhRd6GFDD3e1l0KTyHu3.jpg?alt=media)

3. Kemudian klik pada **products.**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-b69070ca8a4de94342bb404d46413e9b8c204693%2F-MkeNPTllxhz3jirQvUr.jpg?alt=media)

4. Pilih nama produk yang anda ingin paparkan custom label dan klik pada nama produk tersebut.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-3df185da611f4ac52f698c7135afbfd137984ca6%2F-MkeNg30lzZBMfkZtJKL.jpg?alt=media)

5. Seterusnya klik butang **Add Metafield**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-0396b8397a43f19ec5160c7d75b6694c3243de89%2F-MkePGZ6fKwzsVRgCjvD.jpg?alt=media)

## Tambah Metafield

6. Isikan maklumat pada ruangan Key dan Namespace sama seperti gambar di bawah, iaitu :
   * **Key :** custom
   * **Namespace** : label
   * **Value Type** : String
   * **Value** : **Baru Sampai** atau mengikut kreativiti anda.
7. Seterusnya klik butang **Save.**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-66eac648741a9531b33ff2f2034b825192cf05d9%2F-MkeQYhRbm8U-6qWHyta.jpg?alt=media)

Kembali pada store front anda dan lihat hasilnya pada homepage, sebuah label **Baru Sampai** akan terpapar pada produk yang anda telah tetapkan.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-9068fd04a83600f9227d56d625cf814b3e729278%2F-MGqsSTaNH1tyGeeH85B.png?alt=media)

**Custom label** ini boleh digunakan untuk semua produk.

## Maklumat Tambahan

* Hanya **satu label sahaja** boleh diletakkan pada **satu produk**.

## Perubahan Warna Label Produk Metafield

Untuk **ubah warna label produk bagi&#x20;**<mark style="color:blue;">**Themes**</mark>, boleh pergi :

<mark style="color:blue;">**Solaris**</mark>**:** Dashboard Overview -> Online Stores -> Installed Themes -> Customize -> **Homepage Settings ->Custom Label Color.**

<mark style="color:blue;">**Hartamas**</mark>**&#x20;:** Dashboard Overview -> Online Stores -> Installed Themes -> Customize -> **General Styling -> Label Color.**

<mark style="color:blue;">**Tampin**</mark>**&#x20;:** Dashboard Overview -> Online Stores -> Installed Themes -> Customize -> **Homepage Settings ->Custom Label Color.**

{% hint style="info" %}
\*\*<mark style="color:red;">**Perhatian**</mark> : Jika perubahan tidak berlaku, anda boleh cuba dengan **clear-kan cache browser** anda dan **restart browser** anda.
{% endhint %}

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-ddc73ba1a82c80fb3a8160528a1a9b36d40eb432%2FkJd97fx1DDEYN3BQ9EJl.jpg?alt=media" alt=""><figcaption></figcaption></figure>

Hasilnya adalah seperti dibawah :

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-e27264858730f3f9eb15f67f0bca7fcf2c831540%2Fu6f7fBSui5HBnJzcQ8se.png?alt=media" alt=""><figcaption></figcaption></figure>