Theme System Configuration¶

You can reach system configuration values in your twig file using variable systemConfig.

example

Number of products on page: {{ systemConfig.productsCount }}

Properties¶

Attribute name	Type	Description
viewTransition	`checkbox`	Enable view transition. Full description
systemFavicon	`imageUpload`	Favicon. Icon in the address bar (favicon). Full description
productsCount	`number`	Number of products on page. Full description
xlSize	`number`	Product photo XL size. Full description
lSize	`number`	Product photo L size. Full description
mSize	`number`	Product photo M size. Full description
sSize	`number`	Product photo S size. Full description
xsSize	`number`	Product photo XS size. Full description

systemConfig.viewTransition¶

Enable view transition.

twig example

{% if systemConfig.viewTransition %}
    <meta name="view-transition" content="same-origin" />
{% endif %}

result

<meta name="view-transition" content="same-origin" />

schema

{
  "type" : "checkbox",
  "name" : "viewTransition",
  "label" : "Enable view transition",
  "isRequired" : false,
  "defaultValue" : 0
}

systemConfig.systemFavicon¶

Favicon. Icon in the address bar (favicon). When favicon is not set this property will return null. Element does not support translations, so you can set only one favicon for all language versions.

schema

{
  "type": "imageUpload",
  "name": "systemFavicon",
  "label": "Favicon",
  "options": {
    "allowedExtensions": ["jpg", "png", "gif", "ico"]
  }
}

Click here to see more information about imageUpload element.

twig example

Favicon URL: {{ systemConfig.systemFavicon.paths.original }}

result

Favicon URL: https://path/to/image/original

systemConfig.productsCount¶

Represents number of products on page.

twig example

Number of products on page: {{ systemConfig.productsCount }}

result

Number of products on page: 24

schema

{
  "type": "number",
  "name": "productsCount",
  "label": "Number of products on page",
  "labelDescription": "Max. 72.",
  "isRequired": true,
  "defaultValue": 24,
  "validators": [
    { "type": "int" },
    { "type": "lessEqThan", "options": { "max": 72 } },
    { "type": "greaterEqThan", "options": { "min": 1 } }
  ]
}

systemConfig.xlSize¶

Maximum dimension of the longer side for XL size of product photo. This setting apply to product photos displayed in all modules.

twig example

<b>XL size: {{ systemConfig.xlSize }}px.</b>

result

<b>XL size: 750px.</b>

schema

{
  "type": "number",
  "name": "xlSize",
  "label": "XL",
  "isRequired": true,
  "options": { "postfix": "px" },
  "defaultValue": 750,
  "validators": [
    { "type": "int" },
    { "type": "greaterEqThan", "options": { "min": 1 }}
  ]
}

systemConfig.lSize¶

Maximum dimension of the longer side for L size of product photo. This setting apply to product photos displayed in all modules.

twig example

<b>L size: {{ systemConfig.lSize }}px.</b>

result

<b>L size: 500px.</b>

schema

{
  "type": "number",
  "name": "lSize",
  "label": "L",
  "isRequired": true,
  "options": { "postfix": "px" },
  "defaultValue": 500,
  "validators": [
    { "type": "int" },
    { "type": "greaterEqThan", "options": { "min": 1 }}
  ]
}

systemConfig.mSize¶

Maximum dimension of the longer side for M size of product photo. This setting apply to product photos displayed in all modules.

twig example

<b>M size: {{ systemConfig.mSize }}px.</b>

result

<b>M size: 300px.</b>

schema

{
  "type": "number",
  "name": "mSize",
  "label": "M",
  "isRequired": true,
  "options": { "postfix": "px" },
  "defaultValue": 300,
  "validators": [
    { "type": "int" },
    { "type": "greaterEqThan", "options": { "min": 1 }}
  ]
}

systemConfig.sSize¶

Maximum dimension of the longer side for S size of product photo. This setting apply to product photos displayed in all modules.

twig example

<b>S size: {{ systemConfig.sSize }}px.</b>

result

<b>S size: 150px.</b>

schema

{
  "type": "number",
  "name": "sSize",
  "label": "S",
  "isRequired": true,
  "options": { "postfix": "px" },
  "defaultValue": 150,
  "validators": [
    { "type": "int" },
    { "type": "greaterEqThan", "options": { "min": 1 }}
  ]
}

systemConfig.xsSize¶

Maximum dimension of the longer side for XS size of product photo. This setting apply to product photos displayed in all modules.

twig example

<b>XS size: {{ systemConfig.xsSize }}px.</b>

result

<b>XS size: 50px.</b>

schema

{
  "type": "number",
  "name": "xsSize",
  "label": "XS",
  "isRequired": true,
  "options": { "postfix": "px" },
  "defaultValue": 50,
  "validators": [
    { "type": "int" },
    { "type": "greaterEqThan", "options": { "min": 1 }}
  ]
}