> For the complete documentation index, see [llms.txt](https://help.tribeliopage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.tribeliopage.com/page-builder/product-shop.md).

# Product Shop

Product Shop merupakan komponen untuk menambahkan product yang sudah dibuat pada tribelio.com. Product shop ini bisa membuat tampilan untuk product-product yang sudah kamu buat pada tribelio.com untuk dipasarkan atau ditampilkan pada landing page.

## Tutorial

<figure><img src="https://1695532416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAmjLQ2aX6DHMCbTSBODu%2Fuploads%2FDhwYgnQJEqQemG772R1O%2Fimage.png?alt=media&amp;token=d26475ba-96d1-4e6e-a6c8-4f6a1385b4e6" alt=""><figcaption><p>Product Shop Komponen</p></figcaption></figure>

1. Buat Landing Page atau Edit Landing Page yang telah kamu buat
2. Klik "**Add Component**" di bagian Landing Page Builder
3. Pilih menu "**Commerce**"
4. Klik "**Product Shop**"
5. Pilih "**Product**" untuk mengambil product yang dibuat pada Shop di tribelio.com<br>

   <figure><img src="https://1695532416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAmjLQ2aX6DHMCbTSBODu%2Fuploads%2FZLm3T4Ui0Tkipr2Yvd4R%2Fimage.png?alt=media&amp;token=8367fed1-0e45-407e-826b-9f592ddabae0" alt=""><figcaption><p>Pilih produk</p></figcaption></figure>
6. "**Product**" dapat dipilih hingga maksimal empat buat produk untuk satu komponen
7. Pilih bentuk dari tampilan pada "**Section Type**". bentuk ini berupa column atau grid 2x2<br>

   <figure><img src="https://1695532416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAmjLQ2aX6DHMCbTSBODu%2Fuploads%2FUOMjlTzieOu2H6gZsopw%2Fimage.png?alt=media&amp;token=dc2ff5c2-817f-4d39-bc66-295fd1613b12" alt=""><figcaption><p>Tampilan Grid 2x2<br></p></figcaption></figure>

   <figure><img src="https://1695532416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAmjLQ2aX6DHMCbTSBODu%2Fuploads%2F2IV0g0aO673UnSfjVE5M%2Fimage.png?alt=media&amp;token=4670768d-d068-4266-a12c-1071dbb7bda0" alt=""><figcaption><p>Tampilan Column</p></figcaption></figure>

## Product Shop Setting

1. Untuk menambahkan Background Color, klik menu '**Setting**", aktifkan "**Background Color**" dan pilih warna untuk background komponen kamu
2. Gunakan "**Section** **Title**" untuk mengubah judul dari komponen
3. Gunakan "**Padding Top dan Bottom**" untuk mengatur jarak di bagian atas dan bawah Background