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.
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.
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.
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.
- Address book
- Cart
- Category filter
- Checkout
- Config switcher
- Cumulative filter
- Favorites
- Order details
- Order history
- Product filter
- Product list / Product variant list
- Product reader
- Range filter
- Related products
- Shipping cost calculator
- Wishlist details
- 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!
Category filter
The category filter is, in fact, a regular navigation module. Because of that, it contains the standard Veello Theme settings for navigation:
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.
Product list / Product variant list / Related products
The settings described in this section affect all product lists, that is:
- Product list,
- Product variant list,
- 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.
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.
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.