Vikram Singh
Many HubSpot users mistakenly believe that HubSpot CMS is unable to handle or display data driven pages due to its marketing focus. However, this is a misconception as HubSpot CMS is fully equipped to showcase structured data on pages with advanced filter, sort, and search logic functions.
In this article, I will guide you through the process of showcasing a products grid on a page to create a data-driven product listing page.
What you will need:
- A HubSpot portal with CMS Pro or CMS Enterprise subscription or a Developer portal
- A list of products
Create a Database Table in HubDB
In your HubSpot portal, head over to "Marketing > Websites", then click on "More Tools > HubDB"
Click Create on next page and enter a name for your table
You will see a table editing interface
Next, add the columns that you need for your products. A column with label "Name" is already there by default. In this example, I am adding following columns
- Product Description (Rich Text)
- Product Image (Image)
- Product Price (Number)
After setting up the columns, you can start adding data by clicking "Add Row"
The CMS will auto-generate a unique ID for the row and you can fill in the rest of the details.
Click Publish after entering the product details.
After creating the data rows, head over to Design Manager and create a new Custom Module. Assign a name to your custom module and then add a Field with type HubDB Row
On the row field, click copy option to get the basic code to access the row
Paste this code in your HubL section
You can customize this code to access certain columns for the database e.g. following code will display name, image and price
The out put will display the columns that you have mentioned in the code
Data driven pages offer a plethora of benefits for your business, particularly when it comes to organizing various types of data such as products, services, job listings, team members, webinars, and white papers. The HubDB tool in your portal even supports excel import and export, making it incredibly convenient to transfer data from excel sheets. By aligning your sheet format with the database columns, you can effortlessly create dynamic pages for each row in your sheet. This allows you to generate numerous pages with minimal effort, making it a valuable feature for your business.
If you have structured data that you would like to showcase on your website, please don't hesitate to contact us. We would be thrilled to assist you and provide examples of how other customers have successfully utilized this feature.
Ready to Showcase Your Data with HubSpot CMS?
If you have structured data you'd like to bring to life on your website, we're here to help! Whether it's product listings, team pages, or any other data-driven content, our team can assist you in utilizing HubDB and building powerful, dynamic pages that engage your audience. Contact us today and see how we can make your data work for you!
