One of the most recent features that we added to Tiendanube is the possibility of having in-store filterswhich are generated automatically taking as reference the categories and variants of the products.
These filters allow a better navigation of the store because the customer has the facility to be able to filter products based on your preferences and see only those that are within the chosen criteria.
Naturally, this new functionality has a visual impact on the store. In this post, we want to teach you how to incorporate filters into a store using custom design. To work!
Step 1
Copy the top three snipplets from any of the base templates: sidebar.tpl, categories.tpl and filters.tpl.
Step 2
Edit the file category.tpl adding the following:
{% set show_sidebar = settings.product_filters %} …
Step 3
In the File settings.txtadd the corresponding configuration in the section menus.
checkbox name = product_filters description = Show sidebar with filters in product list
Step 4
Also add the default configuration in defaults.txt.
product_filters = 1
step 5
Add the corresponding translations in translations.txt.
is “Size” pt “Tamanho” in “Size” is “Color” pt “Cor” in “Color” is “More colors” pt “Mais cores” in “More colors” is “Categories” pt “Categories” in “Categories ” is “Show more categories” pt “Show more categories” in “Show more categories” is “Show sidebar with filters in product list” pt “Show sidebar with filters in product list”
Step 6
Apply the corresponding styles via CSS taking into account the template itself. These are the main styles:
#categories-column #show-more-cats { text-align: center; display: block; border-top: 1px solid #ccc; position:relative; margin-top: 20px; margin-bottom: 40px; } #categories-column #show-more-cats i.fa { color: #ccc; top: -1px; position: absolute; background: #fff; padding: 0 10px 5px 10px; left: 38%; width: 20px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } #filters-column .color-filter { width: 20px; height: 20px; border: 1px solid #ccc; margin: 0 8px 8px 0; } #filters-column .size-filter { background: transparent; border: 1px solid #999; margin: 0 8px 8px 0; } #filters-column .other-filter { background: transparent; width: 100%; margin: 0 8px 0 0; border: 0; text-align: left; } .filter-remove { background: #eee; border: 1px solid #999; width: 100%; text-align: left; position:relative; margin: 0 0 10px 0; colour: #333; } .filter-remove:hover {
That is all! We hope that this will be useful to you when designing your stores.
Remember that if you are a designer, you can register as a commercial partner of Tiendanube and thus access a demo store to test how to make these changes and many others. If you haven’t already, .
Facebook Comments
Disqus