A theme is a public view of your EvenCart store. EvenCart uses Liquid as it's theming engine. This makes it easy to design and customize themes for EvenCart.
There are two ways to create an EvenCart theme.
- Make a copy of default theme : This will be easier approach to follow if you are starting to design your first EvenCart theme.
- Create a new theme from scratch : This is ideal for designers experienced with EvenCart themes.
Theme Directory Structure
A theme in EvenCart should be placed within Content/Themes directory at EvenCart root. A typical EvenCart theme should have the following directories.
Assets - Contains static resources such as images, fonts, javascripts and stylesheets. Its recommended that you put each type of resource into appropriate directories such as js, css, fonts etc. for better organization.
The Assets directory is used by EvenCart engine to serve static files. Files placed at other places will return a 404 error to the caller.
Assets/theme.jpg - The file will be used to show the theme image to admin. It should usually include a screenshot of the theme.
Assets/config.json - The file contains the configuration information about the theme. Theme Configuration is described in the next section.
Views - Contains the html views used to render various pages on your EvenCart store.
Views/Layout - Contains the layout views to be used by other pages.
Views/Controls - Contains the control views to be used for various controls.
Theme Configuration File
Every theme is described by it's configuration file. The name of the file must be config.json. The theme config file contains the following JSON object.
{
"name": "Default",
"description": "",
"version": "1.0",
"supportedVersions": [ "1.0" ],
"author": "Team EvenCart",
"authorUri": "https://evencart.co",
"themeUri": "",
"tags": "",
"productBoxImageSize": "200x240",
"productPageImageSize": "385x500",
"productPageThumbnailImageSize": "75x75",
"userProfileImageSize": "100x100",
"cartItemImageSize": "75x75",
"widgetZones": {
"slider": "Home Page Slider",
"footer-one": "Footer Column One",
"footer-two": "Footer Column Two",
"footer-three": "Footer Column Three",
"footer-four": "Footer Column Four",
"footer": "Footer"
}
}Required Fields
name - The friendly name of the theme.
description - A brief description about the theme.
version - The version of the theme.
supportedVersions - The EvenCart versions that this theme works on.
Optional Fields
author - The author of the plugin.
authorUri - The url of author's page.
themeUri - The url of theme's home page or documentation page.
tags - A collection of strings that helps to categorize theme. This helps to search the store owners appropriate themes.
productBoxImageSize - The image size (width x height) in pixels for showing in the product boxes.
productPageImageSize - The big image size (width x height) in pixels for showing in the single product page.
productPageThumbnailImageSize - The thumbnail image size (width x height) in pixels for showing in the single product page.
userProfileImageSize - The image size (width x height) in pixels for user's profile image.
cartItemImageSize - The product image size (width x height) in pixels for showing on the cart page.
widgetZones - An an object specifying the widget zones available in the theme. The key of the object should be the name of the widget zone and value should be a string describing the widget zone.
Theme Pages
All the view pages in an EvenCart theme must have html extension. The views must also be placed in proper directories for EvenCart to be able to serve theme.
Controller Views
The views for a Controller's action method must be placed inside the directory same as the name of controller at Views/<Controller Name>/<Action Name or View Name> . e.g. the login page view should be placed at Authentication/Login.html location. This is because the controller serving the login page is found at AuthenticationController and the name of action method is Login.
The name of file must be same as the action method, unless it has been overridden by the action method.
Component Views
The file of a component should be located at Views/Components/<Component Name>/Default.html e.g. the AttributeFilterComponent component should be available at Views/Components/AttributeFilter/Default.html as the name of component is AttributeFilter.