Theme Style System Configuration¶

The system style configuration is a set of default css properties used in Storefront. This part of the configurator allows you to select basic colors, set styles of texts, buttons, links and tiles.

Properties¶

Attribute name	Type	Description
primaryColor	`colorPicker`	Main color. Full description
secondaryColor	`colorPicker`	Accent color. Full description
neutralColor	`colorPicker`	Neutral color. Full description
globalBodyBackgroundColor	`colorPicker`	Page background color. Full description
textColor	`radio`	Text color selector. Full description
globalFontColor	`colorPicker`	Custom color used only for text (default is Main color). Full description
baseFontFamilyName	`fontFace`	Base font family. Full description
baseFontSize	`number`	Base text size. Full description
baseLineHeight	`number`	Line height. Full description
headersOtherColor	`checkbox`	Decides if display headlines in a different color. Full description
hxFontColor	`colorPicker`	Custom headers color. Full description
headersOtherFont	`checkbox`	Decides if display headlines in a different font. Full description
headersFont	`fontFace`	Headers font. Full description
hxFontWeight	`select`	Font weight. Full description
headersSize	`number`	Headers size. Full description
hxLineSpacingMultiplier	`number`	Headers line height. Full description
btnBorderRadius	`number`	Value of rounded corners of the buttons. Full description
buttonColor	`radio`	Color of buttons. Default is Main color. Full description
btnBgColorPrimary	`colorPicker`	Custom color of buttons. Full description
btnColorPrimary	`colorPicker`	Text color on the button. Full description
secondaryButtonStyle	`radio`	Secondary button style. Full description
btnBgColorSecondary	`colorPicker`	Custom color of secondary buttons. Full description
btnColorSecondary	`colorPicker`	Text color on the secondary buttons. Full description
outlineColor	`radio`	Outline color. Default is Neutral color. Full description
btnBorderColorOutline	`colorPicker`	Custom outline color. Full description
btnBorderWidthOutline	`number`	Outline thickness. Full description
textColorOnTheButton	`radio`	The text color on the button. Full description
btnColorOutline	`colorPicker`	Custom text color on the button. Full description
linkColor	`radio`	Select a link color. Default is Main color. Full description
linkColorPrimary	`colorPicker`	Custom link color. Full description
maxPhotoHeightOnProductTile	`number`	Max. height of the space for the product tile photo. Full description
productTileHeight	`radio`	Product tile height setting Full description
promoRibbonOtherColor	`checkbox`	Decides if the promotions ribbon is displayed in a different color. Full description
promoRibbonBgColor	`colorPicker`	Custom promotions ribbon background color. Full description
promoRibbonFontColor	`colorPicker`	Custom promotions ribbon font color. Full description
bestsellerRibbonOtherColor	`checkbox`	Decides if the bestseller ribbon is displayed in a different color. Full description
bestsellerRibbonBgColor	`colorPicker`	Custom bestseller ribbon background color. Full description
bestsellerRibbonFontColor	`colorPicker`	Custom bestseller ribbon font color. Full description
newRibbonOtherColor	`checkbox`	Decides if the new ribbon is displayed in a different color. Full description
newRibbonBgColor	`colorPicker`	Custom new ribbon background color. Full description
newRibbonFontColor	`colorPicker`	Custom new ribbon font color. Full description
productRibbonOtherColor	`checkbox`	Decides if the product ribbon is displayed in a different color. Full description
productRibbonBgColor	`colorPicker`	Custom product ribbon background color. Full description
productRibbonFontColor	`colorPicker`	Custom product ribbon font color. Full description

primaryColor¶

Color used for active, clickable elements (e.g. buttons, links). Default is #464fe5.

schema

{
  "type": "colorPicker",
  "name": "primaryColor",
  "label": "Main color",
  "labelDescription": "This color and its shades are used for active, clickable elements (e.g. buttons, links)",
  "isRequired": true,
  "defaultValue": "#464fe5"
}

secondaryColor¶

Color used for details (e.g. to mark promotions). Default is #d6302d.

schema

{
  "type": "colorPicker",
  "name": "secondaryColor",
  "label": "Accent color",
  "labelDescription": "This color and its shades are used for important details (e.g. to mark promotions)",
  "isRequired": true,
  "defaultValue": "#d6302d"
}

neutralColor¶

Color used for texts, separators, backgrounds. Default is #8c98a8.

schema

