Introduction
Open2b e-commerce stores are fully customizable in their visual appearance. You can modify one of the provided templates or create new ones.
Open2b lets you choose the level of involvement that best fits your needs in terms of time, work, required skills, and desired level of customization.
A template is structured on two levels: the template and the color. A template can have multiple colors.
Templates from the admin
Open2b comes with several templates in different colors. In the admin, in the Website & Design section, you can see all the base templates with their colors.
By clicking on one of the templates at the bottom of the page, a larger view is shown at the top with the available colors. Clicking a color lets you see the preview with that color applied.
You can view the live preview by clicking Open Preview. The preview is a fundamental tool during visual design because it lets you see a version of the site with the changes you made. When you are satisfied, you can apply the changes to the site and make them visible to all visitors.
Template files and folders
Templates are stored on the server where the software is installed, in the open2b/template/ folder. All visual customizations must be made exclusively in this folder; there are no other folders to work on.
The folder contains a subfolder for each template. Initially, only the base template folder called ecommerce will be present. If you open this folder you can see all the HTML pages of the template and the subfolders:
images: contains various images used by the base template.includes: contains includes used by the base template, i.e., HTML code portions shared across multiple HTML pages.layouts: contains the HTML pages that serve as layout pages from which all other HTML pages of the site derive.colors: contains the different colors for the template.languages: contains translations in the different languages for all texts written directly in the HTML pages and for texts displayed by the system, such as warning and error messages.
What tools you need
If you only want to modify colors, any text editor that supports Unicode characters is enough. Windows Notepad is fine. You also need an FTP program to work with files on the server. If you do not have one, a good option is FileZilla, which is free and available for Windows, Mac, and Linux.
Where to start
First, you need to be clear on a few points:
- What level of customization do I want?
- How much time do I have to create a template?
- What are my skills?
With the following table you can decide whether to create a new template or simply a new color.
| Template | Color | |
|---|---|---|
| Customization | Complete | Colors only |
| Build time | Days | Hours / Minutes |
| Skills | HTML, CSS, includes, instructions, and variables | CSS (minimal) |
| Files to edit | HTML and CSS | Color CSS |
You can also start by simply creating a new color to get familiar with the software, then move on to the template.
What tools you need
If you only want to modify colors, any text editor that supports Unicode characters is enough. Windows Notepad is fine. You also need an FTP program to work with files on the server. If you do not have one, a good option is FileZilla, which is free and available for Windows, Mac, and Linux.
If instead you need to build a template, it is preferable to have a dedicated editor.