> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/theme-styles/style-presets/demo-layouts.md).

# 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)