Product Listing

Product Listing 


Product Listing Module is an alternative way for you to have your own product listing in hubspot without using a hubdb. If you're familiar with hubspot, I'm sure you know how much it costs to enable the hubdb feature, but with this module, you don't need to as long as you're okay with it's limitation.

Yes, there are certain limitations of not using hubdb, the module could act like you're using hubdb but it cannot change the meta data of the page, such as title, description and keywords.


For advance you users, this can be turned and enhanced into a mini ecommerce.


Key Features

  • Customizable Look and Feel
    • Section background
    • Font
    • Button's Background and Text Color
    • Price Color
  • Mobile Ready
  • Search Feature (sidebar)
  • Custom Container Width
  • Full Ajax
  • Product Listing View
  • Product Single View with Photo Gallery
  • Populate product_url and product_sku field when submitting hubspot form
  • Built in Breadcrumbs, Pagination and Sorting
  • Can customize button behavior between Link or Custom HTML (Added for advance users that can integrate a payment action)

How the module works

Options enables you to update the following:

  • Item per page - How many products displayed each page
  • Currency Symbol - To change what currency symbol will display next to the price (By default the module is using dollar sign "$")
  • Show Brands on Sidebar - This will display the list of brands in the sidebar next to the categories.
  • Font - To change the font to use for this module.
  • Background - To change the sections background color or use image as background too.
  • Container - There 3 options to choose from, custom class, full width and custom width.
    • Custom width allows you to put a specific width of the container
    • Custom class allows you to put a class
    • Full width is will put 100% in module as width
  • Colors - Allows you to change the background and text of the following:
    • Sidebar's background
    • Button's background and text color, please check the visual illustration to see what are the elements are using this.
    • Price's color

Button Settings enables you to change how it should work.

  • Custom - When you enable it, the Hubspot Form and Button Label will be hidden and will add a button field in add product phase.
  • Hubspot Form - To select a hubspot form in which will be displayed at the popup when click the button.
    • Please add a hidden field product_url and product_sku, this will be filled automatically everytime user selects a product.
  • Button Label - It'll be the text for the button. Check visual illustration to see what element it was used.

Products - These are the products that will be displayed on the module. Upon clicking the add please fill the fields accordingly.

  • Product Name - This is where you put the name of the product
  • Product SKU - This should be unique as this will serve as your tracker from submitted entry from hubspot form.
  • Price - To set a price to the product. You may leave this empty if your intention was to force your user ask for a quick quote about the product.
  • Details - Used richtext so you can put a description to whatever format you like.
  • Product Photos - Can add up to for images
  • Category Name - To set a category to a product. Please be advise that you need this to be consistent as it will create new entry in the sidebar if their name don't exactly match. E.g. You put Phone and on the other product you put Phones , then in the sidebar there will be Phones and Phone to choose from.
  • Brand Name - To set a brand to a product. Please be advise that you need this to be consistent as it will create new entry in the sidebar if their name don't exactly match. E.g. You put Lining and on the other product you put Li-Ning , then in the sidebar there will be Lining and Li-Ning to choose from.

Custom Button - Available only if Custom has been toggled from the button settings phase.

  • Button Type - Have two options to choose from between Link and Richtext/Custom HTML
  • Link - To add a link where it should redirect when clicking the button.
  • Button Label - Ability to change the button label each products.
  • Richtext - Ability to have a custom html and is intended only for advance users.


Please send an email to [email protected] if you have any concerns or customization request of module.


Extra Service

Now if you still wanted to have a product listing using hubdb because of its advantages over seo or you have a custom design to apply for the module you can always contact me for a quote.