Using attributes in products

Attributes are additional data about products that help highlight important features or information to the shopper.

To use an attribute in a product you first have to create it globally in "attributes". Once you have done that a value can be set for that attribute in any product. There are two attribute types: string (text) and boolean (true or false).

Displaying attributes on the product detail page (/p/)

The default product detail page will display attributes, however you might want to change the layout or behaviour.

The following code will enumerate the attributes associated with the product and write them out on the page.

{% For Attribute In SelectedProduct.Attributes %}
<h4>{{ Attribute.Name }}</h4>
<p>{{ Attribute.Value }}</p>
{% EndFor %}

Organic

Yes

Allergy advice

Contains no known allergens.

A boolean and a string attribute displayed using the above code.

Using boolean attributes to display icons

{% For Attribute In SelectedProduct.Attributes %}
    {% If Attribute.TypeIsYesNo %}
        {% If Attribute.Value %}
            <img src="/media/{{ Attribute.Name }}.png" alt=" " />
        {% EndIf %}
    {% EndIf %}
{% EndFor %}

A graphic displayed using a boolean attribute.

For this example to work an appropriately named image file would need to be uploaded in "media and files" in the theme.

Just displaying the string attributes

If you have used the boolean attribute to display icons you will also want to separately enumerate the attributes list displaying just the string attributes.

{% For Attribute In SelectedProduct.Attributes %}
    {% If Attribute.TypeIsText %}
        {% If Attribute.Value %}
            <h4>{{ Attribute.Name }}</h4>
            <p>{{ Attribute.Value }}</p>
        {% EndIf %}
    {% EndIf %}
{% EndFor %}