# Demo layouts
Stiletto includes templates that are based on our four demo stores: [Vogue](https://stiletto-theme-vogue.myshopify.com), [Chic](https://stiletto-theme-chic.myshopify.com), [Organic](https://stiletto-theme-organic.myshopify.com), and [Craft](https://stiletto-theme-craft.myshopify.com).
This guide gives an overview of templates that use layouts from one of Stiletto's four demo stores:
{% hint style="info" %}
Demos provide a few examples of how to use the theme. When you download Stiletto, you have access to all sections and features, regardless of the current theme style. Stiletto's settings allow you to create substantially unique layouts and styles to match your brand.
{% endhint %}
## Templates with demo layouts
***
Stiletto includes **page**, **product**, and **collection** templates based on the demos. In the theme editor, use the template selector to find templates for pages, products, and collections.
For alternate templates, you will need to [assign templates to pages](/stiletto/general/editing-themes/using-templates.md#assign-templates-to-pages) in your Shopify admin to make them live on your site.
{% hint style="warning" %}
The following templates were updated November 25, 2024.
{% endhint %}
{% tabs %}
{% tab title="Pages" %}
**Page templates**
| Template | Demo (example) |
| ------------ | -------------------------------------------------------------------------- |
| `about-1` | [Vogue](https://stiletto-theme-vogue.myshopify.com/pages/about-us) |
| `about-2` | [Chic](https://stiletto-theme-chic.myshopify.com/pages/about) |
| `about-3` | [Craft](https://stiletto-theme-craft.myshopify.com/pages/about) |
| `locations` | [Vogue](https://stiletto-theme-vogue.myshopify.com/pages/stockists) |
| `lookbook-1` | [Vogue](https://stiletto-theme-vogue.myshopify.com/pages/lookbook) |
| `lookbook-2` | [Chic](https://stiletto-theme-chic.myshopify.com/pages/editorial-lookbook) |
| {% endtab %} | |
{% tab title="Products" %}
**Product templates**
| Template | Demo (example) |
| ------------- | ------------------------------------------------------------------------------------------------------------- |
| `default` | [Vogue](https://stiletto-theme-vogue.myshopify.com/products/bromley-bralette-in-noir-sequin) |
| `alternate-1` | [Chic](https://stiletto-theme-chic.myshopify.com/collections/best-sellers/products/wide-crop-pants) |
| `alternate-2` | [Organic](https://stiletto-theme-organic.myshopify.com/products/hydrating-face-elixir?variant=43385829490849) |
| `alternate-3` | [Craft](https://stiletto-theme-craft.myshopify.com/products/dinner-bowl-stone) |
| {% endtab %} | |
{% tab title="Collections" %}
**Collection templates**
| Template | Demo (example) |
| ---------------- | --------------------------------------------------------------------------------- |
| `flash-sale` | [Craft](https://stiletto-theme-craft.myshopify.com/collections/all-ceramics) |
| `landing` | [Vogue](https://stiletto-theme-vogue.myshopify.com/collections/summer-set) |
| `sale` | [Vogue](https://stiletto-theme-vogue.myshopify.com/collections/all-sale) |
| `subcollections` | [Vogue](https://stiletto-theme-vogue.myshopify.com/collections/spring-collection) |
| {% endtab %} | |
| {% endtabs %} | |
## Home page layouts
***
All Shopify themes are limited to a single home page layout with placeholder sections. Stiletto's default home page is based on the [Vogue demo](https://stiletto-theme-vogue.myshopify.com).
If you want to use another demo's home page as your starting point, you can use the free template code below.
{% hint style="info" %}
If you want apply the colors and fonts of a demo, you can change the **Theme style** in the theme settings. [Learn more](/stiletto/theme-styles/style-presets.md).
{% endhint %}
## Add template code to your theme
***
Use the template code below from one of the demos to replace your home page or product 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.
* Duplicate your theme and open the theme code editor.
* Copy the demo layout code below and paste it into **Layouts > index.json** or **product.json**.
{% hint style="warning" %}
You need a purchased copy of Stiletto to access the theme code editor.
{% endhint %}
STEPS
In your **Shopify Admin**:
1. 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 **Layouts** folder, find and click on the **`index.json`** (home page) or **`product.json`** file.
4. Click to open the raw code for the layouts from one of the demos below.
> 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**.
{% tabs %}
{% tab title="Chic" %}
[View the live Chic demo homepage](https://stiletto-theme-chic.myshopify.com/).
{% file src="/files/aebFOrKZIx9Vghewloyo" %}
[View the live Chic demo product page](https://stiletto-theme-chic.myshopify.com/products/origami-dress-ivory-black-stripe).
{% file src="/files/Ghrzx5IRcmnOL8nlCaDD" %}
{% endtab %}
{% tab title="Organic" %}
[View the live Organic demo homepage](https://stiletto-theme-organic.myshopify.com/).
{% file src="/files/bOGgkfyCcQNcDPiQ5Gqm" %}
[View the live Organic demo product page](https://stiletto-theme-organic.myshopify.com/products/pink-coconut).
{% file src="/files/n8gLPcXjSaadWAbxVz2R" %}
{% endtab %}
{% tab title="Craft" %}
[View the live Craft demo homepage](https://stiletto-theme-craft.myshopify.com/).
{% file src="/files/1SVDZAfkXKcMwYTOTaJr" %}
[View the live Craft demo product page](https://stiletto-theme-craft.myshopify.com/products/ribbed-match-striker-anthracite).
{% file src="/files/xpRD48KumjVuKQ70z9S5" %}
{% endtab %}
{% tab title="Vogue (Old)" %}
The Vogue demo was substantially updated in November 2024. These template code is for the home page layout before that date.
{% file src="/files/zd3Dad8WmNOZywkEjJvh" %}
[View the live Vogue demo product page](https://stiletto-theme-vogue.myshopify.com/collections/new-arrivals/products/meggie-dress)
{% file src="/files/wKkghFGPygSgquWurVrX" %}
{% endtab %}
{% endtabs %}
***
> **Related links**
>
> [Editing your theme](/stiletto/general/editing-themes.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/stiletto/theme-styles/style-presets/demo-layouts.md?ask=
```
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.