# Demo layouts

All Shopify themes include a default layout of empty placeholder sections. Cornerstone's default template layouts are based on the  [Flair demo store](https://themes.shopify.com/themes/cornerstone/styles/flair/preview). (**Note:** Versions 1.2.3 and earlier was based on the Barista demo.)

**On Shopify, it's not possible to include alternate home page layouts.** As an alternative, we offer the template code of the other demo stores that you can add to your theme's code editor.

{% hint style="info" %}
If you want apply the general colors and fonts of a demo, you can [change the theme style](/cornerstone/theme-styles/style-presets.md) in the theme settings.
{% endhint %}

## Add template code to your theme

***

Use the template code below from one of the demos to replace your home page template in the **theme code editor**. No knowledge of code is necessary - it's as easy as copy and paste.

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

{% hint style="warning" %}
You need a purchased copy of Cornerstone to access the theme code editor.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your **Shopify Admin**:

1. In your **Theme library**, click **Actions (...) > Duplicate** on your current theme to create a backup version.

   <figure><img src="/files/BbJIIi82KQHnb6Cq4wp7" alt="" width="563"><figcaption></figcaption></figure>
2. Click **Actions (...) > Edit code** on the duplicated, unpublished theme.
3. In the **Templates** folder, find and click on the **`index.json`** (home page) or **`product.json`** file.

   > To create a new product template with the demo layout, click **+ Add a new template**. Select **Product** as the template type and enter a file name for the template.

   ![](/files/etjSQfSv82KxPn8p2cCp)
4. Click to open the raw code for the layouts from one of the demos above.

   > The template code does not include demo store content or images.
5. Select all the template code and copy it to your clipboard.

   > You can use keyboard shortcuts to **Select all** (**`ctrl-a`** or **`cmd-a`**) and **copy** (**`ctrl-c`** or **`cmd-c`**).
6. Select all of the current code in the **`index.json`** or **`product.json`** file and paste the new code to replace it.

   > You can use keyboard shortcuts for **Select all** (**`ctrl-a`** or **`cmd-a`**) and **paste** (**`ctrl-v`** or **`cmd-v`**).
7. Click **Save**.

   > That's it! You can now find the updated templates in your theme editor for the duplicate theme. Once your page is edited and ready to go, you can click **Publish**.

</details>

{% tabs %}
{% tab title="Glow" %}

#### Glow home page

[View live demo. ](https://themes.shopify.com/themes/cornerstone/styles/glow/preview)Copy and paste code in `index.json`

{% file src="/files/7gR9750tBHxoxr8xlYAS" %}

#### Glow product page

[View demo.](https://cornerstone-theme-glow.myshopify.com/collections/sale/products/barbie-spf-lip-cheek-balm-pink-duo) Copy and paste code in `product.json` or new product template file.

{% file src="/files/WQFBrZJvej0XRV9Wagqw" %}
{% endtab %}

{% tab title="Artisan" %}

#### Artisan home page

[View live demo.](https://themes.shopify.com/themes/cornerstone/styles/artisan/preview) Copy and paste code in `index.json`

{% file src="/files/GGAlAmMbuZAsMvwASjDq" %}

#### Artisan product page

[View demo.](https://cornerstone-theme-artisan.myshopify.com/collections/vero/products/product032) Copy and paste code in `product.json`or new product template file.

{% file src="/files/91LiK9XSwmElaDyENfLB" %}
{% endtab %}

{% tab title="Botanical" %}

#### Botanical home page

[View live demo.](https://themes.shopify.com/themes/cornerstone/styles/botanical/preview) Copy and paste code in `index.json`

{% file src="/files/CkEkfjJzp9aTQn82US5S" %}

#### Botanical product page

[View demo.](https://cornerstone-theme-botanical.myshopify.com/collections/stress-relief/products/powder-jar-02) Copy and paste code in `product.json`or new product template file.

{% file src="/files/kYY5l3WD639oh1cJdTOY" %}
{% endtab %}

{% tab title="Flair" %}

#### Flair home page

[View live demo.](https://themes.shopify.com/themes/cornerstone/styles/flair/preview) Copy and paste code in `index.json`

{% file src="/files/Ns7OQ7ekHnw50lJY3jis" %}

#### Old Flair demo (before August 2024).

{% file src="/files/OPbAiOXbTsfsdnOpQ7z5" %}
{% endtab %}

{% tab title="Barista" %}

#### Barista home page

[View live demo.](https://cornerstone-theme-barista.myshopify.com/) Copy and paste code in `index.json`

{% file src="/files/QeObo3Z5DbJypaWAH4hJ" %}

#### Barista product page

[View demo.](https://cornerstone-theme-barista.myshopify.com/collections/hario/products/hario-bona-drip-kettle) Copy and paste code in `product.json`or new product template file.

{% file src="/files/nbGMnUjPuAoegVsP0yoS" %}
{% endtab %}
{% endtabs %}

***

> **Related links**
>
> [Style presets](/cornerstone/theme-styles/style-presets.md)\
> [Theme settings](/cornerstone/theme-styles/theme-settings.md)\
> [Colors](/cornerstone/theme-styles/colors.md)\
> [Fonts](/cornerstone/theme-styles/fonts.md)\
> [Animation](/cornerstone/theme-styles/animation.md)


---

# 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://help.fluorescent.co/cornerstone/theme-styles/style-presets/demo-layouts.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.