Cratejoy themes give you the scaffolding to create a fully customizable subscription or e-commerce store. Our themes are ready to serve your customers from the moment you publish them, but if you’re the kind of person who likes to stand apart from the pack, we’ve got you covered.

Theme Structure

Cratejoy themes are built with basic HTML, CSS, and JavaScript organized into small blocks that we call components. Each page on your site is simply a list of components, which each have their own code.

If you open the code editor for your theme, under the components folder you will see a directory for each page. Each of these subdirectories container folders for each of the components that make up that page.

Minimal File Structure

A minimal theme follows this structure:

• components/
  • index/
    • Hero/
      • component.html
      • component.css
      • component.js (optional)
  • ...
• images/
• html/
  • base.html
• js/
• css/

Theme Page Routes

Cratejoy automatically translates urls to html templates on disk.

So for instance when a visitor to your site goes to yourstore.com/subscribe Cratejoy automatically loads and displays the contents of the HTML file in your theme html/subscribe.html

Default Routes

These are the default routes that are provided and expected on every Cratejoy theme.

Component List URLs

Each subdirectory in the components directory also represents a page, built from the components inside inside that directory. For example the components/about directory has a folder for each component in that is on the about page at the yourstore.com/about URL.

Arguments

Certain routes accept arguments which modify the behavior of the page. Of note are the subscribe and product routes. Their arguments specify which products are loaded and displayed in the template file.