Creating Data-driven pages in HubSpot Content Hub

Creating Data-driven pages in HubSpot Content Hub

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:

  1. A HubSpot portal with CMS Pro or CMS Enterprise subscription or a Developer portal
  2. 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"

HubDB option under More Tools

Click Create on next page and enter a name for your table

Create HubDB table

You will see a table editing interface

HubDB Tool in HubSpot CMS

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

  1. Product Description (Rich Text)
  2. Product Image (Image)
  3. Product Price (Number)

Add column to HubDB table

Column details in HubDB table

Add image column to HubDB table

After setting up the columns, you can start adding data by clicking "Add Row"

Adding a row in HubDB table

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.

Editing HubDB table row

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

Custom Module - HubDB

On the row field, click copy option to get the basic code to access the row

HubL Code for HubDB Row

Paste this code in your HubL section

Basic HubL code for HubDB row

You can customize this code to access certain columns for the database e.g. following code will display name, image and price

HubL Code to display product details

The out put will display the columns that you have mentioned in the code

Product snipper in HubDB

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!

 

Related Post

Web hooks in HubSpot Private Apps
May 3, 2024
Tips and Tricks, HubSpot CRM Integrations

Web hooks in HubSpot Private Apps

Up until recently, Web hooks were only available for public HubSpot Apps. HubSpot recently announced support for Web hooks in private apps as well. This may not seem like a big deal if you never had to use a private apps. However, the users of...

Read More
How to optimize HubSpot CMS Pages for Performance
March 5, 2024
Tips and Tricks, HubSpot CMS

How to optimize HubSpot CMS Pages for Performance

Ensuring optimal website performance is crucial for enhancing user experience, boosting customer retention, increasing conversion rates, and improving SEO rankings. Whether you are migrating an existing site to HubSpot CMS or creating new pages from...

Read More
Revolutionize Content Creation with AI-Powered Tools in HubSpot Content Hub
April 30, 2024
Tips and Tricks, Content Marketing

Revolutionize Content Creation with AI-Powered Tools in HubSpot Content Hub

HubSpot just launched a new hub call "Content Hub". Discover how AI-powered content tools in HubSpot Content Hub can transform the way marketers and content creators produce, distribute and manage content, leading to increased efficiency and...

Read More