If you've been using HubSpot as your CRM for marketing, sales, or services, you'll already appreciate its strength and capabilities. But did you know you can also build and run a powerful eCommerce store with HubSpot? With the CommercePro app, you can seamlessly build and manage an online store directly in HubSpot.
This guide will walk you through everything you need to know - from setting up your store to marketing it effectively, managing customers, and tracking success. Whether you're new to eCommerce or looking to integrate your existing online store into HubSpot, this step-by-step tutorial will help you get started.
This guide provides a step-by-step walkthrough to help you:
- Set up your eCommerce store quickly and efficiently
- Market your store effectively to reach more customers
- Manage customer relationships with ease
- Track and analyze your store’s performance for better results
Why HubSpot Is a Great Platform for eCommerce
HubSpot is widely recognized for its robust suite of tools designed to streamline marketing, sales, and services. But there’s more. When paired with CommercePro, HubSpot becomes a comprehensive platform for eCommerce businesses. Here's why it's a popular choice for online sellers:
- Unified Platform: CommercePro isn't a third-party platform. When you download CommercePro from the HubSpot App Marketplace, it deploys in HubSpot, giving you the ability to setup and manage your store directly in HubSpot.
- Unified toolset: When you add eCommerce to the functions you use HubSpot for, you can leverage more of the tools, such as creating customer portals for selfservice.
- Unified Data: Combining your eCommerce operations with HubSpot’s powerful tools allows you to manage your data and every aspect of your business—from customer acquisition to retention—all in one place.
- Automation for Growth: HubSpot’s workflows and automation tools help you save time by automating routine tasks like order confirmations, abandoned cart emails, and post-purchase follow-ups.
- Data-Driven Insights: Track sales, customer behavior, and campaign performance with HubSpot's analytics to refine your strategies.
Now that we've established why HubSpot with CommercePro is an excellent platform for eCommerce, let's get into the step-by-step process of setting up your store.
Building Your Store on HubSpot Using CommercePro
The first step to creating an eCommerce store on HubSpot is integrating the CommercePro app. Follow these steps to get up and running:
Step 1: Install the CommercePro App
- Go to the HubSpot App Marketplace.
- Search for "CommercePro" in the search bar.
- Click on the app and select "Install App."
- Follow the instructions to connect CommercePro to your HubSpot account.
CommercePro acts as the backbone of your eCommerce store, enabling you to manage inventory, sales, and payments directly within HubSpot.
Step 2: Load Your Products
Once CommercePro is installed, it’s time to add your products. HubSpot offers multiple ways to load products, so you can choose the method that suits your needs:
- Manually: Ideal for a few products.
- Bulk upload: Perfect for larger product lists stored in spreadsheets or files from another system.
- API: Best for ERPs managing many products with fluctuating stock levels.
No matter the method, all products will load directly into the CP Products object in HubSpot for seamless integration.
How to create a product manually:
Navigate to your HubSpot portal: CRM > CP Product > Click ‘Create CP Products’ in the top right corner.
Fill in the required fields:
- Product/Service Name: The name displayed on your storefront.
- Default Price: The base price without considering price tiers or memberships.
For optimal product display, we recommend completing these additional fields:
- Publish to Website: Select ‘Yes’ to make the product visible on the CP frontend.
- Photo: Add the URL for the 1700x1000 image dimensions.
- Listing Image: Add the URL for the 766x300 image dimensions.
- Short Description: Appears in the product library listing.
- Intro Text: Detailed description shown on the single product page.
- Cart Description: Shown in the cart listing for purchased products.
- Product Marketing Page Link: Use `/single-product` to dynamically display products on website pages.
- Remaining Stock Unmanaged: Enter your current stock quantity here. This field can be manually updated or automated through workflows.
By following these steps, you’ll ensure your products are accurately uploaded and ready to showcase on website pages and CommercePro modules, enhancing your storefront’s functionality and user experience.
Step 3: Create Website Pages
CP Core pages are exactly that, they are the various templates and modules under the Commercepro Theme that allow you to dynamically pull product content into HubSpot website pages with eCommerce functionality.
With the ideal customer journey in mind, the following instructions will take you through how to create your CP core pages.
How to create a CP Core Website Page:
In this example, we are creating a new [CP] Single Product page where a product can be showcased or the main page where a single product is viewed.
- Head into Content > Website Pages > Create > Website Page and choose the domain to use if you have multiple to choose from. A page name will be required to proceed.
- Choose a theme and a template. In this case, use the templates that have been created under the ‘CommercePro Theme’.
- Once the page is created, head to the top right corner and click on Settings where you can add a page title and a content slug. The page title is public-facing and is what shows in search results.
The content slug needs to be the same as entered in the Product Marketing Page link field so that the products created will dynamically pull through to the website page when they get enabled to ‘Published to website’ on the CP Product-level.
- Click out of the Settings and head to the top right to ‘Publish’ the page.
Various other CP Core pages pull content dynamically and enhance the customer experience. The most important ones to build after your product page would be the following:
- [CP] Cart page - This page displays all products added to the cart, including details like currency, price, and quantity.
- [CP] Checkout page - This page shows the summary of products to be purchased, offers payment method options (if multiple are available), and collects the necessary payment details to complete the checkout process.
- [CP] Order Complete page - After a successful purchase, users will be directed to this page. It can feature a thank you message along with an order summary and allow customers to provide additional details if configured within CommercePro.
If you need further assistance configuring these pages, we provide support as part of your CommercePro license.
Step 4: Create your Deal Pipeline and Stages
We recommend creating a separate sales pipeline specifically for your CommercePro orders and deals to align with the user journey within the app. This will help you better track and manage your orders as they move through different stages, ensuring a smooth workflow and efficient order processing.
A pipeline allows you to visualize the stages of each order, providing clarity on where each deal is in the process. The following steps detail how to create and configure this:
- In your HubSpot account, click the settings settings icon in the top navigation bar.
- In the left sidebar menu, navigate to Objects, then select the object for which you want to create a pipeline.
- Click the Pipelines tab.
- Click the Select a pipeline dropdown menu, then select Create pipeline.
- Once the pipeline is created, you will want to click on Board Options > Edit Stages to enter the Deal stage names.
For your CommercePro pipeline, we suggest the following stages:
-
Abandoned Cart – For users who have added products to their cart but haven’t completed the purchase
-
Active Cart – For users who are currently engaging with their cart and are actively in the process of checkout
-
Pending Payment – For orders that are waiting for payment confirmation.
-
Order Complete – For orders that have been successfully paid for and processed
-
Refunded – For orders that have been refunded
These stages will help you track the progress of each order and ensure a streamlined experience from cart to payment and beyond.
Step 5: Configuring Payment Methods
To configure payments, you'll need to go through the following steps:
- Enable your preferred payment gateways (e.g., Stripe, PayPal).
- Test your checkout process to ensure a smooth experience for customers.
Please reach out to us to discuss your preferred options for payment gateways and payment methods. It's important to ensure that you have the necessary licenses for these gateways. As part of the implementation process, we can assist you in verifying your licenses and setting up the payment systems to ensure everything runs smoothly.
That’s it—your basic store is ready!
Marketing Your Store with HubSpot
Once your store is live, the next challenge is bringing in customers. HubSpot offers tools that make online marketing easier and more effective.
Email Campaigns
Use HubSpot's email marketing features to create engaging campaigns that drive traffic to your store.
- Send welcome emails to new subscribers with discount codes.
- Automate abandoned cart emails to recover lost sales.
- Segment your email list based on customer preferences and purchase history.
Content Marketing
- Use HubSpot’s blog tools to publish posts related to your products. For instance, write reviews or guides highlighting how your products solve problems for customers.
- Leverage landing pages to promote seasonal sales or exclusive deals.
Social Media Integration
Connect HubSpot to your social media accounts to schedule posts, track engagement, and run targeted ads promoting your store.
Search Engine Optimization (SEO)
Optimize your storefront and product pages using keywords like "eCommerce on HubSpot" or "CommercePro integration" to improve organic search rankings.
Managing Orders and Customers
Customer satisfaction takes center stage when running an eCommerce store. With CommercePro and HubSpot, you can streamline your order management and customer service.
Order Management
- Track orders in real time through the CommercePro dashboard.
- Send automated order confirmation emails through HubSpot as soon as a purchase is made.
- Update customers about shipping timelines with automated notifications.
Customer Service Excellence
- Create a customer service ticket pipeline in HubSpot to resolve issues quickly.
- Use HubSpot’s live chat feature to provide instant support to shoppers.
- Implement customer feedback surveys to gather insights on improving your store.
Measuring Success with HubSpot Analytics
To grow your business, you need to closely monitor the performance of your eCommerce store. HubSpot’s built-in analytics, combined with CommercePro, make tracking and analysis straightforward.
Key Metrics to Monitor
- Sales Performance: Track sales numbers and identify top-performing products.
- Customer Insights: Understand how customers interact with your store, including bounce rates and time spent on pages.
- Campaign Effectiveness: Evaluate the success of marketing campaigns to identify what strategies work best.
Using Data for Growth
Leverage this data to make informed decisions about pricing, inventory, and marketing strategies. For instance, if analytics show a high bounce rate on a product page, you may need to improve the visuals or descriptions.
Unlock the Potential of eCommerce on HubSpot
Building an eCommerce store on HubSpot using CommercePro is not just about selling products; it’s about creating an exceptional customer experience while driving business growth. With its seamless integrations, marketing tools, and robust analytics, HubSpot with Commercepro empowers you to take your eCommerce game to the next level.
Whether you’re a HubSpot user venturing into eCommerce or a store owner looking for improved functionality, CommercePro is the key to success.
Get started today—install CommercePro from the HubSpot App Marketplace, and build the store your customers will love!