Tags and CSS variables not only for template colors

In /admin/html-code/ you can use tags in your CSS to be replaced with dynamically inserted values from /admin/templates-appearance/ in the resulting CSS. Tags only work in CSS directly inserted in the „Header“, „Footer“ or „finished order“ sections, not in the external CSS.

To use the same values in external CSS files, you can refer to CSS variables that are also available. You can find them by inspecting styling of the root <html> element. Shoptet stylesheets do not use CSS variables internally, so default styles will be not modified by changing values of these variables.

You can use the tags and CSS variables in all templates; see the table below for a complete list.

Tag CSS variable Value
#COLOR_PRIMARY# --color-primary Template colour 1
#COLOR_PRIMARY_HOVER# --color-primary-hover Template colour 2
#COLOR_SECONDARY# --color-secondary Conversion color
#COLOR_SECONDARY_HOVER# --color-secondary-hover Conversion color after hovering
#COLOR_TERTIARY# --color-tertiary Template colour 3
#COLOR_TERTIARY_HOVER# --color-tertiary-hover Template colour 4
#TEMPLATE_FONT# --template-font Text Font
#TEMPLATE_HEADINGS_FONT# --template-headings-font Title Font
#HEADER_BACKGROUND_URL# --header-background-url Background image

Application example – tags

<!-- In the "Header", "Footer" or "finished order" sections in /admin/html-code/ -->
<style>
    .myClass {
        font-family: '#TEMPLATE_HEADINGS_FONT#', sans-serif;
        color: #COLOR_PRIMARY#;
    }
</style>

Application example – CSS variables

<!-- Anywhere in your CSS -->
.myClass {
    font-family: var(--template-headings-font), sans-serif;
    color: var(--color-primary);
}