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
`#HOST#`	`-`	Project domain (eshop.example.com)
`#PROJECT_ID#`	`-`	Project ID (1 to 7 digits)
`#TEMPLATE#`	`-`	Template name (f.e. Classic)
`#LANGUAGE#`	`-`	Language identification (f.e. cs)
`#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

❌ Deprecated ❌

For new addons versioning use Shoptet Bender https://github.com/shoptet/shoptet-bender/

Tag	CSS variable	Value
`#DEBUG_TIMESTAMP#`	`-`	Timestamp (f.e. 1597073723) NOTE: this only works when logged as an administrator

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);
}