> 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="/files/9pARrr7HEozyIhET5zW5" 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="/files/DTlucOFIR3VE9lrTcggh" 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="/files/KgLW0zSjHS72XJ9QQ8br" alt=""><figcaption><p>Tampilan Grid 2x2<br></p></figcaption></figure>

   <figure><img src="/files/mOmpaexW6EbFZ9BdXrU9" 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