Demo layouts

The Stiletto theme comes with a single default home page and product page layout based on the Vogue demo.

If you want to use the layout of another Stiletto demo, you can add the free template code below to your theme code editor.

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

Add template code to your theme

If you have purchased Stiletto, follow the steps below to replace your default homepage or product page with one of the demo layouts. 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 Layouts > index.json or product.json.


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

If you want to use the general styles of one of the demo (fonts, colors, etc.), you can change the Theme style in the theme settings. Learn more.


Related links

Editing your theme

Last updated