Product Listing

Product Listing 


Product Listing module is an alternative solution for product listing that can only be done using hubdb and limited only to render a content and can not change the meta data such as title, keywords and description for SEO like hubdb does, as hubspot doesn't have this feature for custom module at the moment. Though turning this into full e-commerce is not possible within hubspot but with a third party it might be possible.


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.