Enable Enhanced Checkout on BigCommerce

Overview

Offer granular control for shoppers at checkout by enabling Enhanced Checkout for BigCommerce and access calendar date selection for pickup and delivery, offer in-store pickup options with map and store info, and update your checkout experience.

This feature is currently in Beta and only available to ShipperHQ Enterprise customers.
Split checkout, freight accessorial selectors, address type selector, and custom carrier fields are not supported at this time.

Getting Started

Contact ShipperHQ to access the ShipperHQ Plus App for BigCommerce. This app provides ShipperHQ Enterprise customers access to new features and services.

Enabling the Enhanced Checkout in BigCommerce

After you’ve installed the ShipperHQ Plus App for BigCommerce you’ll need to do the following:

  1. Follow the instructions in BigCommerce to add a custom address field
    • In BigCommerce go to Settings > Account signup form
    • On that page select the “Address Fields” tab (see screenshot below)
    • Select the field type Text Field
    • Name the text field SHQ_UPDATE_HASH – the name must match exactly

  2. Navigate to the ShipperHQ Plus app and go to Advanced Features in the left-hand navigation of ShipperHQ’s dashboard, scroll down the list, and toggle the the Enhanced Checkout feature to “Active”.

    The Enhanced Checkout checkout experience will automatically install itself into the checkout. After ~5 minutes, when the rating system moves over to Enhanced Checkout, the installation will be complete.
  3. Go to your BigCommerce Settings > Shipping Manager and make sure that the “Checkout Shipping Options” section toggle is set to “Default”.

NOTE: It may take up to 5 minutes for the Enhanced Checkout experience to install and appear at checkout. In the interim rates may be unavailable on your store’s website.

Suggested Post-installation Actions

Hiding SHQ_UPDATE_HASH on the Signup form

  1. Go to Storefront → Themes
  2. On the currently active theme click Advanced and Make a Copy
  3. On that copy click three dots next to its name and click Edit Theme Files from that dropdown
    menu
  4. In the template editor select file: templates/pages/auth/create-account.html:
  5. Find text:

6. Modify it to be:

7. Click Save & apply file

Hiding SHQ_UPDATE_HASH on the Account Address Editor page

  1. Go to Storefront → Themes
  2. Click three dots next to its name and click Edit Theme Files from that dropdown menu
  3. In the template editor select file: templates/pages/account/add-address.html:
  4. Find text:

5. Modify it to be:

8. Click Save & apply file

Hiding SHQ_UPDATE_HASH in order emails

  1. Go to Marketing → Transactional Emails → Order Email – click on … and click Edit Template
  2. Click Code tab and then find text { {#each order.billing.address.custom_fields} }
    (around line 964 probably) and locate the below code:

3. Replace the code with this code:

4. Click Save to apply changes

Optional post-install checks

  1. Confirm the Enhanced Checkout script has been installed. In the BC admin go to Storefront > Script Manager, and confirm an entry exists for ‘ShipperHQ EC’. Do not modify the script, just confirm its presence. The EC experience will not be present in the checkout without it.

  2. Confirm the Shipping Insights App Extension has been installed. In the BC admin go to Orders. Click the ... next to any order. There should be an entry in the menu to ‘View Order In ShipperHQ’.

  3. Go to your store’s checkout and enter a shipping address and phone number. You should see the new Enhanced Checkout view load here.

Troubleshooting

Rates are not returning in my checkout. I am just seeing 3 pulsing blue dots.

If you have waited 5 minutes from the time you enabled the Enhanced Checkout feature and no rates return at checkout or you’re seeing 3 pulsing blue dots in the shipping method section at checkout that never finish loading, first try clearing all browser cookies and caches then starting a new checkout.

If the above does not work, check your BigCommerce Settings > Shipping Manager and be sure your “Checkout Shipping Options” section toggle is set to “Default”.

If rates still aren’t loading after clearing caches/cookies and checking shipping settings then check for any shipping errors in the BigCommerce Store logs by going to Settings > Store Logs in your BigCommerce dashboard and looking for any errors returned. If you see an error, open the log and copy the “Quote ID” and send it to ShipperHQ to help diagnose the issue.

I’m only seeing the normal presentation of shipping methods, not the new Enhanced Checkout experience

Solution: Go to the Websites tab in the SHQ+ App and edit your website. Under the integrations Tab, delete the existing EC token and generate a new one.

Theming BigCommerce Checkout

The ability to theme your BigCommerce checkout when using ShipperHQ’s Enhanced Checkout feature can be achieved by customizing the CSS via BigCommerce’s documentation. It is highly recommended that a development agency be consulted prior to editing any code within your BigCommerce site. Please feel free to Contact Us if you’d like a referral to a an agency to help customize your BigCommerce site.

Was this doc helpful?