# 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](https://help.fluorescent.co/cornerstone/theme-styles/style-presets) 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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWbhQKuycOoKkzLC7XUP8%2Ftheme-duplicate.jpeg?alt=media&#x26;token=2267be7b-397f-4b65-abd3-b1d6e2a61785" 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.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F6IGTlXbw5Fv4kCutTf64%2Ftheme-code-index.jpeg?alt=media\&token=9b080b7d-641d-4ee5-b3d8-1269832ad85f)
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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FSPwkHBmMdae8TUm429bG%2Fglow-home.json?alt=media&token=26d39aa4-3fb3-4040-9589-c5e9f0cbbf13>" %}

#### 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FxHsWDOH4Q94qFmNS13T3%2Fglow-product.json?alt=media&token=7f27c4fb-10ed-4706-b444-baf7fd743822>" %}
{% 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FGEa4BQyNZZ04ZMb2zR6m%2Fartisan-home.json?alt=media&token=143b2e31-c357-44b1-b0f4-413ac00761ef>" %}

#### 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F9LUtcENh1ZDg4ylildAP%2Fartisan-product.json?alt=media&token=e59276e0-8762-45be-859a-e54bb7435812>" %}
{% 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FJIddBRlwdFfl3hzMrWuf%2Fbotanical-home.json?alt=media&token=18d62fb4-1d69-4c4d-8fbc-df53c804b815>" %}

#### 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Ffo1dQyTuJWHi3J3kTD4u%2Fbotanical-product.json?alt=media&token=8ca8dceb-86dc-4ca0-8774-c3f791536030>" %}
{% 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FzBohuKg8oWsvMfqYa7g5%2Fflair-index.json?alt=media&token=f474fe03-1532-4af4-919b-0fffe53c7beb>" %}

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

{% file src="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FI1V53pMiesqITKwdaHoi%2Fflair-index.json?alt=media&token=686126dc-b151-471a-89b8-9e8716dc583e>" %}
{% 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FaJJpwh7rodepYAeS6nKw%2Fbarista-home.json?alt=media&token=6099e150-18c7-408c-bad4-271a5a2d3e97>" %}

#### 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="<https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FQmKW7lfYUUZCKh6WMSyI%2Fbarista-product.json?alt=media&token=db2e279f-ff02-4d9a-99c9-a635a4f82c44>" %}
{% endtab %}
{% endtabs %}

***

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