# Demo layouts

All Shopify themes include a single layout of empty placeholder sections.

For the home page, Shopify themes can only include a single default layout. Eclipse's default template is based on the Journey demo store.

Themes cannot include content, images, or specific pages from the demos.

{% hint style="info" %}
The demos provide examples of how to use the theme. When you download Eclipse, you have access to all the same sections, regardless of your current [theme style](https://help.fluorescent.co/eclipse/theme-settings/theme-styles).
{% endhint %}

## Page templates

***

Eclipse includes **page**, **product**, and **collection** templates with demo layouts. **Default** templates are based on the Journey demo store.

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

#### Alternate page templates

<table><thead><tr><th width="196">Template</th><th>Demo (example)</th></tr></thead><tbody><tr><td><code>about-1</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/pages/about-us">Journey</a></td></tr><tr><td><code>about-2</code></td><td><a href="https://eclipse-theme-coastal.myshopify.com/pages/about-merge">Coastal</a></td></tr><tr><td><code>events</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/pages/race-run-clubs">Journey</a></td></tr><tr><td><code>landing</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/pages/guides-1">Journey</a></td></tr><tr><td><code>q-and-a</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/pages/expert-q-a/a-q-a-with-fiona-maple">Journey</a></td></tr><tr><td><code>rich-content</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/pages/guides/a-race-day-guide">Journey</a></td></tr></tbody></table>
{% endtab %}

{% tab title="Products" %}

#### Alternate product templates

<table><thead><tr><th width="247">Template</th><th>Demo (example)</th></tr></thead><tbody><tr><td><code>default</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/products/classic-sports-bra-grenadine">Journey</a></td></tr><tr><td><code>alternative-layout</code></td><td><a href="https://eclipse-theme-coastal.myshopify.com/products/balmy-summer-roll-on-perfume-oil">Coastal</a></td></tr><tr><td><code>set-layout-1</code></td><td><a href="https://eclipse-theme-journey.myshopify.com/products/citron-race-day-set">Journey</a></td></tr><tr><td><code>set-layout-2</code></td><td><a href="https://eclipse-theme-coastal.myshopify.com/products/balmy-summer-duo">Coastal</a></td></tr></tbody></table>
{% endtab %}
{% endtabs %}

## Add home page templates

***

Use the template code below from the Coastal and Ripple 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.

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

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

{% tabs %}
{% tab title="Coastal home page" %}
[View live demo](https://eclipse-theme-coastal.myshopify.com). Copy and paste code in `index.json`

{% file src="<https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJbarhLfEEZdMgU3f9qPh%2Fcoastal-home.json?alt=media&token=715a4600-bd3b-4cfe-83df-7a38c1d78105>" %}
{% endtab %}

{% tab title="Ripple home page" %}
[View live demo](https://eclipse-theme-ripple.myshopify.com/). Copy and paste code in `index.json`

{% file src="<https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FlcmUBkAATXHdlvbWKCUv%2Fripple-home.json?alt=media&token=d393af03-b255-44fa-82bf-cc873a3957a6>" %}
{% endtab %}
{% endtabs %}