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 shoptet.design JavaScript object on each page.

shoptet.design = {
    "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.