# Demo & Settings Data

To apply the product page layout you want for your store, there are 2 methods to do. 

### 01: Apply Preset data for Product Layouts:

1. Please click the [file to download](#presets-for-product) 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.

![](/files/i3298lv19oyZaY5BaiBY)

## Product Demo

1. [Product Layout 01](https://new-ella-demo.myshopify.com/products/naminos-dementus-a-dincidunto) - Default.
2. [Product Layout 02](https://new-ella-demo.myshopify.com/products/loremous-saliduar-a-cosmopolito-2//?fts=0\&preview_theme_id=123127234650) - Full Width
3. [Product Layout 03](https://new-ella-demo.myshopify.com/products/nulla-dinterdum-miverra-des-lacos-1//?fts=0\&preview_theme_id=123127103578) - Grid View
4. [Product Layout 04](https://new-ella-demo-11.myshopify.com/products/dinterdum-lorem-condimente//?fts=0\&preview_theme_id=123385806899) - Slider
5. [Product Layout 05](https://new-ella-demo.myshopify.com/products/naminos-dementus-a-dincidunto-2) - Gallery
6. [Product Layout 06](https://new-ella-demo.myshopify.com/products/naminos-dementus-a-dincidunto-4) - Left Thumb Image
7. [Product Layout 07](https://new-ella-demo.myshopify.com/products/dinterdum-pretium-condimento) - Right Thumb Image
8. [Product Layout 08](https://new-ella-demo.myshopify.com/products/dinterdum-pretium-condimento-1) - Left Sidebar
9. [Product Layout 09](https://new-ella-demo.myshopify.com/products/dempus-lortis-cosmo-sapiendo-2) - Right Sidebar

## Presets For Product

<table><thead><tr><th>Product</th><th data-type="files">Json (with .txt format)</th></tr></thead><tbody><tr><td>Layout 01</td><td><a href="/files/RHujpRpEX9twMwO7HO52">/files/RHujpRpEX9twMwO7HO52</a></td></tr><tr><td>Layout 02</td><td><a href="/files/tcX3BoBbxjjNliyZ5epg">/files/tcX3BoBbxjjNliyZ5epg</a></td></tr><tr><td>Layout 03</td><td><a href="/files/06vvMUBU6JG0ab0r9axi">/files/06vvMUBU6JG0ab0r9axi</a></td></tr><tr><td>Layout 04</td><td><a href="/files/Kc8opBwp36kgDkKKj6Hh">/files/Kc8opBwp36kgDkKKj6Hh</a></td></tr><tr><td>Layout 05</td><td><a href="/files/4x2m4LkwOnsCEQIGrkh9">/files/4x2m4LkwOnsCEQIGrkh9</a></td></tr><tr><td>Layout 06</td><td><a href="/files/xKzmcuLoL7YZrxZCZX3q">/files/xKzmcuLoL7YZrxZCZX3q</a></td></tr><tr><td>Layout 07</td><td><a href="/files/dA8VFNCrFVWt1DCsGBao">/files/dA8VFNCrFVWt1DCsGBao</a></td></tr><tr><td>Layout 08</td><td><a href="/files/VjIn17vv7gmBD6GQVhgb">/files/VjIn17vv7gmBD6GQVhgb</a></td></tr><tr><td>Layout 09</td><td><a href="/files/1uI7bH6V7o8AD6F1PFWK">/files/1uI7bH6V7o8AD6F1PFWK</a></td></tr></tbody></table>

### 02: Choose Product Page Layout in Theme Editor:

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

<figure><img src="/files/vVLBY7ET3ggqS6WULWL0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/uBdvLFmtN5aj8o2c1eoD" 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.&#x20;

1. **Product Full Width:**

&#x20; From the editor panel of the Product Information:

* Under General, choose Layout: 1770px.
* For Main Image, select Layout: Style 2.
* For Thumbnails, choose Layout: No Thumbnail.
* Under Media, select Portrait.
* For Subtotal, disable Subtotal if desired.
* Under Tabs, choose Popup for Desktop and Mobile.
* In the Share block under Product Information, select Style 3.

<div><figure><img src="/files/uKJNxc5ief5ZO5GKRbg3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TIUTrZGkvGnzhnEyD1jF" alt=""><figcaption></figcaption></figure> <figure><img src="/files/eUrLuy97AUcva19wsQcr" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/5pwpAKuvGMD0sdfVy3Id" alt=""><figcaption></figcaption></figure> <figure><img src="/files/toP2yqGWcnWd6TMfJU5Y" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TYZT4Kke0G41tUmNLHru" alt=""><figcaption></figcaption></figure></div>

2. **Product Grid View**

&#x20; From the editor panel of the Product Information:

* Under General, choose Layout: 1770px.
* For Main Image, select Layout: Style 3.
* For Thumbnails, choose Layout: No Thumbnail.
* Under Media, select Portrait.
* For Subtotal, disable Subtotal if desired.
* Under Tabs, choose Popup for Desktop and Mobile.
* In the Share block under Product Information, select Style 3.

<div><figure><img src="/files/mZ619eCmq03VQFmcrTh0" alt=""><figcaption></figcaption></figure> <figure><img src="/files/3MWeXrQQlKWv13LSe2bS" alt=""><figcaption></figcaption></figure> <figure><img src="/files/kLjmCRbi6mK4lfCVTq5H" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/ZoZRUbVtlMTi0asH8UsB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/yY7FhQ6mgv9uQju4ZT7N" alt=""><figcaption></figcaption></figure> <figure><img src="/files/pxhTRLLEhIb5Q672uR5r" alt=""><figcaption></figcaption></figure></div>

3. **Product Gallery**

&#x20; From the editor panel of the Product Information:

* Under Thumbnail, choose Layout: No Thumbnail.
* Under Tabs, choose Popup for Mobile.

<div><figure><img src="/files/xcOEx0R1j9j9njkfPOVv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/o7gnPbvz8X8Z274SAFrn" alt=""><figcaption></figcaption></figure></div>

4. **Product Left Thumbs**

&#x20; From the editor panel of the Product Information:

* Under Thumbnail, choose Layout: Layout 1(Left Thumbnail).
* Under Tabs, choose Vertical for Desktop and Popup for Mobile.

<div><figure><img src="/files/5rxrSwgujFERD0E7BdIw" alt=""><figcaption></figcaption></figure> <figure><img src="/files/7IUmg1oBtMr6AnF2NZcs" alt=""><figcaption></figcaption></figure></div>

5. **Product Right Thumbs**

&#x20; From the editor panel of the Product Information:

* Under Thumbnail, choose Layout: Layout 2(Right Thumbnail).
* Under Tabs, choose Vertical for Desktop and Popup for Mobile.

<div><figure><img src="/files/CbgEXwynQkTpAQ7HqAwc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/bXL24Q8AGUo8g3H1A0J2" alt=""><figcaption></figcaption></figure></div>

6. **Product Left Sidebar**

&#x20; From the editor panel of the Product Information:

* Under Sidebar, choose 'Show Sidebar' and 'Enable Sticky.' Turn off 'Show Collapsible Block' and select 'Position: Left'.
* Under Tabs, choose Popup for Mobile.
* In the 'Add block' section under Product Information, add blocks for 'Sidebar Categories' and 'Sidebar CMS Image.'

<div><figure><img src="/files/vy3AUJ9i86mjD5EvTzSl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/sx1YJMHjqFJT5VMOfuAf" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/J4ItNA1IAHGPga1B3N17" alt=""><figcaption></figcaption></figure>

7. **Product Right Sidebar**

&#x20; From the editor panel of the Product Information:

* Under Sidebar, choose 'Show Sidebar' and 'Enable Sticky.' Turn off 'Show Collapsible Block' and select 'Position: Right'.
* Under Tabs, choose Popup for Mobile.
* In the 'Add block' section under Product Information, add blocks for 'Sidebar Categories' and 'Sidebar CMS Image.'

<div><figure><img src="/files/n0vmBcKP4JPH0BEzBVHY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/9rDjza2GWqRrgoUHtvq3" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/XtHH0l0zZUBJNo9sAn32" alt=""><figcaption></figcaption></figure>

8. **Product Horizontal Tabs No Sidebar**

&#x20; From the editor panel of the Product Information:

* Under General, choose Layout: Full Width.
* For Main Image, choose Show Arrows for Desktop.
* For Thumbnails, choose Layout: No Thumbnail.
* In the Breadcrumb block under Product Information, choose Center for Alignment.
* Move the blocks in the Product Information section as shown in the last image.

<div><figure><img src="/files/REerR2uVUlfXs9H2HNuB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/HqHmc69toj9o7N98goqB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/xPTRsir7mQ7Kv9BTXQYF" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/BokZx9EtOmTceNbdcBNH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/UcNHzx7MG6vw0fp2AG1C" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
This method is difficult to follow than the first method because Ella 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.&#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/ella-documentation/product-page/demo-and-settings-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.