Custom category, brand and product fields

The custom fields extension allows you to create individual data fields for your categories, brands or products, add different data to them for each category/brand/product, and display or use that data on the pages on your website.

For example, you may want to use the system to display a specification table on your product pages.

This would be done by creating a custom field for each specification type, like 'Colour' or 'Screen Size Diagonal' and then entering the appropriate data for each product.

You would then edit the product.twig file, using the page editor, to display the information.


Configuring custom fields

Once you've activated the extension, select 'settings' from the left menu and then 'custom fields'.

At the top of the page you can use the box to create a new custom field.

In the Item Type field select which type of field you are creating, either one for products, categories or brands.

In the Name field you need to enter the variable that you'd like to use when referencing the data in the field on your website files. You should only use letters and the _ character here (no spaces).

The Sort Order field enables you to organise the order in which the custom fields are displayed when adding data to them on pages in the admin system. You can leave this field blank if the order is not important to you.

In the Label field you can enter the label of the field, as it will display to you when adding/editing the product, category or brand.

In the Type field you should select what type of data the field will contain. In our example above (the specification table) you would use 'Text Box'.

Depending on the Type selected, you may be able to configure the Allowed Values for the field. For example if you select 'List' then you'll be able to enter the available values (separating each with a comma).


Text Box A text string
Toggle Either a TRUE or FALSE option
Choice A list of available values for you to choose one of, using radio buttons.
List A list of available values for you to choose one of, using a drop down list.
Date Picker Pick a date
Date & Time Picker Pick a date & time
Value List Enter a list of individual values
Product List Pick from a list of products

The below is an example of how a custom field might look if configured correctly for a 'Screen Size' attribute.


Entering data for custom fields

When adding/editing a product, category or brand, scroll to the 'custom fields' section.

The fields for the products that you have created will be displayed in this section.

Enter your data into the fields and save the product.


Referencing the data on your theme's files

Data that's attached to a product using custom fields is available on the product object, similar brands are on the brand object and categories on the category object. In our example below we're referencing data on the product object, but to use the other objects you'd just substitute product for brand or category.

You should use the format

product.custom_fields.X

Where X is the name you gave to the field when you created it, e.g.

product.custom_fields.screen_size

Where you have used the Toggle type, the variable will return TRUE if the box is ticked for the product.

Where you use the Value List type, the variable will return an array so you must modify your code accordingly, e.g.

{% for value in product.custom_fields.X %}
    {{ value }}
{% endfor %}

Or you can reference a specific element of the array, e.g. product.custom_fields.X[0] (0 is the first item in the array).

Where you have used the Product List type, this will also return an array which can then be used to output details about the selected product.

{% set product_id  = product.custom_fields.X[0] %}
{% set alternative_product = product(product_id) %}
{{ alternative_product.title }}

Another example,

{% for value in product.custom_fields.X %}
    {% set product_id  = value %}
    {% set alternative_product = product(product_id) %}
    {{ alternative_product.title }}
{% endfor %}

Where you have used the Date Picker or Date & Time Picker type, you can modify the output using Twig's Date Filter.