Theme layout editor

The color editor allows you to customize the theme colors. Preview changes are immediately displayed in your browser.

Remember to frequently save your changes. If you refresh the page or go to another page, and you do not save your settings, they will be lost. Once saved, you need to refresh the page several times to make changes to your browser.

Important!

To enable the layout and color configurator, go to Modules and Services->Modules and Services, and then find the "AT - Layout and colors live configurator" module and set "Show theme configurator in front office" to "YES" and save it.

After doing so, the layout editor and colors will be displayed on the left in the store.

If you are not satisfied with your changes, uninstall and then reinstall the "AT - Layout and colors live configurator" module to restore the default settings.

Live configurator options:

layout_editor_1.png

Pattern background - this is a semi-transparent image so you can customize its color using the "Pattern background color" field.

If you want to add your own background pattern, create a pattern called custom_pattern.png.
Add it on ftp to the modules/angarthemesconfigurator/img/patterns folder.
Then refresh the page several times and click on the "custom pattern" icon.

Texture background - this is a background where you can not change its color.

If you want to add your own background texture, create a pattern called custom_texture.jpg.
Add it on ftp to the modules/angarthemesconfigurator/img/textures folder.
Then refresh the page several times and click on the "custom texture" icon.

Pattern background color - choose the color of the background pattern.

Background attachment - you can lock your background.

layout_editor_2.png

Top separators - allows you to select the type of separators in the top.

Logo margin-top - add a margin over the shop logo if needed.

You can select one of two submenu layouts:

Submenu layout 1:

Submenu layout 2:

Slider position

Slider under menu:

layout_editor_s1.jpg

Slider in column:

layout_editor_s2.jpg

Slider controls color - select white or black color.

Select how many banners in a row to be placed under the slider.

You can select different amounts on your computer, tablet and smartphone.

Below is an example configuration of 3 banners per row and 2 banners per row.

Select how many banners in a row are to be placed above the footer.

You can select different amounts on your computer, tablet and smartphone.

Tabs:

Boxes:

Select products quantity per row.

You can choose different values for a 1, 2 or 3 column layout, eg on the home page, you can use a 1-column layout with 5 products in a row, and in the category of 2-column layout with 4 products.

Select products quantity per row on tablets and phones.

Product-list border style:

Style 1:

Style 2:

Product page layout:

Layout 1:


Layout 2:

Product info in boxes or tabs:


Boxes:


Tabs:

In the registration form, you can hide unnecessary fields.