How to set up Enhanced Checkout on Shopify

Overview

Enhanced Checkout empowers you to offer the most customizable buying experience possible by giving you total control over your shipping strategy and checkout. With this feature, you can give customers a more visually appealing and compelling experience that goes beyond a list of shipping options.


When you install Enhanced Checkout on Shopify, you will be able to:

  • Show delivery dates for each shipping method
  • Allow users to select their delivery date from the calendar view
  • Allow users to select their in-store pickup location and view on a map
  • Allow users to select their pickup time

Requirements

  1. Your store must be on Shopify Plus.
  2. You must have an active ShipperHQ Enterprise plan.
  3. The Enhanced Checkout and Shipping Insights advanced features must be enabled in ShipperHQ.

Optional Features to Use with Enhanced Checkout

  • Delivery Date & Time enabled for calendar support.
  • In-store Pick-up Advanced Feature enabled along with time slots for pickup scheduling. 
  • Show in Calendar for supported live-rate carriers and/or Instore Pick-up.
Enabling Enhanced Checkout will automatically enable Shipping Insights if not already enabled. If your ShipperHQ plan restricts the number of advanced features you can enable, this will count as 2 features in use.


Setup

ShipperHQ Dashboard

  1. In the ShipperHQ dashboard, choose Advanced Features on the left navigation menu and enable the Enhanced Checkout Advanced Feature.

2. Once enabled, navigate to Websites click your website to access the credentials needed for enabling Enhanced Checkout on your Shopify Plus checkout.

3. Click on the Integrations tab at the top of your website page, then locate and copy the access token located under Enhanced Checkout.

You can leave the ShipperHQ dashboard open in the new tab while navigating back to the tab where your Shopify Plus store dashboard is located. When prompted to add the Enhanced Checkout access token, simply toggle back to this tab to copy and paste the token in your Shopify Plus store.

4. Once this has been completed, return to the browser tab where your Shopify Plus store is open & apply the settings below.

Enabling Enhanced Checkout in Shopify

1. From your Shopify admin, go to Settings > Checkout.

2. Next, click Customize to add the Shopify app blocks needed to enable Enhanced Checkout

3. Add the app block titled “Enhanced Checkout Init” located under the Information section.

4. In this section, you will use the drop-down menu at the top of the page to toggle from Information to Shipping.

5. In the lower, left corner of the dashboard, select “Add app block” to view all available checkout blocks for ShipperHQ in Shopify Plus.

6. Locate the Enhanced Checkout v2 app block on the left menu and click on it to add.

7. Locate the ShipperHQ authorization token from your ShipperHQ Dashboard and paste it into the Access Token field.

8. Check both the Include app block in Shop Pay and Automatically expand sections to show app checkboxes if you intend to use Enhanced Checkout with Shop Pay checkout

9. *Optional | Repeat these steps to add the Shipping Insights App Block if you want to display delivery date or pickup information on the Order Status Page. (this does not require an Access Token)

10. Save your Checkout customization in Shopify

Shop Pay Configuration

Enhanced Checkout is compatible with both Shopify’s standard checkout and Shop Pay express checkout. If you use Shop Pay express checkout, you’ll need to ensure both the Include app block in Shop Pay and Automatically expand sections to show app checkboxes are checked in Checkout customization in Shopify.

Failing to check both of these boxes will result in Enhanced Checkout and Shipping Insights to not function when using Shop Pay express checkout.

Additional Features to use with Enhanced Checkout

Calendar Display for Carriers

To display ShipperHQ’s  Enhanced Checkout calendar feature, you will want to make sure the Delivery Date & Time Advanced Feature is also enabled. Then, enable the Calendar on each Carrier where you wish to offer customers the option to choose their delivery date.

1. In your ShipperHQ dashboard, go to Carriers in the left-hand navbar.

2. Locate the Date & Time tab to select the option to show rates on your checkout calendar.

Once saved for each applicable carrier, checkout options will be organized by date when presented at checkout.

In-store Pickup Settings

In addition to the carrier-level, In-store Pickup settings for calendar display, a second series of options is available for scheduling pickup time slots. While this is optional, it is a useful feature for managing pickups at busy locations. 
To add available time slots for in-store pickup, complete the carrier-level steps noted above & then locate the Time Slots link on the left navigation menu within your ShipperHQ Dashboard.

