Storefront Design and Layout

From AVACTIS : Ecommerce Shopping Cart Software Wiki
Jump to: navigation, search

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:
Admin Dashboard of Avactis

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:
Admin Dashboard of Avactis

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:
Admin Dashboard of Avactis
1 - To modify a design, you should create a theme.

Enter any theme name to the Add new theme field and click Add theme:
Admin Dashboard of Avactis

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:
Admin Dashboard of Avactis

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:

Admin Dashboard of Avactis

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

Admin Dashboard of Avactis

Using the eye 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:

Admin Dashboard of Avactis

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

Admin Dashboard of Avactis

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

Admin Dashboard of Avactis