Product Listing - Category Filters

Introduction

The “ Product Listing - Category Filters” module provides you with the functionality to easily add your products on your website. Write information about the product, its pricing, any discount information, quick view with pop-up image zooms and multiple images of every product and buy-now button. The module also has filter buttons to let your customer find relevant products easily.

 

SUPPORT:

If you need assistance at any step of the way; get in touch with us at ProductSupport@transfunnel.com
And get Premium Support from Transfunnel - HubSpot's Elite Solutions Partner

Product Listing - Category Filters

Possible Layouts

Layout Options:Welcome to the “Product Listing - Category Filters” module. The module has images, filter button, thumbnail image, zoom in feature, product information and more.

  • Filter buttons: The module contains filter button to ease product search for your buyers with easy user interface.
  • Product catalogue (in rows and columns):The module showcases products in rows and columns, making it easier for the user to make comparison and purchasing decisions with a buy-now button at the bottom of every product.
  • Transition animations: The module has subtle transition animation to let user engaged on page during transition.
  • Responsive and mobile-friendly:The Product Listing - Category Filters” module is designed to provide optimal viewing experiences on various devices, including desktops, tablets, and mobile phones. With its responsiveness, your page will adapt seamlessly, ensuring a consistent and engaging experience across all platforms.
  • Customisation: The “Product Listing - Category Filters” module comes with a bunch of customisations, all of which you can control to give the user a seamless experience in tandem with your website’s colours, style, and design.

Content features: 

Easily add/remove products from the module content settings with further customisation options. 

You can also add or remove product category with enable/disable toggle of a button.  

Exploring more products can be done in 2 ways, one by changing page and other by staying on the same page but load more option. One at a time can be enabled only. 

Decide product category, add or remove product images. 

Add information about product in product card setting. 

Customise the quick view button text, product description and information in quick view settings.  

Add alt-text, size and maximum size for quick view carousel.  

 

Style features: 

Customise the background spacing, category and product from style settings. 

Customise background colour from background setting. 

Customise the margins and padding from spacing settings. 

Customise the dropdown background, arrow, label, text, active text and active border colours form category settings. 

In product settings, the difference is only in pagination or load more settings, rest all settings are discussed below: 

Customise title text colour, style, size, and line height from title settings.  

Ratings:  

Add rating (stars) colours. 

Customise new and old pricing’s text colour, style, size from price settings 

Buttons

Customise the button’s text, background, border, spacing and corner from buttons settings. 

Availability:  

Customise availability text colour, size, shape, style for each available and unavailable marked product. 

Image:  

Customise the image button text and overlay colours from image settings. 

Discount:  

Customise the discount text colour, style, size shape and it’s background colour from discount setting. 

Quick View:  

Customise quick view description text colour, style, shape and size from quick view settings. 

Load More and Pagination settings are discussed below: 

Load more:  

Customise the load more text size, style, shape, hover colour, background color, background colour and border colours from load more settings. 

Customise the pagination text, background and borders from pagination settings. 

 

Conclusion:

The “Product Listing - Category Filters” module provides you with a powerful tool to enhance the user experience by helping you add your products on your website. Write information about the product, its pricing, any discount information, quick view with pop-up image zooms and multiple images of every product and buy-now button. The module also has filter buttons to let your customer find relevant products easily. Start leveraging “ Product Listing - Category Filters” module today.