Building a Product Catalog with HubSpot

In this guide, we'll build a dynamic product catalog that pulls products directly from your HubSpot CRM. With Bolt and Pica, you can create a production-ready product display system in minutes that automatically syncs with your HubSpot product inventory.

What You'll Build

By the end of this tutorial, you'll have:

• A beautiful, responsive product catalog UI
• Product cards displaying name, description, price, and images
• Direct integration with HubSpot to fetch product data
• Real-time sync with your HubSpot product inventory

Let's get started! 🚀

Step 1: Build the Product Catalog UI

First, let's create a professional product catalog interface with static data.

Prompt Bolt:

"Create me the UI for a product catalog. Use static data."

Bolt will generate a beautiful product catalog with placeholder cards that we'll later connect to HubSpot.

Step 2: Create a HubSpot Connection in Pica

You need to connect your HubSpot account to Pica so your product catalog can fetch products from your CRM.

How to Connect HubSpot:

1. Go to the Pica dashboard at: app.picaos.com/connections
2. Click on + Add Connection
3. Select HubSpot from the list of integrations
4. Authenticate with your HubSpot account
5. Grant the necessary permissions for CRM access
6. Save your connection key - you'll need this later!

Step 3: Add Products to Your HubSpot Account

Before we can display products, you need to have some products in your HubSpot account. If you already have products, skip to the next step!

How to Add Products in HubSpot:

1. Go to your HubSpot dashboard
2. Navigate to Sales > Products
3. Click Create product
4. Fill in the product details:
   • Name: Product name
   • Description: Product description
   • Price: Unit price
   • Image: Upload a product image
5. Click Save to create the product
6. Repeat for any additional products you want to display

Step 4: Generate Your Code with BuildKit

Now we'll use Pica BuildKit to generate the perfect prompt for fetching your HubSpot products.

Using BuildKit:

1. Go to the BuildKit page at: app.picaos.com/buildkit
2. Type: "List my HubSpot products"
3. BuildKit will generate an optimized prompt for you

Or copy the prompt here:

🚀 Next step: Copy the prompt above and paste it into Bolt.new to create your backend logic!

What BuildKit Does:

BuildKit automatically generates a prompt that includes:

• ✅ Proper API authentication setup
• ✅ Product listing with all relevant fields
• ✅ Property selection for name, price, description, and images
• ✅ Error handling best practices
• ✅ Environment variable configuration
• ✅ Integration with your Pica HubSpot connection

Step 5: Add Your Secrets to Bolt

Once Bolt generates your application, you'll need to add your API keys as environment variables.

Required Environment Variables:

1. PICA_SECRET_KEY

• Get it from: app.picaos.com/settings/api-keys
• This authenticates your application with Pica

2. PICA_HUBSPOT_CONNECTION_KEY

• Get it from: app.picaos.com/connections
• This is the connection key you saved in Step 2

How to Add Secrets in Bolt:

1. Click on the Settings icon in Bolt
2. Navigate to Secrets
3. Add both keys with their respective values
4. Save and restart your application

Now your product catalog is connected to HubSpot and will display your products automatically! 🎉

Step 6: See Your Products in Action

Your app should now show all the products from HubSpot! The product catalog will automatically display your HubSpot products with their names, descriptions, prices, and images.

Verifying in HubSpot:

1. Go to your HubSpot dashboard
2. Navigate to Sales > Products
3. Any products you add or update here will automatically appear in your catalog

Troubleshooting

Products not loading?

1. Check your environment variables - Make sure both keys are set correctly in your Bolt secret settings
2. Verify your HubSpot connection - Go to app.picaos.com/connections and ensure it's active
3. Check for products - Make sure you have products in your HubSpot account
4. Verify permissions - Make sure your HubSpot connection has CRM read access
5. Check Pica logs - View execution logs in your Pica dashboard

Images not displaying?

Make sure your HubSpot products have the hs_images property set. You can add images to products in your HubSpot dashboard under Sales > Products.

Conclusion

Congratulations! 🎉 You've just built a production-ready product catalog powered by HubSpot in minutes. Your catalog now automatically syncs with your HubSpot CRM, so any products you add, update, or remove will be reflected in real-time!

What you can do next:

• Add filtering and search functionality
• Implement pagination for large product catalogs
• Add a shopping cart with HubSpot deals integration
• Create product detail pages with additional information

Ready to add more integrations? Explore other Bolt use cases to supercharge your application with Pica.

Get Help

Questions or need support?

• 📅 Schedule a call with our team
• 📚 Check out the Pica documentation
• 🎥 Watch our video tutorials

Happy building! 🚀