Within the Time Slots settings, you can configure the pick-up times and durations to show on the checkout calendar when connected with Enhanced Checkout.

Once configured, customers can view the available time slots for in-store pickup and a map view of the pickup location when checking out.

Split Shipping at Checkout

Support for Shopify’s multi-location inventory split shipments at checkout requires a few additional steps to configure. 

Requirements

Using ShipperHQ’s Enhanced Checkout to show split shipping options at checkout requires the following Advanced features enabled in ShipperHQ.

Setup Steps

1. Please first configure your origins in ShipperHQ using the steps outlined in this article.

2. Once your Origins are configured within ShipperHQ, navigate back to your Shopify Plus dashboard to configure your locations in Shopify.

3. Navigate to Settings then Shipping & Delivery to configure your split shipping options.

Please see here for Shopify’s documentation for enabling Split Shipping. 

If you do not see this option available in your account, please contact your Account Manager at Shopify for assistance. 

In order for ShipperHQ to accurately read and apply each origin, please ensure that the addresses match between the ShipperHQ Origin & Shopify Location addresses.

5. Ensure the app block titled “Enhanced Checkout Init” has been installed under the Information section, and Enhanced Checkout v2 has indicated in the general setup details above.

Once enabled and configured, customers will be able to view the details for each shipment in their order for orders shipping from multiple Locations. 

There is a general overview of their shipments presented and an option to view more details.

When “More Shipping Options” is selected, customers will be able to view each shipment and select different shipping methods if they’d like.

Shipping Insights Order Metafield

In addition to the Shipping Insights visual presentation accessed by clicking the View Shipping Insights link under More actions when viewing an order in the Shopify Admin, ShipperHQ Enhance Checkout will store certain key details to a Shopify order metafield (shq.shipping_insights) for orders where the customer has chosen a delivery date or store pickup at checkout. This can be especially useful if you’ll be importing orders from Shopify into an ERP or fulfillment software.

The shq.shipping_insights metafield includes a subset of Shipping Insights data. This includes pickup location details for store pickup and dispatch and delivery dates when a customer chooses their delivery date in a calendar.

In order for the shq.shipping_insights metafield to populate on an order:

  • Shipping Insights must be enabled in ShipperHQ
  • The Enhanced Checkout Init, Enhanced Checkout V2, and Shipping Insights app blocks must have been added to your Shopify checkout and configured (see above) at the time the order was placed

By default, the shq.shipping_insights metafield is not visible when viewing orders in the Shopify Admin. However, if you wish to show this data you can add a Metafield Definition within Shopify under Settings > Custom Data > Orders by clicking the “View unstructured metafields” button and clicking the “Add definition” button next to shq.shipping_insights.

Since ShipperHQ stores this data in JSON format, when creating a Metafield Definition for this field you must set the Type to JSON.

Additional information

LTL Freight Accessorials

Enhanced Checkout on Shopify does not currently support displaying LTL Freight accessorial UI elements. Accessorials can still be enabled and offered as configured within ShipperHQ. If you are interested in this functionality, please contact us.

Unique SKUs Required

In order for ShipperHQ’s Shipping Insights feature to accurately collect order details, please ensure that each product is assigned a unique SKU. Duplicate skus will result in errors with reported shipping rates quoted and selected. 

Sales taxes

Why can’t we recalculate taxes? Shopify deprecated their Tax API after partnering with Avalara and ShipperHQ does not currently integrate with the Alavara AvaTax API.

On the Shipping Page in your Shopify checkout, taxes are not recalculated dynamically. When a customer selects a shipping option that changes the shipping rate, we are unable to recalculate taxes for this rate.

Example showing where to find tax calculations on checkout page.

Line item and order hidden properties

Shopify caches shipping rates, therefore it is not possible to force Shopify to refetch shipping rates without modifying the cart. We have added hidden properties to Line items and order Shipping/Billing Addresses:

  • Hidden properties will be automatically removed from the shipping address after the order is placed, so merchants fulfilling the order will not see unexpected information.
  • Billing address is not editable so hidden properties cannot be removed
  • Line items are not editable so hidden properties cannot be removed
Example showing added hidden properties.

Shopify Checkout Themes

Current support for customized themes for ShipperHQ’s Enhanced Checkout feature is limited to the general Shopify site theme settings. For more details on customizing your Shopify site, please login to your Shopify store and navigate to Settings & then Brand to apply your site theme.

Was this doc helpful?