> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-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-7-documentation/product-page/install-layout.md).

# Install Layout

#### 01: Apply Preset data for Product Layouts: <a href="#id-01-apply-preset-data-for-product-layouts" id="id-01-apply-preset-data-for-product-layouts"></a>

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

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FJC52Sg0k4le7L0nltUyn%2Fimage.png?alt=media&amp;token=7b37e358-b720-468c-b2d2-6260b5c7e610" alt=""><figcaption></figcaption></figure>

6. Find folder **Templates** **->** Open file **product.json** **->** **SELECT ALL** and **DELETE**. **PASTE** the copied preset from the external file.

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F6d7UwsaeD8MhcXXeYzmR%2Fimage.png?alt=media&amp;token=0f21953d-e635-45b4-a851-f722e7c1783a" alt=""><figcaption></figcaption></figure>

### Product Demo <a href="#product-demo" id="product-demo"></a>

1. Product Layout 01 - Default.
2. Product Layout 02 - Full Width
3. Product Layout 03 - Grid View
4. Product Layout 04 - Slider
5. Product Layout 05 - Image Gallery
6. Product Layout 06 - Left Thumb Image
7. Product Layout 07 - Right Thumb Image
8. Product Layout 08 - Step By Step
9. [Product Layout 09 - Full Width 02](https://new-ella-demo-07.myshopify.com/products/urban-skater-gradient-graphic-tee?fts=0\&preview_theme_id=139990237289)

### Presets For Product <a href="#product-demo" id="product-demo"></a>

<table><thead><tr><th>Product Layout Demo</th><th data-type="files">product.json</th></tr></thead><tbody><tr><td>Product Layout 01 - Default</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2Fa2ddziaFG4F609QnHvSm%2Fproduct-default.json?alt=media&amp;token=dd0c180e-14db-4df8-8660-6b404638d732">product-default.json</a></td></tr><tr><td>Product Layout 02 - Full Width</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FJ4RZ8GcIPsGjwEHMZV7g%2Fproduct.product-full-width.json?alt=media&amp;token=9e774dbc-209f-4d0b-8187-84cfa9759961">product.product-full-width.json</a></td></tr><tr><td>Product Layout 03 - Grid View</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FC0yxqsJhwSO8siaCUhEz%2Fproduct.product-grid.json?alt=media&amp;token=683db213-6f8c-468a-a314-a87692588dd6">product.product-grid.json</a></td></tr><tr><td>Product Layout 04 - Slider</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2F87BmflDqn1ShAKnvvcz7%2Fproduct.product-slider.json?alt=media&amp;token=8154baeb-c913-4dcd-91b1-87b1dd2b1355">product.product-slider.json</a></td></tr><tr><td>Product Layout 05 - Image Gallery</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FHju40VLfMHaZCxvSbr1w%2Fproduct.product-image-gallery.json?alt=media&amp;token=720c1790-12bb-4bc6-b1c8-1c3812a6942b">product.product-image-gallery.json</a></td></tr><tr><td>Product Layout 06 - Left Thumb Image</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FeP1RpiaoUrAvN8XW8AjI%2Fproduct.product-left-thumbnails.json?alt=media&amp;token=04d1cae5-7c24-43ce-b5cd-080eb4a164a6">product.product-left-thumbnails.json</a></td></tr><tr><td>Product Layout 07 - Right Thumb Image</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2Flp3bWZ5TnxHxu75XAwgk%2Fproduct.product-right-thumbnails.json?alt=media&amp;token=c14dae75-5821-4890-92ee-e74776afbbc0">product.product-right-thumbnails.json</a></td></tr><tr><td>Product Layout 08 - Step By Step</td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FBdOf8oNLUeZq9eWNc48a%2Fproduct.template-step-by-step.json?alt=media&amp;token=b03c9550-fce2-4c40-8b25-753171302c42">product.template-step-by-step.json</a></td></tr><tr><td><a href="https://new-ella-demo-07.myshopify.com/products/urban-skater-gradient-graphic-tee?fts=0&#x26;preview_theme_id=139990237289">Product Layout 09 - Full Width 02</a></td><td><a href="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2FRZcKhPiSnXjlBiSuumOg%2Fproduct.product-full-width-2.json?alt=media&amp;token=c16ae775-770c-49f2-96d8-25f9adac31de">product.product-full-width-2.json</a></td></tr></tbody></table>

#### **Zero design skills? Create professional mockups, logos & videos for your store in seconds.** [<mark style="color:orange;background-color:blue;">Create... in seconds</mark>](https://1.envato.market/c/3093631/377371/4662)

<figure><img src="https://3432241786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAgyEGjimJ0Z5PS9XDyAH%2Fuploads%2Fl4PkIem1meu421fRe5B0%2FTopAffiliate-General-970X250.jpeg?alt=media&amp;token=108d6390-18e6-40c5-92cd-8c8df3419633" alt=""><figcaption></figcaption></figure>