Project layout

To change front view of categories, edit the Categories component, click on the Render tab and point out the file to use. By default you have two views available :

  • menu_list, which displays a list of categories, for sidebar for example,
  • image_list, which displays a list of thumbs, usefull for displaying sub categories inside a page.

You can make you're own view. Save it to the Categories component folder and point out to the name of the file you've created, and voilĂ .

<img src="{{ product.featured_images[0].thumb(300, 300) }}"
    title="{{ product.featured_images[0].title }}"
    alt="{{ product.featured_images[0].description }}">

You can replace the thumb(300, 300) by any value, depending of the size of image you want to display (i.e. thumb(450, 200))

{% for image in product.featured_images %}
    <img src="{{ image.thumb(300, 300) }}"
         title="{{ image.title }}"
         alt="{{ image.description }}">
{% endfor %}

Working with groups and custom fields

Groups are a great way to add information to your products or categories.

First of all you have to create your groups, at least one, let's call it 'Product features'

Now, create custom fields. To add cursom fields you need two informations :

  • a display name, which would identify our custom field,
  • a template code, which we would use to get the value of this custom field.

So, let's make a custom field called Color, with template code color and another one called Brand, wit template code brand, and link them to our Product features group.

Go inside your products, edit one and link it to our Product features group, then save.

Now you can access your color and brand custom fields and enter our values, let's make Green, Blue for our color custom field, and Apple for our brand custom field, and that's it !

Display custom fields of a product

{{ product.custom_field_template_code }}

Example : Take our last example, with our custom field named Brand, with templade code as brand, now you can display it just like that :

{{ product.brand }}

Want more ? Custom fields and groups also works for categories !

{{ category.brand }}