The overall visual style of the site is configured in Website → Design → Design еditor → Global styles.
The Global styles block contains parameters that will affect all relevant elements on the site, namely:
Text and background;
Links display style;
Style of buttons and form fields on the website;
Website blocks style;
Navigation style for switching banners;
Style of certain elements of the product card.
Please note: For color settings, you can specify a color value in HEX, RGB, a standard English color name, or choose a color from the visual palette.
In the settings, the defined color is always displayed in HEX format.
Text and background
In this tab, you can define the basic settings for the background and text style on your site.
Font
Font — selection of one of 12 predefined fonts.
Text color — selection of the website's main text color.
Secondary text color — selection of the auxiliary text (tooltips, feature names, etc.) color.
Collapsed text block style — the visual style of displaying collapsed text, for example, in a product description (line or gradient).
Headings
Headings 1 — selection of the H1 headings color, for example, product name on the product page, news titles, etc.
Headings 2 — selection of the H2 headings colors, these are subheadings or titles of separate blocks on the page.
Pages
Page background — defines the color of the general background of the site pages.
Homepage background — defines the color of the main page.
404 page background — defines the background color of the page that site visitors are directed to if the link to the site page is incorrect or the page does not exist.
Links
You can define three parameters for links: the color of the link in the text, the color of the link when you hover over it, and additional underlining of the link.
The parameters are defined separately for each type of link on the site.
Navigation links — links that are used to navigate through the website pages: names of catalog categories, products, pages, etc.
Inline links — links in texts: product descriptions, SEO texts, etc.
Action links — links that, when clicked, perform a specific action on the site: Write a review, Add to favorites, Add to comparison, etc.
Buttons and form elements
For buttons, you can define the color of the button, the color of the text on the button, the color of the border around the button (stroke), and the size of the button corners rounding.
Parameters are specified separately for the each type of buttons.
Primary buttons — any main buttons on the website, such as Buy, Submit , etc.
Secondary buttons — additional buttons in the interface, for example, the All brands button, filter and modification buttons, etc.
Form fields — settings for input/selection fields in forms on the website.
Examples of rounding settings
Blocks and navigation
This block combines the settings:
Blocks — parts of a website page where elements are connected by a common frame.
Modal windows and menus — setting up background color for modal windows and menus.
Banners navigation — setting up switches between banners in banner lines.
Pagination bullets in banners
Scroll arrows in banners
Product cards
In this block, you can configure certain general parameters for product cards. Namely: the colors of the product rating stars, the primary and promotional price, and the gift blocks.
Sticker settings
Stickers style — sets the style of sticker settings, 5 styles are available;
Show only first sticker — only one of the stickers set for the product will be displayed on the mini-card.
Other elements
In this block, you can choose the style of displaying the color of icons in the contact info blocks: color or monochrome (b/w).