# Set up the demo layouts

The Starlite theme comes with a single default home page and product page layout based on the Echo and Classic demo.&#x20;

If you want to use the layout of another Starlite demo, you can add the free template code below to your **theme code editor**.&#x20;

## Add template code to your theme

If you have purchased Starlite, follow the steps below to replace your default homepage or product page with one of the demo layouts. No knowledge of code is mandatory - it's a simple copy & paste.&#x20;

> This template json code will place the sections in the same way as the demo store. The demo images are not included in this.

* Duplicate your theme and open the theme code editor.
* Copy the demo layout code from the below- mentioned links and paste it into **Templates > index.json** or **product.json**.

{% tabs %}
{% tab title="Echo" %}
View the [home page json](../echo-home-page-json) and [product page json](../echo-product-page-json)
{% endtab %}

{% tab title="Classic" %}
View the [home page json](../classic-home-page-json) and [product page json](../classic-product-page-json)
{% endtab %}

{% tab title="Elegant" %}
View the [home page json](../elegant-home-page-json) and [product page json](../elegant-product-page-json)
{% endtab %}

{% tab title="Bright" %}
View the [home page json](../bright-home-page-json) and [product page json](../bright-product-page-json)
{% endtab %}
{% endtabs %}

### Steps to copy the JSON templates:

In the **Shopify admin**:

1.  Click **Actions > Duplicate** on your current theme to create a backup theme version. For safety reasons, it's recommended to create a duplicate of your current theme.\
    \


    <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FZdbhvRri7DNcaMmxDNiX%2Fimage.png?alt=media&#x26;token=e7d4007a-e382-446f-9881-dec8a3c154f1" alt=""><figcaption></figcaption></figure>
2.  Click **Actions> Edit cod**e in the duplicated theme version.\


    <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2F9tjjCQjjDoqG4cgT0orX%2Fimage.png?alt=media&#x26;token=ad20dc85-b597-42dd-9118-24b1dca5b247" alt=""><figcaption></figcaption></figure>
3.  In the **Templates** folder, search and click on the **`index.json`** (home page) or **`product.json`** (product page)  file. \
    ![](https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2F8eo0yIIJOK3q8on7rTv6%2Fimage.png?alt=media\&token=d65033aa-4932-4039-bafe-436a6a48a2f5)\


    <figure><img src="https://2996814205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYerbql6PHiTtyykpnHvy%2Fuploads%2FBmmuKb2Qqqpp3vmf9qUO%2Fimage.png?alt=media&#x26;token=4841eab9-8873-4834-ba1c-58b69f6354f9" alt=""><figcaption></figcaption></figure>
4. Select the [template code](#add-template-code-to-your-theme) as per the required demo and copy code and paste it in the **code editor> files** opened in step 3.\
   Note: To copy the code, you can use keyboard shortcuts to **Select all** (**`ctrl-a`** or **`cmd-a`**) and **copy** (**`ctrl-c`** or **`cmd-c`**). To paste the code, you can use keyboard shortcuts for **Select all** (**`ctrl-a`** or **`cmd-a`**) and **paste** (**`ctrl-v`** or **`cmd-v`**).
5. Click **save.**
6. **All done!** The new layouts for your homepage and product pages are completed in your duplicate theme's editor. Once you've customized this copy as per your requirements, you can just hit "Publish" to make this theme copy live on your website.
