ProductAttributes

Purpose

The ProductAttributes reusable renders a two-column (label/value) list of product attribute items (e.g. Material, Gender, Washing instructions).

Where it's rendered

This reusable is rendered by parent templates/components that pass an attributes array, typically from product-related views.

(Example pattern used across the theme)

{% render 'Reusables\\ProductAttributes\\Default', attributes: product.attributes %}

Inputs (Liquid render parameters)

Named parameters:

attributes

The reusable expects attributes to be an array of attribute items.

Template behavior (Liquid + Alpine)

The template renders a <ul> list and iterates attributes.

Each attribute item is rendered only if item.attributeItemValue is truthy.

For each rendered item it outputs a responsive grid:

left column: item.name

right column: item.attributeItemValue

It applies alternating zebra background styles based on index parity (forloop.index0 | modulo: 2).

There is no Alpine wiring in this reusable (no x-data, no $store usage).

Data contract (JS runtime)

This reusable is Liquid-only, but it has a strict runtime data contract for each attribute item.

Model shape (storefront example)

Example (from a real ProductAttributes model dump) keeping only the relevant fields for this reusable:

{
  "attributes": [
    {
      "name": "Sample text",
      "slug": "sample",
      "usedAsFilter": false,
      "displayOnProduct": true,
      "displayOnList": true,
      "displayOnCompare": true,
      "attributeId": "Attribute Id",
      "attributeItemId": "Attribute Item Id",
      "attributeItemValue": "Sample text"
    },
    ...
  ]
}

`attributes[]` item fields (as consumed by Liquid)

Required for meaningful rendering:

name

Rendered as the label (left column).

attributeItemValue

Rendered as the value (right column). Also acts as a guard: if falsy, the item is not rendered.

Optional fields (present in real data but not used by the current template):

slug

usedAsFilter

displayOnProduct

displayOnList

displayOnCompare

attributeId

attributeItemId

JavaScript

Global object

Global object: productattributesreusabledefault

Notes:

It is currently an empty object ({}) and is not referenced by the Liquid template.

Dependencies

Liquid: Reusables/ProductAttributes/Default.liquid

Notes

If attributeItemValue contains long strings, the layout will wrap inside the right column.

This reusable does not currently use translations (Default.json is effectively empty).

ProductAttributes

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

Model shape (storefront example)#

attributes[] item fields (as consumed by Liquid)#

JavaScript#

Global object#

Dependencies#

Notes#