Layout Design

The Layout Design page allows a store administrator to activate a design template and modify the selected template design using the built-in visual CSS editor:

Select design theme

You can select any installed Avactis template for your storefront.
Click the Activate button under the template thumbnail in order to activate your preferred template:

Note:
The Avactis templates are located in the /avactis-themes folder. You can add new themes there if needed.
Themes will be automatically visible in the Layout Design section.

 
CSS editor
 
After activating a template, you can modify the design using the built-in CSS editor.
 
Click on the Open CSS editor button and you will see the CSS editor wizard:

1 - To modify a design, you should create a theme.
 
Enter any theme name to the Add new theme field and click Add theme:

You will see your new theme in the list of available themes in the Manage Themes section of the wizard. Activate your new theme to modify it:

2 - Make sure that Edit mode is enabled in the CSS editor control panel:
 

Note:
To modify CSS classes, edit mode must be enabled. If it is not enabled, you can navigate in the main window to the pages you want to modify.
To enable edit mode again, just click the Edit button.

 
3 - Use the mouse to select the element on the main screen that you want to modify:

You can also select an element you want to modify from the list:

Using the icon, you can highlight an element in the main window.

4 - You can see the list of CSS element properties that can modify your visual effects, for example, you can choose a color element:

 
You can also upload your own image from your computer or the /images folder of the current theme:
 

All your changes will be saved automatically, you can Undo your changes if needed: