HubSpot E-Commerce: Integrate a Shopping Cart to Your Site

Since we launched Snipcart, we've had many interesting integration suggestions for our e-commerce solution. One of them recently caught my eye. It went:

Demo request: enable HubSpot e-commerce by integrating Snipcart.

After researching the e-commerce + HubSpot topic for a while, I realized there weren't a whole lot of solutions to sell on HubSpot marketing sites. A bit like with Unbounce's landing page builder. So I thought I'd come up with a post to guide and inspire HubSpot users wanting to sell products on their site. After playing around a bit with their marketing software, I came up with a decent demo for the blog.

So today, I'm going to show you how to integrate our shopping cart platform to HubSpot's Marketing software.

Following the next 5 steps will allow you to easily add buy buttons and products to your site.

1. Create free Snipcart and HubSpot accounts

You can sign up free for Snipcart and for HubSpot's free 30 days trial. While in test mode, Snipcart will remain forever free.

Note that you'll need a valid domain name to start your free trial of both our e-commerce solution and their marketing software.

For the following tutorial, we're going to assume you already have a website set up with HubSpot. If you don't, here are some helpful getting started resources.

2. Add our shopping cart platform to your HubSpot e-commerce site

Go to your Snipcart merchant dashboard. Click on the user icon, top right corner.


Under Account, click on API Keys. Copy the snippet of code you find there, without the jquery line. We won't need to add jQuery since HubSpot already has it in its site themes.


Note: As you can see in the screenshot here, we're using Snipcart in Test mode. Because the API key included in the snippet is the Test one, we won't be able to make real transactions on the HubSpot site just yet. To go Live with Snipcart, please read this documentation section.

Let's jump to HubSpot's marketing admin panel now. Go to Content > Content Settings > Page Publishing. Scroll down a bit and paste the Snipcart code snippet in the Site Header HTML section:


Click on the blue Save changes button further down the screen.

3. Create a custom HubSpot module for your online store's products

What we need to do now is create a re-usable module for your Snipcart products. Thanks to HubSpot's custom modules, this can be achieved pretty easily, with a bit of simple code.

Go to Content > Design Manager > Custom Modules. Hit the blue New custom module button, select Custom Module, and hit Create.


Name your new module Snipcart products.

You should see a bunch of pre-made fields and a few demo lines of code in the editor:


Get rid of all pre-made fields by hitting Arrange fields & Delete on each of them. Wipe the demo code in your editor also.

Now, create Snipcart's required product attributes using the Add new field button (more details on how Snipcart's product definition works). You'll need to add the following:

  • Name: a TEXT field labeled product_name
  • Product image: an IMAGE field labeled product_image
  • Product ID: a TEXT field labeled product_id
  • Product price: a TEXT field labeled product_price

Using HubSpot's basic HubL templating language, we'll need to code a custom module containing all of the required Snipcart product attributes (the fields defined above + the product URL):

<button class="snipcart-add-item" 
data-item-name="{{ widget.product_name }}"
data-item-url="{{ content.absolute_url }}"
data-item-id="{{ widget.product_id }}"
data-item-price="{{ widget.product_price }}"
{% if widget.product_image.src %}
  data-item-image="{{ widget.product_image.src }}"
{% endif %}
>Buy now</button>

Your editor should end up looking something like this:


Hit the Update button.

The code and settings above are in fact a re-usable "buy now" button for Snipcart products. You'll be able to add this module to site page templates, and use it wherever you'd like on your site. Before we do that, however, let's style the button a bit.

4. Style your products "buy now" buttons with a custom CSS rule

Go to Content > Design Manager > Coded Files > Custom > system > css. Open your HubSpot theme's stylesheet (I picked the Stratus theme while creating my HubSpot site).

You'll need to add a custom CSS rule to define your Snipcart buy buttons' look and feel. You can use this website to generate one quickly. Don't forget to change the name of the rule to snipcart-add-item to make it match with our products custom module.

Here's an example:

.snipcart-add-item {
    border:1px solid #DE0F29;
    margin:4em auto 0;
    padding:16px 31px;
    text-shadow:0px 1px 0px #DE0F29;
.snipcart-add-item:hover {
.snipcart-add-item:active {

You can copy your rule towards the end of your theme's stylesheet:


Hit Publish Changes before moving on.

Note: depending on your theme and visual preferences, you'll most likely have to adjust this CSS rule to better fit your needs.

5. Add products to your HubSpot e-commerce site

Now let's add a buy button to our homepage as an example.

Go to Content > Design Manager > Templates > Custom > Web Page Basic. Open up the Homepage.

There, add the Snipcart products custom module where you wish to insert a buy button:


Now, head to Content > Website Pages > Home. Select Edit.

Click on your buy now button custom module. Fill the fields we created earlier with the appropriate product info, and hit Save further down.


You can repeat the process above with any type of templates in your HubSpot e-commerce site where you'd like to be able to add products.

Now for the fun part. Update your changes, and open your site. Go ahead and try adding a Snipcart product!


And there you have it: a fully functioning online store right on your HubSpot site!

Once you're ready to sell, you'll need to go live with HubSpot. You'll also be able to manage all e-commerce operations in your Snipcart merchant dashboard.


Enabling e-commerce on HubSpot with our shopping cart platform is fast and straightforward. In this demo, we used HubL custom modules and a bit of code to facilitate product creation. However, you could've injected products using pre-made custom HTML modules with Snipcart product definitions. You could also customize Snipcart's shopping cart to make it fit with your HubSpot theme.

HubSpot Marketing is a great software solution to optimize your business' inbound marketing results. And we'd sure love to see more e-commerce integration of it with Snipcart!

If you enjoyed this post and found it valuable, could you send a tweet our way? I'd love that! Got any questions regarding HubSpot e-commerce & Snipcart? Feel free to hit the comments. :)

Suggested posts: