📘
Starlite documentation
  • Overview
    • 💡Support and documentation
    • ✨Announcement bar
    • ✨Header
    • ✨Slideshow
    • ✨Rich text
    • ✨Featured collection
    • ✨Collections list
    • ✨Contact form
    • ✨Marquee text
    • ✨Collection carousel
    • ✨Image with text (carousel)
    • ✨Collection tabs
    • ✨Collapsible content
    • ✨Images grid
    • ✨Media grid
    • ✨Multiboxes
    • ✨Accordion boxes
    • ✨Logo list
    • ✨Promotional banner
    • ✨Video banner
    • ✨Featured blogs
    • ✨Countdown
    • ✨Map(store locator)
    • ✨Multicolumns
    • ✨Products collage
    • ✨Shop the look
    • ✨Media tabs
    • ✨Testimonials
    • ✨Featured products
    • ✨Featured product
    • ✨Custom liquid
    • ✨Recently viewed products
    • ✨Product menus
    • ✨Images banner
    • ✨Before/After
    • ✨Products with image
    • ✨Featured images
    • ✨Offer card
    • ✨Product short videos
    • ✨Stories
    • ✨Shapes
    • ✨Split banner
    • ✨Blinking icons with text
    • ✨Numbers
    • ✨Featured content
    • ✨Timeline
    • ✨Categories
    • ✨Newsletter
    • ✨Footer
    • ✨Theme settings
    • ✨Age verification popup
    • ✨Information drawer
    • ✨Product comparison
    • ✨Newsletter popup
    • ✨Template product
    • ✨Template default collection
    • ✨Template- Blog
    • ✨Template - Default blog post
    • ✨Template- Cart
    • ✨Recommended sizes for images
  • FAQ
    • Theme updates
    • Support
  • How to setup the presets
    • Set up the demo layouts
  • Echo home page JSON
  • Echo product page JSON
  • Classic home page JSON
  • Classic product page JSON
  • Elegant home page JSON
  • Elegant product page JSON
  • Bright home page JSON
  • Bright product page JSON
  • How to set up the size guide on the product page
Powered by GitBook
On this page
  • Add template code to your theme
  • Steps to copy the JSON templates:
  1. How to setup the presets

Set up the demo layouts

PreviousHow to setup the presetsNextEcho home page JSON

Last updated 10 months ago

The Starlite theme comes with a single default home page and product page layout based on the Echo and Classic demo.

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

Add template code to your theme

If you have purchased Starlite, follow the steps below to replace your default homepage or product page with one of the demo layouts. No knowledge of code is mandatory - it's a simple copy & paste.

This template json code will place the sections in the same way as the demo store. The demo images are not included in this.

  • Duplicate your theme and open the theme code editor.

  • Copy the demo layout code from the below- mentioned links and paste it into Templates > index.json or product.json.

View the and

View the and

View the and

View the and

Steps to copy the JSON templates:

In the Shopify admin:

  1. Click Actions > Duplicate on your current theme to create a backup theme version. For safety reasons, it's recommended to create a duplicate of your current theme.

  2. Click Actions> Edit code in the duplicated theme version.

  3. In the Templates folder, search and click on the index.json (home page) or product.json (product page) file.

  4. Select the as per the required demo and copy code and paste it in the code editor> files opened in step 3. Note: To copy the code, you can use keyboard shortcuts to Select all (ctrl-a or cmd-a) and copy (ctrl-c or cmd-c). To paste the code, you can use keyboard shortcuts for Select all (ctrl-a or cmd-a) and paste (ctrl-v or cmd-v).

  5. Click save.

  6. All done! The new layouts for your homepage and product pages are completed in your duplicate theme's editor. Once you've customized this copy as per your requirements, you can just hit "Publish" to make this theme copy live on your website.

home page json
product page json
home page json
product page json
home page json
product page json
home page json
product page json
template code