> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/~/changes/ya8CSeFxwPyu94dBt1WL/product-page/demo-and-settings-data.md).

# 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/hTL2ZjizuJkpvMAmN5V4">/files/hTL2ZjizuJkpvMAmN5V4</a></td></tr><tr><td>Layout 02</td><td><a href="/files/MlISnC354KGaBs0Hr20b">/files/MlISnC354KGaBs0Hr20b</a></td></tr><tr><td>Layout 03</td><td><a href="/files/Qdio5M0RDNnM4whDGJQt">/files/Qdio5M0RDNnM4whDGJQt</a></td></tr><tr><td>Layout 04</td><td><a href="/files/svxu8CWO45TujpKZ6blM">/files/svxu8CWO45TujpKZ6blM</a></td></tr><tr><td>Layout 05</td><td><a href="/files/WqNN6gEBTqpdIEn3ChEw">/files/WqNN6gEBTqpdIEn3ChEw</a></td></tr><tr><td>Layout 06</td><td><a href="/files/G1XaKzdoalVCoBmHeXG2">/files/G1XaKzdoalVCoBmHeXG2</a></td></tr><tr><td>Layout 07</td><td><a href="/files/sIiccoWyupVAbNOBslvQ">/files/sIiccoWyupVAbNOBslvQ</a></td></tr><tr><td>Layout 08</td><td><a href="/files/Z3Wd02S6UbVRwA49R0Yg">/files/Z3Wd02S6UbVRwA49R0Yg</a></td></tr><tr><td>Layout 09</td><td><a href="/files/9en7w2Eq8wW18Qtpv9V3">/files/9en7w2Eq8wW18Qtpv9V3</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;

{% 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.