Open2b e-commerce stores are fully customizable in their visual design. You can modify one of the provided templates or build new ones.
Open2b lets you choose the level of intervention that best fits your needs in terms of time, effort, required skills, and the desired level of customization.
A template is structured on two levels: the template and the color. A template can have multiple colors.
Open2b ships with several templates in multiple colors. In the back office, under Website > Design, you can see all base templates with their available colors.
Click a template at the bottom of the page to see a larger preview at the top with the available colors. Click a color to view the preview with that color applied.
You can see a navigable preview of the site by clicking Preview. The preview is an essential tool during design work because it lets you see a version of the site with your changes applied. When you are satisfied, you can apply them to the live site and make them visible to all visitors.
Templates are located in the design/ folder or, in installed versions, in open2b/design/. All visual customizations must be done exclusively in this folder; there are no other folders to work on.
The folder contains one subfolder for each template. Templates installed from the Template Store will also be in this folder. When you open a template folder, you will find all the HTML pages for the template and its subfolders:
colors: contains the different colors of the template.images: contains images used by the base template.imports: contains files with declarations, such as macros, that can be reused across multiple pages.languages: contains translations for all text written directly in the pages and for system-generated messages such as warnings and errors.layouts: contains layout files extended by one or more pages to define the page layout.partials: contains page fragments shared by multiple template pages.If you only want to change colors, any text editor that supports Unicode characters is enough. Windows Notepad is fine as well. You will also need an FTP program to work with files on the server. If you don’t already have one, a good option is FileZilla, which is free and available for Windows, Mac, and Linux.
First, make sure these points are clear:
The following table helps you decide whether to build a new template or just a new color.
| Template | Color | |
|---|---|---|
| Customization | Complete | Colors only |
| Build time | Days | Hours / Minutes |
| Skills | HTML, CSS, includes, instructions, and variables | CSS (basic) |
| Files to work on | HTML and CSS | Color CSS |
You can also start by creating a new color to get familiar with the software before moving on to a full template.
If you only want to change colors, any text editor that supports Unicode characters is enough. Windows Notepad is fine as well. You will also need an FTP program to work with files on the server. If you don’t already have one, a good option is FileZilla, which is free and available for Windows, Mac, and Linux.
If you plan to build a template, it’s better to use a dedicated editor.