Demo layouts

Stiletto includes templates that are based on our four demo stores: Vogue, Chic, Organic, and Craft.

This guide gives an overview of templates that use layouts from one of Stiletto's four demo stores:

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.

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 in your Shopify admin to make them live on your site.

The following templates were updated November 25, 2024.

Page templates

Template
Demo (example)

about-1

about-2

about-3

locations

lookbook-1

lookbook-2

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

If you want to use another demo's home page as your starting point, you can use the free template code below.

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

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.

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

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.

Related links

Editing your theme

Last updated

Was this helpful?