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
customIcons	`checkbox`	Enable custom icon set. Full description
systemIcons	`imageUpload`	Custom icon set. 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 learn more about the 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 }}
  ]
}

systemConfig.customIcons¶

Enable custom icons set.

twig example

{% if systemConfig.customIcon %}
    <p>Custom icons enabled. Replace default icons with your own. </p>
{% endif %}

result

<p>Custom icons enabled. Replace default icons with your own. </p>

schema

{
  "type" : "checkbox",
  "name" : "customIcons",
  "label" : "Replace default icons with your own",
  "defaultValue" : 0,
  "children": [
    { "name": "systemIcons" }
  ]
}

systemConfig.systemIcons¶

Custom icon set.

Click here to learn more about the imageUpload element.

twig example

systemIcons URL: {{ systemConfig.systemIcons.paths.original }}

result

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

schema

{
  "type": "imageUpload",
  "name": "systemIcons",
  "label": "Custom icons set",
  "hint": {
    "message": "Check [how to prepare a file with your custom icon set](%s). If the uploaded file is invalid, the template will use the default icon set.",
    "placeholderValues": ["https://www.shoper.pl/learn/artykul/nowosc-wgrywanie-wlasnych-ikon-w-szablonie-storefront"]
  },
  "options": {
    "allowedExtensions": ["svg"],
    "allowedExtensionsLabel": "Required format"
  },
  "isHidden": 1,
  "relations": [
    {
      "parentName": "customIcons",
      "parentValueToActionsMap": [
        {
          "value": 0,
          "actions": ["setHidden", "setDisabled", "setOptional"]
        },
        {
          "value": 1,
          "actions": ["setVisible", "setAvailable", "setRequired"]
        }
      ]
    }
  ]
}