Customizing Templates
What's an Enstore template?
Templates are HTML pages that can include logic to display dynamic information, they tell Enstore what your web shop should look like and what information should be shown to the customer. In other words, in contrast to making separate pages for every individual product in your web store, a template lets you make one page which displays product data dynamically. If you want to know more about template systems read this wiki.
An Enstore template can be fully customized through HTML, CSS, JavaScript and Django. An Enstore Template is basically a collection of files divided over two subfolders. One of those subfolders, named pages, holds all HTML files. The other subfolder, named assets, holds all CSS, JavaScript, image and font files.
Template Folder Structure
A typical template folder looks like this:
The pages and assets folders may not contain subfolders.
The Pages Folder
A template only needs two specific HTML-files to work properly. One HTML file to display lists of products and one to display product details. However, in most of our default templates you'll find more HTML files. Following is a list of HTML files you can expect in a template.
File names need to match the ones documented here.
| Name | Required | Path | Description |
|---|---|---|---|
| browse.html | Mandatory | /browse | The browse page holds all the HTML code for your store's browse view. This page displays lists of products. Enstore will provide a list of all products limited by the page size and sorted by name. |
| item.html | Mandatory | /item/[item-slug] | The item page is the page which shows product specific information. The item page is usually reached by requesting more information about a specific product on the browse page. |
| base.html | Optional | N/A | Our templating system offers you the possibility to use template inheritance. The base.html is a frame for all the other pages to build on. Base.html serves all the recurring elements in the site, like the backgrounds, headers, menu and footer. This file can have any name you like, but in our default templates it's always called base.html. The base page is optional but highly recommended. |
| welcome.html | Optional | /page/welcome | This page is meant as the landing page for a store and will display featured products and has place for an intro text. The intro text is set in the admin utility. |
| page.html | Optional | /page/welcome | Page.html is a generic page which is used when a custom page is set in the admin. |
The Assets Folder
The assets folder contains all css, js, image and font files. Linking to these files from the HTML files is done using the assets filter.
What do I need to make / customize a template?
To customize or create your own templates, we recommend you at least have some knowledge of HTML and preferably some coding experience. If you have never build a website using code we recommend you get a web designer to help you.
An Enstore Account
Obviously to start customizing a store's template you're going to need an Enstore account.
Go to Enstore.com/signup and sign up for a free account.
Download Enstore Designer
Download the Enstore Designer and install it by dragging it from the disk image to the applications folder.
Please note, Enstore Designer is a Mac application. If you're on Windows, you can follow this tutorial to start
Create your first template
Follow the next steps to create your first template and to start editing.
- Open Enstore Designer (ED).
- Click Account in the toolbar and enter your storehandle and password.
- Click Add Template, choose default and save it somewhere on your disk.
- Start the template using the green start button.
- Click preview. ED will open your default browser and display the template with all the information in your store. If your store is new and empty we recommend using Checkout's Example store to quickly fill your store.
- Open the template folder in your text editor and start editing.
- To see your changes, just refresh the browser.