css_var​

Used with style picker to output the CSS variable name corresponding to the configuration.

style_setting | css_var(key_name) returns string

Params​

  • style_setting any: Style picker dynamically configures values.

  • key_name string: The corresponding css configuration property name.

Example​

Get the default row-gap value.

<div style="--info-row-gap: {{section.settings.layout | css_var(`row-gap`)}};">
  content
</div>
{{#schema}}
{
  "name": "Demo",
  "tag": "",
  "settings": [
    {
      "type": "style.layout",
      "id": "layout",
      "label": "layout",
      "default": {
        "flex-wrap": "nowrap",
        "flex-direction": "column",
        "row-gap": "20px",
        "column-gap": "20px"
      }
    }
  ]
}
{{/schema}}
Was this article helpful to you?
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
Legal
Privacy
Terms
Developer Agreement
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.