Typo & Colors
The global colors and fonts of the shop
Theme colors
Colors
In the colors tab you can find the global color settings of the theme. The primary color (1) and secondary color (2) are the main colors of the store.
The primary and secondary colors should never be transparent or #ffffff (white), as they are also used as foreground color on white backgrounds.
The value for Meta Theme-color (6) specifies a color that browsers should use to match the display of the page or surrounding UI. Especially seen on mobile devices..
Body background vs Shop background
The global background colors of the store are divided into body background and store background. The Body background (4) is thereby the background of the entire HTML document (Body). The shop background (5) is the background of the store, which in turn is the HTML document.
Note: The arrow from the primary color to the body background field shows that colors can be further used in other fields based on their variables.
Basic configuration
There are certain areas in the theme whose foreground color is determined based on the background color. This is the case with the primary buttons, for example. The contrast ratio determines when the brightness of the color changes from "dark" to "light".
Example:
In Shopware 6.5, the calculation basis has been adapted to the Web Content Accessibility Guidelines (WCAG).
The contrast threshold (1) is therefor used to calculate contrast colors. For example, if the background color of a button is old pink #d9ab98 and there is set at a threshold of 4.5 the foreground color as a contrast color will be calculated as a dark color. At a threshold value of 2 the foreground color of the button will be calculated as a light color.
The contrast threshold setting may affect the readability of certain elements. By default, a contrast threshold of 4.5 provides optimal readability.
Status messages
Depending on the action in the store, status messages are displayed by the system. You can find the typical colors of different status messages here.
Examples:
Fonts
Fonts can be used locally via the theme fonts or externally via the custom fonts integrated by Google Fonts. In addition, we have a guide on how to host fonts yourself.
Custom fonts
All 1000+ Google Fonts fonts are available to you via the theme. You can define separate fonts for body text and headlines or the same font.
If you want to use the same font for headlines and body text, enter the same font name in both fields. The font styles will be added together if they differ in the fields.
1. Search a font
To use a font from Google Fonts, just find one font family each for body text (font Text) and a font family for headings (headline font) - in this example we want to use Roboto Condensed as font for texts.
2. Select font styles
After selecting the font, you can view the font styles that the font provides. In this example, 'Roboto Condensed' offers all possible font styles from Light 300 to Bold 900 because it is a font.
3. Select font
After clicking on Get embed code you will be taken to the page with the embed codes. Here we are only interested in the technical name of the font. So make a note of the name of the font family. 'Roboto Condensed', sans-serif
font-family: and the semicolon are omitted.
You don't have to make an actual selection of font styles here - that happens only in the theme!
4. Deposit font family in the theme
Now enter the name of the font in the Font-type text (1) or, for headings, in the Font-type headline field. Keep the generic font family in case the font unexpectedly fails to load.
Generic font families serve as a fallback mechanism, a means of preserving something of the stylesheet author's intent in the event that none of the specified fonts are available.
The contents of the field font-type text (1) or font-type headline should now look like this:
Select the font weights (font styles) in the Font weights text (2) or for headings in the Font weights headline field. You can only use the font weights that the font provides.
Make sure the option Load fonts from Google (3) is active.
To avoid unnecessary loading times, select only the font weights that you really want to use. Often, special font weights can be selected for individual elements in the configuration. If font styles are retrieved that the font does not deliver, browsers use the approximatuin method.
Theme fonts
Besides embedding external or self-hosted fonts, the theme offers a selection of built-in fonts. These fonts are shipped with the theme and are located on your server after installation. So you don't have to worry about privacy with theme fonts.
Theme fonts can be used just like the custom fonts for texts (1) and headings (2) can be set separately. The supplied font styles (3) are in square brackets after the font name.
It is also possible to use a theme font for e.g. body text and a custom font for the headlines. Note, however, that the externally-integrated custom font still connects to Google's servers, unless you have hosted the custom font yourself and set the option Load fonts from Google is disabled in the Custom fonts section.
As soon as a selection other than - Custom font - was selected, no more fonts will be loaded from Google servers. The setting Theme fonts overrides the Custom fonts setting.
Typography
Please select for Dark text color (1) always a dark and for Light text color (2) always a light color value. Internal contrast functions automatically use the light text color for dark backgrounds and the dark text color for light backgrounds.
In addition to the font sizes, the font weights (3) can also be configured. Make sure to select values that are delivered by the used fonts.
E-Commerce
Here you can choose global colors for the price display and the shopping cart button.
Buttons
In addition to primary and secondary buttons, buttons are used in various places in the storefront. For example, light buttons are used in the administration. The colors of the buttons can be customized here:
In the standard the colors of the buttons are determined on the basis of the border color. Thereby hue and saturation are set based on the border-color with a fixed defined brightness. This has the advantage that the buttons automatically fit to your color style.
Last updated
