Themes, an introduction

What are themes and what do they do? Back to top

Themes 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 theme lets you make one page which displays product data dynamically. If you want to know more about theme systems, read this wiki.

An Enstore theme can be fully customized through HTML, CSS, JavaScript and Django. An Enstore theme is basically a collection of files divided over two subfolders. The Pages subfolder holds all HTML files. The Assets subfolder holds all CSS, JavaScript, image and font files. Using Enstore Designer you can customize or create new themes and deploy them to Enstore. When deployed, your new theme will be present along the default themes in the theme chooser (Enstore Admin: themes) where you can activate it.

A typical theme folder looks like this:

this

The pages and assets folders may not contain subfolders.

The Pages folder

A theme 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 themes you'll find more HTML files. Following is a list of HTML files you can expect in a theme. 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](http://docs.djangoproject.com/en/dev/topics/templates/#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 themes 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.

Search Engine Optimization Back to top

Another part of designing your store to be spotted easily, is search engine optimization. Please read our SEO guide!