BigCommerce Integration Guide

This guide goes through everything you need to install the BigCommerce Ordergroove integration. We'll take installing, enabling, and adjusting settings step-by-step, and by the end your store will be ready to sell subscription products.

Before you begin

This guide is intended to take you through everything you need to get up and running selling subscriptions on BigCommerce. If you have any trouble, please reach out to support and we'll be happy to help.

We'll cover the essentials here, but once you're finished there are other ways to customize your store and your subscription offerings. Take a look at Additional reading for further inspiration once everything is up and running. 

Watch a Video

Install the BigCommerce App

The first step is to install the Ordergroove App from the BigCommerce app store. You will need Store Owner permissions in BigCommerce to get started.

1. Log in to your BigCommerce account.
2. Open the following link to the Ordergroove Subscriptions app.
3. Click the blue Install button.
4. Check the compliance box, and click Confirm.
5. Ordergroove will install on its own from here. It can take several minutes, so this is a great opportunity to stretch or take a water break. The Ordergroove app will appear on your BigCommerce sidebar and a Launch Ordergroove Dashboard button will appear when we're finished.
6. The Launch Ordergroove Dashboard button takes you to Ordergroove where you'll manage your subscriptions and settings, but first you need a separate Ordergroove login. Please let your solutions manager know, and we'll generate a new username and password for you.

Set up your frequencies

All subscriptions have a frequency - how often a customer is charged, and products are shipped out. For example, you might sell want to offer subscriptions that ship every four, six, and eight weeks. You can set those frequencies in Ordergroove.

1. Log in to Ordergroove, and go to Subscriptions > Subscription Settings.
2. Scroll down to the Available Frequencies section. 
3. Add or remove frequencies. These are the options customers will be presented with when viewing subscription products on your storefront.
4. Scroll back to the top and click Save.

Note: Once a product is marked eligible for subscription in Ordergroove, the 'Ships Every' modifier will be automatically added to that product in BigCommerce. The modifier options will be populated with the Available Frequencies configured in Ordergroove.

Optional - Set a default frequency

Let's go back to the example, say you offer subscriptions every four, six, and eight weeks; you want the default option to be set to six weeks when a customer loads the product page. We can change that default in BigCommerce.

1. Log in to your BigCommerce Portal.
2. Navigate to Products > Product Options and select the Shared modifiers tab at the top.
3. Locate Ships Every in the list. Click the ... under actions, and select Edit. 
4. Scroll down to Option values, and select the frequency you want your product to default to when a customer loads the product page.
5. Click Save on the bottom right.

Enable your first product

Ordergroove automatically pulls in your BigCommerce products, all you need to do is tell Ordergroove which product(s) you want to offer on subscription.

1. Log in to Ordergroove, and go to Data > Products.
2. Ordergroove will list all of your products in the Catalog section. Click the Sell as subscription toggle next to any product(s) you want to sell as a subscription.
3. The change is instant, take a look at one of the Product Detail Pages (PDP) in your storefront for a product you marked for subscription. You should see the default subscription offering.

Set up your discounts

Subscription products are commonly offered with a discount to entice customers to subscribe and build a relationship with your brand. By default, Ordergroove creates a Standard discount, meaning all subscriptions will get a 10% discount versus the original one-time product price. This discount can be changed or removed to fit your business needs.

1. Log in to Ordergroove, and go to Subscriptions > Promotions.
2. Scroll down to the Automatic Discounts section. 
3. To modify the standard 10%, click the ... over to the right and select Edit. Note: If you have existing subscribers, click Create instead. Editing an existing discount will impact subscribers. 
4. Select a Type, Applied to, and an Amount. 
5. Optional - You can also set a threshold. This is the minimum dollar amount a cart must hit before the discount is applied.
6. Click Save on the bottom right.

Set an Initial Order Incentive (IOI)

Some stores want to further entice customers with an Initial Order Incentive (IOI) - a discount only on your first subscription order. These are set in BigCommerce.

