# Demo & Settings Data

To apply the product page layout you want for your store

{% hint style="success" %}
**Steps:**

1. Please click the file to download the corresponding "json" of the layout you want.
2. Download the selected preset.
3. Open downloaded file in the text editor.
4. **SELECT ALL** and **COPY**.
5. From your Shopify admin, go to **Themes -> Actions -> Edit Code**.
6. Find folder **Templates** -> Open file **product.json -> SELECT ALL** and **DELETE. PASTE** the copied preset from the external file.
{% endhint %}

<figure><img src="https://themes.templatescoder.com/belliza/documentation/images/screenshort-143.jpg" alt=""><figcaption></figcaption></figure>

### **1. Presets For Product**

<table><thead><tr><th>Product</th><th>Json (with .txt format)</th><th data-hidden></th></tr></thead><tbody><tr><td><a href="https://labacha-demo.myshopify.com/products/beanie-in-chocolate-brown/?_ab=0&#x26;preview_theme_id=175116157229"><mark style="color:orange;">Product Layout 01 - Default</mark></a><mark style="color:orange;">.</mark></td><td><a href="https://themes.templatescoder.com/labacha/documentation/data-file/product-layout-1.json">product-default.json</a></td><td></td></tr><tr><td><a href="https://labacha-demo.myshopify.com/products/fit-printed-hoodie/?_ab=0&#x26;preview_theme_id=175116878125"><mark style="color:orange;">Product Layout 02 - Full Width</mark></a><mark style="color:orange;">.</mark></td><td><a href="https://themes.templatescoder.com/labacha/documentation/data-file/product-layout-2.json">product-full-width.json</a></td><td></td></tr><tr><td><a href="https://labacha-demo.myshopify.com/products/fit-printed-hoodie/?_ab=0&#x26;preview_theme_id=175116583213"><mark style="color:orange;">Product Layout 03 - Left Thumb</mark></a><mark style="color:orange;">.</mark></td><td><a href="https://themes.templatescoder.com/labacha/documentation/data-file/product-layout-3.json">product-left-thumb.json</a></td><td></td></tr><tr><td><a href="https://labacha-demo.myshopify.com/products/fit-printed-hoodie/?_ab=0&#x26;preview_theme_id=175116648749"><mark style="color:orange;">Product Layout 04 - Right Thumb</mark></a><mark style="color:orange;">.</mark></td><td><a href="https://themes.templatescoder.com/labacha/documentation/data-file/product-layout-4.json">product-right-thumb.json</a></td><td></td></tr><tr><td><a href="https://labacha-demo.myshopify.com/products/fit-printed-hoodie/?_ab=0&#x26;preview_theme_id=175116779821"><mark style="color:orange;">Product Layout 05 - Grid View</mark></a></td><td><a href="https://themes.templatescoder.com/labacha/documentation/data-file/product-layout-5.json">product-grid.json</a></td><td></td></tr><tr><td><a href="https://labacha-demo.myshopify.com/products/sweatshirt-dress/?_ab=0&#x26;preview_theme_id=175116157229"><mark style="color:orange;">Product Layout 06 - Gallery View</mark></a></td><td><a href="https://themes.templatescoder.com/labacha/documentation/data-file/product-layout-6.json">product-gallery.json</a></td><td></td></tr></tbody></table>



### 2. Choose Product Page Layout in Theme Editor

* From your **Theme Editor** -> **Theme Settings** -> **Multiple Layouts** -> Choose product page you want here:

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/bzRGzJfj0ruT5ohDNi5R/Untitled-1.jpg" alt=""><figcaption></figcaption></figure>

After that, follow this instruction to set up in editor of product page layout which can show up the same design from the page you see on demo.

#### **1. Product Grid View**

From the editor panel of the Product Information:

* For Main Image, select Layout: Style 3.
* For Thumbnails, choose Layout: No Thumbnail.

<div><figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/O87xKMBpISrjPxtC7zXq/Untitled-1.jpg" alt=""><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/C2P2lUpX2YjTcIH2ERi2/Untitled-1.jpg" alt=""><figcaption></figcaption></figure></div>

#### 2. **Product Gallery**

From the editor panel of the Product Information:

* Under Thumbnail, choose Layout: No Thumbnail.

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/C2P2lUpX2YjTcIH2ERi2/Untitled-1.jpg" alt=""><figcaption></figcaption></figure>

#### 3. **Product Left Thumbs**

From the editor panel of the Product Information:

* Under Thumbnail, choose Layout: Layout 1(Left Thumbnail).

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/Iu0hFYnsZDi93Q46iA8o/Untitled-1.jpg" alt=""><figcaption></figcaption></figure>

#### 4. **Product Right Thumbs**

From the editor panel of the Product Information:

* Under Thumbnail, choose Layout: Layout 2(Right Thumbnail).

<figure><img src="https://content.gitbook.com/content/99MlOzvyJDAhsvR2FLtv/blobs/3lSNQUbRyemWavEAZQAY/Untitled-1.jpg" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This method is difficult to follow than the first method because Labacha has many product pages, we write theme settings with lots of options to choose. You need to set up correctly to show the same page design as our demo.
{% endhint %}