{
  "type": "colorPicker",
  "name": "neutralColor",
  "label": "Neutral color",
  "labelDescription": "This color and its shades are used for texts, separators, backgrounds",
  "isRequired": true,
  "defaultValue": "#8c98a8"
}

globalBodyBackgroundColor¶

Background color. Default value is white (#fff).

schema

{
  "type": "colorPicker",
  "name": "globalBodyBackgroundColor",
  "label": "Page background color",
  "isRequired": true,
  "defaultValue": "#fff"
}

textColor¶

Default text color is color set in neutralColor. Check Other (only for text) option to choose another color only for text.

schema

{
  "type": "radio",
  "name": "textColor",
  "label": "Choose a text color",
  "isRequired": true,
  "hint": "**Text elements differ in shades** to improve readability and to highlight important information. Shades are created automatically based on the selected color.",
  "defaultValue": "@neutralColor",
  "options": {
    "radioOptions": [
      {
        "key": "@neutralColor",
        "label": "Neutral color"
      },
      {
        "key": "@otherColor",
        "label": "Other (only for text)"
      }
    ]
  }
}

globalFontColor¶

Custom color only for texts, but it also has default value. Field is active anf required if Other (only for text) option in textColor is selected. Default is #111316.

schema

{
  "type": "colorPicker",
  "name": "globalFontColor",
  "label": "Text color",
  "isHidden": 1,
  "defaultValue": "#111316"
}

baseFontFamilyName¶

Field for font selection. Default font is Inter. Clik here to see list of available fonts.

schema

{
  "type": "fontFace",
  "name": "baseFontFamilyName",
  "label": "Select a font",
  "options": [],
  "isRequired": true,
  "defaultValue": "Inter"
}

baseFontSize¶

Field for text size selection. Default size is 16px. Maximum size is 400px.

schema

{
  "type": "number",
  "name": "baseFontSize",
  "label": "Base text size",
  "isRequired": true,
  "hint": "**The store uses 4 text sizes**: XS, S, M, L. The base text size is M and other sizes are determined based on it. Check a few pages of the store to make sure that all texts are legible.",
  "defaultValue": 16,
  "options": { "postfix": "px" },
  "validators": [
    { "type": "positiveNumber" },
    { "type": "int" },
    { "type": "lessEqThan", "options": { "max": 400 } },
    { "type": "greaterEqThan", "options": { "min": 1 } }
  ]
}

baseLineHeight¶

Field for setting line height. Default line height is 24px. Maximum height is 400px.

schema

{
  "type": "number",
  "name": "baseLineHeight",
  "label": "Line height",
  "isRequired": true,
  "defaultValue": 24,
  "options": { "postfix": "px" },
  "validators": [
    { "type": "positiveNumber" },
    { "type": "int" },
    { "type": "lessEqThan", "options": { "max": 400 } },
    { "type": "greaterEqThan", "options": { "min": 1 } }
  ]
}

headersOtherColor¶

Check this option to choose a custom color of headers.

schema

{
  "type": "checkbox",
  "name": "headersOtherColor",
  "label": "Display headlines in a different color"
}

hxFontColor¶

Field for setting a custom color of headers. It is active after checking the headersOtherColor checkbox. Default is #111316.

schema

{
  "type": "colorPicker",
  "name": "hxFontColor",
  "label": "Headers color",
  "isHidden": 1,
  "defaultValue": "#111316"
}

headersOtherFont¶

Field for setting the font of headers. Check this option to display list of available fonts.

schema

{
  "type": "checkbox",
  "name": "headersOtherFont",
  "label": "Display headlines in a different font"
}

headersFont¶

Field for setting custom font of headers. It is active and required after checking the headersOtherFont checkbox. Default font is Inter. Clik here to see list of available fonts.

schema

{
  "type": "fontFace",
  "name": "headersFont",
  "label": "Headers font",
  "isHidden": 1,
  "defaultValue": "Inter"
}

hxFontWeight¶

Field for setting font weight. There are three font weights available: Regular (400), Semibold (500), Bold (700). Default value is Regular.

schema

{
  "type": "select",
  "name": "hxFontWeight",
  "label": "Font weight",
  "isRequired": true,
  "defaultValue": 400,
  "options": {
    "isWithSearch": 0,
    "selectOptions": [
      { "key": 400, "label": "Regular" },
      { "key": 500, "label": "Semibold" },
      { "key": 700, "label": "Bold" }
    ]
  }
}

headersSize¶

Field for setting size of headers. Available range is 100-130%. Default value is 100%.

schema

{
  "type": "number",
  "name": "headersSize",
  "label": "Headers size",
  "labelDescription": "Available range: 100-130%",
  "isRequired": true,
  "defaultValue": 100,
  "hint": "You resizes all header types (H1-H6). Check a few pages of the store to make sure that all the headings are legible.",
  "options": { "postfix": "%" },
  "validators": [
    { "type": "positiveNumber" },
    { "type": "int" },
    { "type": "lessEqThan", "options": { "max": 130 }},
    { "type": "greaterEqThan", "options": { "min": 100 } }
  ]
}

hxLineSpacingMultiplier¶

Field for setting line height of headlines. Calculated as a percentage based on header size. Available range is 100-130%. Default value is 110%.

schema

{
  "type": "number",
  "name": "hxLineSpacingMultiplier",
  "label": "Line height",
  "labelDescription": "Available range: 100-130%",
  "isRequired": true,
  "defaultValue": 110,
  "options": { "postfix": "%" },
  "validators": [
    { "type": "positiveNumber" },
    { "type": "int" },
    { "type": "lessEqThan", "options": { "max": 130 } },
    { "type": "greaterEqThan", "options": { "min": 100 } }
  ]
}

btnBorderRadius¶

Field for setting the rounding of buttons. Default value is 2px.

schema

{
  "type": "number",
  "name": "btnBorderRadius",
  "label": "Rounded corners of the buttons",
  "options": { "postfix": "px" },
  "isRequired": true,
  "validators": [
    { "type": "positiveNumber" },
    { "type": "int" }
  ],
  "defaultValue": 2
}

buttonColor¶

Field for setting the color of buttons. Default value is color set in primaryColor field. Check Other option to choose another color only for buttons.

schema

{
  "type": "radio",
  "name": "buttonColor",
  "label": "Choose a button color",
  "isRequired": true,
  "defaultValue": "@primaryColor",
  "options": {
    "radioOptions": [
      { "key": "@primaryColor", "label": "Main color" },
      { "key": "@otherColor", "label": "Other" }
    ]
  }
}

btnBgColorPrimary¶

Field for setting custom color of buttons. Field is active and required if Other option in buttonColor is selected. Default value is white (#fff).

schema

{
  "type": "colorPicker",
  "name": "btnBgColorPrimary",
  "label": "Button color",
  "isHidden": 1,
  "defaultValue": "#fff"
}

btnColorPrimary¶

Text color on the button.

schema

{
  "type": "colorPicker",
  "name": "btnColorPrimary",
  "label": "Text color on the button",
  "isRequired": true,
  "defaultValue": "#FFF"
}

secondaryButtonStyle¶

Secondary button style.

Options:

default - Automatically selected for primary button (brighter)
other - Other

When other selected, fields btnBgColorSecondary and btnColorSecondary are required.

schema

{
    "type" : "radio",
    "name" : "secondaryButtonStyle",
    "label" : "Choose a button style",
    "isRequired" : true,
    "defaultValue" : "default",
    "options" : {
        "radioOptions" : [
            { "key" : "default", "label" : "Automatically selected for primary button (brighter)" },
            { "key" : "other", "label" : "Other" }
        ]
    }
}

btnBgColorSecondary¶

Field for setting custom color of secondary buttons. Field is active and required if Other option in secondaryButtonStyle is selected. Default value is #E8E9FC.

schema

{
    "type" : "colorPicker",
    "name" : "btnBgColorSecondary",
    "label" : "Button color",
    "isHidden" : true,
    "defaultValue" : "#E8E9FC",
    "relations" : [
        {
            "parentName" : "secondaryButtonStyle",
            "parentValueToActionsMap" : [
                {
                    "value" : "default",
                    "actions" : {"setHidden", "setDisabled", "setOptional"}
                },
                {
                    "value" : "other",
                    "actions" : {"setVisible", "setAvailable", "setRequired"}
                }
            ]
        }
    ]
}

btnColorSecondary¶

Field for setting custom text color on the secondary buttons. Field is active and required if Other option in secondaryButtonStyle is selected. Default value is #464FE5.

schema

{
    "type" : "colorPicker",
    "name" : "btnBgColorSecondary",
    "label" : "Button color",
    "isHidden" : true,
    "defaultValue" : "#E8E9FC",
    "relations" : [
        {
            "parentName" : "secondaryButtonStyle",
            "parentValueToActionsMap" : [
                {
                    "value" : "default",
                    "actions" : {"setHidden", "setDisabled", "setOptional"}
                },
                {
                    "value" : "other",
                    "actions" : {"setVisible", "setAvailable", "setRequired"}
                }
            ]
        }
    ]
}

outlineColor¶

Field for setting outline color. Default value is color set in neutralColor field. Check Other option to choose another color only for button outline.

schema

{
  "type": "radio",
  "name": "outlineColor",
  "label": "Choose an outline color",
  "isRequired": true,
  "defaultValue": "@neutralColor",
  "options": {
    "radioOptions": [
      { "key": "@neutralColor", "label": "Neutral color" },
      { "key": "@otherColor", "label": "Other" }
    ]
  }
}

btnBorderColorOutline¶

Field for setting different outline color of buttons. Field is active and required if Other option in outlineColor is selected. Default value is transparent.

schema

{
  "type": "colorPicker",
  "name": "btnBorderColorOutline",
  "label": "Outline color",
  "isHidden": 1,
  "defaultValue": "transparent"
}

btnBorderWidthOutline¶

Field for setting outline thickness. Default value is 1px.

schema

{
  "type": "number",
  "name": "btnBorderWidthOutline",
  "label": "Outline thickness",
  "isRequired": true,
  "options": { "postfix": "px" },
  "validators": [
    { "type": "positiveNumber" },
    { "type": "int" }
  ],
  "defaultValue": 1
}

textColorOnTheButton¶

The text color on the outline buttons.

Options:

default - Text color
other - Other, set a custom text color on button

When other selected, field btnColorOutline is required.

schema

{
    "type" : "radio",
    "name" : "textColorOnTheButton",
    "label" : "Choose the text color on the button",
    "isRequired" : true,
    "defaultValue" : "default",
    "options" : {
        "radioOptions" : [
            { "key" : "default", "label" : "Text color" },
            { "key" : "other", "label" : "Other" }
        ]
    }
}

btnColorOutline¶

Field for setting custom text color on outline buttons. Field is active and required if Other option in textColorOnTheButton is selected. Default value is #5C657E.

schema

{
    "type" : "colorPicker",
    "name" : "btnColorOutline",
    "label" : "Text color",
    "isHidden" : true,
    "defaultValue" : "#5C657E",
    "relations" : [
        {
            "parentName" : "textColorOnTheButton",
            "parentValueToActionsMap" : [
                {
                    "value" : "default",
                    "actions" : ["setHidden", "setDisabled", "setOptional"]
                },
                {
                    "value" : "other",
                    "actions" : ["setVisible", "setAvailable", "setRequired"]
                }
            ]
        }
    ]
}

linkColor¶

Field for setting color of links. Default value is color set in primaryColor field. Check Other option to choose another color only for links.

schema

{
  "type": "radio",
  "name": "linkColor",
  "label": "Select a link color",
  "isRequired": true,
  "defaultValue": "@primaryColor",
  "options": {
    "radioOptions": [
      { "key": "@primaryColor", "label": "Main color" },
      { "key": "@otherColor", "label": "Other" }
    ]
  }
}

linkColorPrimary¶

Field for setting different color of links. Field is active and required if 'Other (only for links)' option in linkColor is selected. Default is #464fe5.

schema

{
  "type": "colorPicker",
  "name": "linkColorPrimary",
  "label": "Link color",
  "isHidden": 1,
  "defaultValue": "#464fe5"
}

maxPhotoHeightOnProductTile¶

Field for setting maximum height of the space for the product tile photo in product lists and product carousel modules. Default value is 390px.

schema

{
  "type": "number",
  "name": "maxPhotoHeightOnProductTile",
  "label": "Max. height of the space for the product photo",
  "isRequired": true,
  "options": { "postfix": "px" },
  "defaultValue": 390,
  "validators": [
    { "type": "int" },
    { "type": "greaterEqThan", "options": { "min": 1 } }
  ],
  "hint": "Applies to all tiles (in product lists and product carousel modules)."
}

productTileHeight¶

Product tile height.

schema

{
  "type" : "radio",
  "name" : "productTileHeight",
  "label" : "Thumbnail in the space for the product photo",
  "defaultValue" : "photoDependent",
  "options" : {
    "radioOptions" : [
      { "key" : "cover", "label" : "Fill the space", "labelDescription" : "The thumbnail may get cropped." }, 
      { "key" : "fixed", "label" : "Fit the thumbnail to the space for the product photo", "labelDescription" : "Margins may appear along the long edge of the thumbnail." },
      { "key" : "photoDependent", "label" : "Fit the space for the product photo to the miniature", "labelDescription" : "Not recommended if product images have different aspect ratios." }
    ]
  }
}

promoRibbonOtherColor¶

Check this option to choose a custom color for the promotions ribbon.

schema

{
  "type": "checkbox",
  "name": "promoRibbonOtherColor",
  "label": "Change ribbon color for products on sale"
}

promoRibbonBgColor¶

Field for setting a custom background color for the promotions ribbon. It is active after checking the promoRibbonOtherColor checkbox. Default value is the color set in secondaryColor.

schema

{
  "type": "colorPicker",
  "name": "promoRibbonBgColor",
  "label": "Ribbon background color",
  "isHidden": 1,
  "defaultValue": "@secondaryColor"
}

promoRibbonFontColor¶

Field for setting a custom text color for the promotions ribbon. It is active after checking the promoRibbonOtherColor checkbox. Default value is white (#ffffff).

schema

{
  "type": "colorPicker",
  "name": "promoRibbonFontColor",
  "label": "Ribbon text color",
  "isHidden": 1,
  "defaultValue": "#ffffff"
}

bestsellerRibbonOtherColor¶

Check this option to choose a custom color for the bestseller ribbon.

schema

{
  "type": "checkbox",
  "name": "bestsellerRibbonOtherColor",
  "label": "Change ribbon color for bestsellers"
}

bestsellerRibbonBgColor¶

Field for setting a custom background color for the bestseller ribbon. It is active after checking the bestsellerRibbonOtherColor checkbox. Default value is the color set in primaryColor.

schema

{
  "type": "colorPicker",
  "name": "bestsellerRibbonBgColor",
  "label": "Ribbon background color",
  "isHidden": 1,
  "defaultValue": "@primaryColors100"
}

bestsellerRibbonFontColor¶

Field for setting a custom text color for the bestseller ribbon. It is active after checking the bestsellerRibbonOtherColor checkbox. Default value is the color set in globalFontColor.

schema

{
  "type": "colorPicker",
  "name": "bestsellerRibbonFontColor",
  "label": "Ribbon text color",
  "isHidden": 1,
  "defaultValue": "@globalFontColor"
}

newRibbonOtherColor¶

Check this option to choose a custom color for the new products ribbon.

schema

{
  "type": "checkbox",
  "name": "newRibbonOtherColor",
  "label": "Change ribbon color for new products"
}

newRibbonBgColor¶

Field for setting a custom background color for the new products ribbon. It is active after checking the newRibbonOtherColor checkbox. Default value is the color set in primaryColor.

schema

{
  "type": "colorPicker",
  "name": "newRibbonBgColor",
  "label": "Ribbon background color",
  "isHidden": 1,
  "defaultValue": "@primaryColors700"
}

newRibbonFontColor¶

Field for setting a custom text color for the new products ribbon. It is active after checking the newRibbonOtherColor checkbox. Default value is white (#ffffff).

schema

{
  "type": "colorPicker",
  "name": "newRibbonFontColor",
  "label": "Ribbon text color",
  "isHidden": 1,
  "defaultValue": "#ffffff"
}

productRibbonOtherColor¶

Check this option to choose a custom color for the product ribbon.

schema

{
  "type": "checkbox",
  "name": "productRibbonOtherColor",
  "label": "Change product ribbon colors"
}

productRibbonBgColor¶

Field for setting a custom background color for the product ribbon. It is active after checking the productRibbonOtherColor checkbox. Default value is the color set in neutralColor.

schema

{
  "type": "colorPicker",
  "name": "productRibbonBgColor",
  "label": "Ribbon background color",
  "isHidden": 1,
  "defaultValue": "@neutralColors100"
}

productRibbonFontColor¶

Field for setting a custom text color for the product ribbon. It is active after checking the productRibbonOtherColor checkbox. Default value is the color set in globalFontColor.

schema

{
  "type": "colorPicker",
  "name": "productRibbonFontColor",
  "label": "Ribbon text color",
  "isHidden": 1,
  "defaultValue": "@globalFontColor"
}