Isotope eCommerce guide

Undoubtedly, the Isotope eCommerce is the most versatile e-commerce solution available for Contao Open Source CMS. Veello Theme supports this extension as of version 1.2.0. Read more about how we integrated the Isotope with our product.

Here you can preview one of our themes dedicated to the e-commerce store: View the demo.

Design settings

Veello Theme adds two new features to the "Header settings" section inside the Design settings:

Display the cart in the header

Allows you to add the Isotope cart button to the header. You can choose the button type and its icon. Additionally, you must select the Panel that will be opened when you click a button. This panel should contain the cart frontend module.

The cart button can be shown in the header.

Display the favorites in the header

In addition to the cart button, you can display the favorites button inside the header. Contrary to its cart equivalent, this button does not trigger a panel but is a simple link that points to the selected page.

The favorites button can be shown in the header.

Product gallery

When using Veello Theme for Isotope, be sure to enable the correct template in the product gallery settings. If you would like to use the lightbox for product images, you have to select the vee_iso_gallery_default template, as shown below.

This template is, in fact, empty, as the lightbox configuration will be taken from the general Design settings.

Check the correct lightbox template in the product gallery settings.

Frontend modules

Here is a complete list of supported Isotope frontend modules. Most have the most straightforward possible settings, but some module types will be described below in detail.

  1. Address book
  2. Cart
  3. Category filter
  4. Checkout
  5. Config switcher
  6. Cumulative filter
  7. Favorites
  8. Order details
  9. Order history
  10. Product filter
  11. Product list / Product variant list
  12. Product reader
  13. Range filter
  14. Related products
  15. Shipping cost calculator
  16. Wishlist details
  17. Wishlist manager

Let's take a look at some frontend modules in detail:

Cart

The cart frontend module can be styled using Style presets like most of the components available in Veello Theme.

In addition to that, you can also manage each button separately. This concept is re-used in other frontend modules, such as the product list and product reader.

To change the default appearance of the button, simply add it to the "Istope button styles" field and configure it accordingly:

Action
The type of button that will be affected.
Button style
The appearance of the button, defined in the Buttons backend module.
Button icon
The icon that will be displayed inside the button.
Icon position
Position of the icon inside the button.
Note

Please note that if you do not define a button, it may still be displayed, just with the default style!

You can manage every button of the cart module individually.

Category filter

The category filter is, in fact, a regular navigation module. Because of that, it contains the standard Veello Theme settings for navigation:

The category filter module is in fact a regular navigation with all its features.

Product filter

The product filter frontend module displays a filter form for your product list. In addition to the regular settings, you can choose the appearance by selecting the type and style presets.

The product filter module contains extra settings to customize the frontend appearance.

Product list / Product variant list / Related products

The settings described in this section affect all product lists, that is:

  1. Product list,
  2. Product variant list,
  3. Related products.

Like other listings in Contao, this one also received extra settings from Veello Theme. You can set the layout type and the grid column widths for every device. Additionally, you can define the general style and the buttons' appearance.

The product list module supports different layouts and grid columns.

Product reader

The product reader will generate the details of your product and will allow your visitors to add a product to the cart. Veello Theme provides a few variants of the module layout. You can customize it by changing the buttons (similar to the cart module) and the product reader style.

The product reader module can have custom buttons and appearance.

Missing something?

E-commerce is a vast topic, and having everything in one place is impossible. However, we are always open to new ideas. If you want a new integration feature for Isotope eCommerce, please let us know via the contact form.