Fluorescent
Stiletto
Stiletto
  • Stiletto Help Center
    • Start using Stiletto
      • Theme licenses
      • Migrate your theme
    • FAQs
    • Video tutorials
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • SEO for Shopify themes
      • H1 heading tags
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
  • Theme styles
    • Theme settings
    • Style presets
      • Demo layouts
    • Fonts
    • Colors
    • Animation
  • Pages
    • Templates
      • About page
      • Blog page
      • Blog posts
      • Collections list
      • Contact page
      • Customer accounts
      • FAQ page
      • Lookbook
      • Password page
      • Search page
      • Store locations
      • 404 page
      • Home page
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menus
      • Mobile menu
      • Quick search
      • Language and currency
      • Social media icons
      • Customer account icon
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Language and currency
      • Payment icons
      • Custom Liquid
  • Sections
    • Theme sections
      • Using sections
      • Content blocks
      • Blog posts
      • Collapsible row list
      • Collection list grid
      • Collection list slider
      • Complete the look
      • Contact form
      • Countdown banner
      • Countdown bar
      • Events
      • Featured collection grid
      • Featured collection slider
      • Featured product
      • Gallery carousel
      • Grid
      • Image compare
      • Image hero
      • Image hero split
      • Image with text
      • Image with text split
      • Multi column
      • Newsletter
      • Newsletter compact
      • Promotion banner
      • Promotion bar
      • Quotes
      • Recently viewed products
      • Rich text
      • Sales banner
      • Scrolling content
      • Shoppable image
      • Shoppable image editorial
      • Slideshow
      • Testimonials
      • Video
      • Video hero
      • Video with text
    • Popups
      • Sign up popup
      • Age verification
      • Countdown popup
      • Promotional popup
  • Products
    • Product listings
      • Product card style
    • Prices and discounts
    • Product badges
    • Quick shop
  • Product pages
    • Product template
      • Alternate templates
      • Pre-order template
      • Gift card
    • Layout and style
      • Product tabs
      • Media gallery
      • Sticky product details
      • Breadcrumbs
      • Navigation buttons
    • Overview blocks
      • Default blocks
        • Description
        • Product header
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
        • Sticky add-to-cart bar
      • Collapsible rows block
      • Complementary products
      • Custom options
      • Image block
      • Information popup
      • Product labels
      • Secure payment
      • Stock level indicator
      • Text block
      • Text list with icons
      • App blocks
    • Variant options
      • Variant chips
      • Variant swatches
        • Enable swatches
        • Use default colors
        • Use custom colors
        • Use variant images
        • Use custom images
        • Change swatch styles
        • Show on product cards
        • Dynamic option availability
      • Media grouping
      • Sibling product swatches
    • Product page sections
      • Product reviews
      • Product recommendations
  • Collection pages
    • Collection template
      • Collection landing
      • Sale collection
      • Subcollections
      • Flash sale
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Quick cart
      • Added to cart popup
      • Empty cart promotion
    • Free shipping bar
    • Low inventory warning
    • Cross sells
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Templates with demo layouts
  • Home page layouts
  • Add template code to your theme

Was this helpful?

  1. Theme styles
  2. Style presets

Demo layouts

Last updated 5 months ago

Was this helpful?

Stiletto includes templates that are based on our four demo stores: , , , and .

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

Product templates

Template
Demo (example)

default

alternate-1

alternate-2

alternate-3

Collection templates

Template
Demo (example)

flash-sale

landing

sale

subcollections

Home page layouts


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

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.

The Vogue demo was substantially updated in November 2024. These template code is for the home page layout before that date.


Related links

All Shopify themes are limited to a single home page layout with placeholder sections. Stiletto's default home page is based on the .

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

.

.

.

.

.

.

Vogue demo ↗
Learn more
View the live Chic demo homepage
View the live Chic demo product page
View the live Organic demo homepage
View the live Organic demo product page
View the live Craft demo homepage
View the live Craft demo product page
View the live Vogue demo product page
Editing your theme
Vogue ↗
Chic ↗
Craft ↗
Vogue ↗
Vogue ↗
Chic ↗
Vogue ↗
Chic ↗
Organic ↗
Craft ↗
Craft ↗
Vogue ↗
Vogue ↗
Vogue ↗
Vogue
Chic
Organic
Craft
assign templates to pages
35KB
chic-home.json
14KB
chic-product.json
41KB
organic-home.json
21KB
organic-product.json
26KB
craft-home.json
6KB
craft-product.json
32KB
vogue-home.json
21KB
vogue-product.json