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. (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.

If you want apply the general colors and fonts of a demo, you can change the theme style in the theme settings.

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

You need a purchased copy of Cornerstone to access the theme code editor.

STEPS

In your Shopify Admin:

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

   
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.

   
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.

Glow

Glow home page

View live demo. Copy and paste code in index.json

28KB

glow-home.json

Glow product page

View demo. Copy and paste code in product.json or new product template file.

28KB

glow-product.json

Artisan

Artisan home page

View live demo. Copy and paste code in index.json

29KB

artisan-home.json

Artisan product page

View demo. Copy and paste code in product.jsonor new product template file.

19KB

artisan-product.json

Botanical

Botanical home page

View live demo. Copy and paste code in index.json

37KB

botanical-home.json

Botanical product page

View demo. Copy and paste code in product.jsonor new product template file.

20KB

botanical-product.json

Flair

Flair home page

View live demo. Copy and paste code in index.json

46KB

flair-index.json

Old Flair demo (before August 2024).

32KB

flair-old-index.json

Barista

Barista home page

View live demo. Copy and paste code in index.json

29KB

barista-home.json

Barista product page

View demo. Copy and paste code in product.jsonor new product template file.

10KB

barista-product.json

---

Related links

Style presets Theme settings Colors Fonts Animation