Information on design in the page code

When creating a frontend using embedded codes in administration or addons, it may be useful to know which colors, fonts, images, and layouts are currently set in the e-shop. The information is contained in the JavaScript object on each page. = {
    "template": {
        "name": "Classic",
        "colorVariant": "11-one"
    "layout": {
        "homepage": "catalog4",
        "subPage": "catalog3",
        "productDetail": "catalog4"
    "colorScheme": {
        "conversionColor": "#468c98",
        "conversionColorHover": "#3b7580",
        "color1": "#239ceb",
        "color2": "#1997e5",
        "color3": "#ffc807",
        "color4": "#ffbb00"
    "fonts": {
        "heading": "Exo 2",
        "text": "Source Sans Pro"
    "header": {
        "backgroundImage": null,
        "image": null,
        "logo": "https:\/\/classic.shoptet.czuser\/logos\/logo-2.png"
    "background": {
        "enabled": false,
        "color": null,
        "image": null

The following is an explanation of each item. The use of some or specific values may depend on the template used.

Section Item Description
name Template name (Swing, Jazz, Funk, Pop, Rock, Soul, Techno, Echo, Tango, Waltz, Classic, Step, Custom)
colorVariant Code for the specific color of a template
layout Page layout
homepage Home page
subPage Category listing
productDetail Product detail
colorScheme Basic color scheme
conversionColor Conversion color
conversionColorHover Conversion color after mouse hovering
color1 Primary color of e-shop
color2 Primary color of e-shop after mouse hovering
color3 Secondary color (can be null – not for all templates)
color4 Secondary color after hovering (can be null – not for all templates)
fonts Fonts used
heading Font for heading
text Text font
header Header properties
backgroundImage Header background image
image Picture in the header
logo Eshop logo in the header
background Page background
enabled Whether the background is set
color.enabled Background color – whether it is enabled
color.color Background color
image Background image
image.url Image URL
image.attachment Fixation – fixed, scroll
image.position Location – center, tile