1. Login to your BigCommerce Portal and go to Products. 
2. Edit each product you want to offer an initial order incentive with the ... on the right.
3. Scroll down to Product Options > Customizations and click + Add Rule.
4. Under Modifier option select Ships Every.
5. Check the frequencies you want to offer a discount for. 
6. Check Adjust Price.
7. Select Remove, and set a flat rate or a percentage you'd like to discount the purchases by.
8. When you're finished, click Update Rules on the bottom right.

Setting Up Your Payment Gateway

The Ordergroove integration requires a compatible payment gateway where Stored Payments can be enabled so that we can create subscriptions and place recurring orders.

This functionality must be enabled ahead of testing subscription creation and recurring order placement. Please refer to BigCommerce’s Available Payment Gateways to understand which payment gateways will allow for stored payment.

Setting Up Your Order Placement Endpoint

Before testing recurring order placement, you’ll need to configure the order placement endpoint in the Ordergroove Dashboard. To do so, you can navigate to the Settings Tab > Order Placement > Advanced Settings > Endpoint Settings and add the following to the URL field:

https://us-central1-bigcommerce-production-202017.cloudfunctions.net/order-placement

Note: Username and Password will remain blank.

Style your theme

You can customize the look and feel of your BigCommerce theme to match your brand and business needs.

1. Login to your BigCommerce Portal and go to Channel Manager. 
2. Locate the Storefronts section, find the Store Name you want to edit, and click Edit theme.
3. Click on the Advanced dropdown, and either Edit the Theme Files to modify the code in your browser or Download the current theme for your development environment.
4. When you're finished making changes, click Save if you're editing in the browser, or Re-upload your file if you downloaded the theme locally and mark it as active.

Customize your Subscription Manager location

Customers manage their subscriptions by logging into the Subscription Manager. The Ordergroove subscriptions link automatically displays just above the accounts navigation on your storefront. You can change the location by modifying your theme code.

1. Download the theme and unpack it.
2. Navigate into the theme and run stencil init and npm install.
3. Create a directory called custom in the templates/pages directory.
4. Create a directory called page in the templates/pages/custom directory.
5. stencil init will generate a  config.stencil.json file. Open it up and add the subscriptions page to the custom layouts object. The page sub object should look like: 

   {
   "customLayouts": {
   "brand": {},
   "category": {},
   "page": {"og-subscriptions.html": "/subscriptions"},
   "product": {}
   },
   "normalStoreUrl": "your--sturl",
   "port": whatever port you want
   }

6. To modify the nav bar, add the list element below to navbar located in templates/components/account/navigation.html 

   <li class="navBar-item {{#if account_page '===' 'subscriptions'}}is-active{{/if}}">
   <a class="navBar-action" href="/subscriptions/">{{'Subscriptions'}}</a>
   </li>

7. Create a file named og-subscriptions.html in templates/pages/custom/page directory and add the following code to the file.
   

   {{#partial "page"}}
   <div class="account account--fixed">
   <h1 class="page-heading">Subscriptions</h1>
   {{> components/account/navigation account_page='subscriptions'}}
   {{{region name="og_smi"}}}
   </div>
   {{/partial}}
   {{> layout/base}}

8. Run stencil bundle to validate your theme and zip it for upload.
9. Upload your theme and apply it to your page.
10. Login to your BigCommerce Portal and go to Channel Manager > Store Fronts > Web Pages > Create a Web Page. Create a subscriptions web page by logging into BigC’s merchant portal, channel manager → store fronts → web pages → create a web page.
    
    1. Set the page Name to subscriptions.
    2. Uncheck the navigation menu option Yes, show this web page on the navigation menu.
    3. Set Template Layout file to og-subscriptons.
    4. Go to Advanced Options and check yes, restrict to customers only.
11. Let Ordergroove know when you’ve completed these steps, and we will add our subscription manager widgets and scripts to the og_smi region.

Additional reading

• The Ordergroove Admin is your all-in-one portal where you update customers and subscriptions, run analytics, and more.
• Ordergroove offers a robust analytics suite to keep an eye on the health of your business.
• Sometimes you or your customer service team will need to make changes to a customer. Take a look at Using the Customer Service Guide for easy instructions.
• Incentivize customers to subscribe with a tempting Promotion or One-Time Discount.