[{"value":"Params","id":"params","hLevel":2,"level":1},{"value":"Example","id":"example","hLevel":2,"level":1}]

class_list

Generates CSS class names based on style picker setting.

Supports passing either a single style picker setting or the entire settings object:

Style Picker Setting: Returns the class list corresponding to the current style setting, e.g., {{ block.settings.layout | class_list() }}
Settings object: Returns the class list for all style picker in the settings, e.g., {{ block.settings | class_list() }}

setting | class_list() returns [string]

Params

setting any: Style picker setting.

Example

<div class="product-detail__info {{block.settings.layout | class_list()}}">
  ...
</div>
<div class="product-card {{block.settings | class_list()}}">
  ...
</div>
{{#schema}}
{
  "name": "Demo",
  "tag": "",
  "settings": [
    {
      "type": "style.layout",
      "id": "layout",
      "default": {
        "flex-wrap": "nowrap",
        "flex-direction": "column",
        "row-gap": "20px",
        "column-gap": "20px"
      }
    },
    {
      "type": "style.spacing",
      "id": "spacing",
      "default": {
        "padding-top": "40px",
        "padding-right": "0px",
        "padding-bottom": "40px",
        "padding-left": "0px",
        "@media (--mobile)": {
          "padding-top": "0px",
          "padding-bottom": "0px"
        }
      }
    }
  ]
}

Was this article helpful to you?

SHOPLINE

Legal

class_list​

Params​

Example​

class_list

Params

Example