How to set up Enhanced Checkout on Shopify

Table of Contents

• Requirements
• Setting up Enhanced Checkout
• Additional Features to Use with Enhanced Checkout
• Additional Information

Enhanced Checkout empowers you to offer a customizable and engaging buying experience by giving full control over your shipping strategy and checkout. This feature enriches the shopping journey with visually appealing options that surpass a simple list of shipping methods.

With Enhanced Checkout on Shopify, you can:

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

Requirements

• Your store must be on Shopify Plus.
• You must have an active ShipperHQ Enterprise plan
• All products and variants in your Shopify store must have a unique SKU set in Shopify's SKU field

Enabling Enhanced Checkout will automatically enable Advanced Shipment Details if not already active.

Setting up Enhanced Checkout for Shopify

Setting up Enhanced Checkout involves two steps: enabling the feature in your ShipperHQ dashboard, copying the newly created API key, then adding the required app blocks in Shopify's checkout editor. Once complete, Enhanced Checkout replaces the standard shipping section at checkout with the interactive experience described above.

Check out our video walkthrough, or follow along in the steps below.

Enable Enhanced Checkout in ShipperHQ

1. In the ShipperHQ dashboard, choose Advanced Features in the navigation menu and enable the Enhanced Checkout feature.

    

   

2. Navigate to Websites and select your website to access credentials for Enhanced Checkout on Shopify Plus.
3. Click the Integrations tab at the top of the website page and copy the access token found under Enhanced Checkout.

    

   

    

You will use this API key in the next section to connect your Shopify checkout to your ShipperHQ settings.

Adding Enhanced Checkout to your Shopify Checkout

1. From your Shopify admin, go to Settings > Checkout.
2. Click Customize to add relevant Shopify app blocks for Enhanced Checkout.

    

   

3. Add the Enhanced Checkout Sync app block under the Header section.

    

   

    

4. Click “Add app block” in the lower-left corner to view available checkout blocks for ShipperHQ and select the Enhanced Checkout v2 app block from the menu. 
   
   Note: Some Shopify stores have separate areas for Payments and Shipping. Make sure that you are in the correct area for Shipping.
5. On the right-hand side of your screen, paste the API key that you copied from the ShipperHQ Dashboard into the Access Token field.

    

   

6. If you plan to use Enhanced Checkout with Shop Pay express checkout, check both Include app block in Shop Pay and Automatically expand sections to show app.
7. Save your changes.

Shop Pay Configuration

Enhanced Checkout is compatible with Shopify's standard and Shop Pay express checkout. Both the Include app block in Shop Pay and Automatically expand sections to show app checkboxes need to be checked for functionality in Shop Pay.

Additional Features to Use with Enhanced Checkout

Enhanced Checkout's interactive experience is powered by assorted advanced features. Read below for resources on how to set up each of these.

• Calendar Display
• In-Store Pickup with Map and Timeslots
• Split Shipping

Calendar Display for Carriers

Enabling the calendar display lets customers pick their delivery date at checkout instead of just seeing a shipping method list. To use it, you'll need to enable Delivery Date & Time and activate Show Calendar for each carrier. See How to configure Delivery Date & Time for full setup steps.

Once saved, checkout options will be organized by date at checkout.

In-store Pickup Map and Time Slots

This feature combination lets customers see a map of available pickup locations, and select a pickup window at checkout.

To set this up, configure your In-Store Pickup Carrier and set your available pickup times in Time Slots.

Enabling Support for Shopify Multi-Origin Inventory

You can sync Shopify's per-location inventory data with Enhanced Checkout, so checkout accurately reflects which location is fulfilling each item.

To enable this feature, you will need to enable it in ShipperHQ, then apply it to the Enhanced Checkout Sync block in your Shopify checkout settings.

1. In ShipperHQ, go to Advanced Features and enable Multi-Origin Shipping if it is not already enabled. Select Settings, and set Enable Support for Shopify Multi-Origin Inventory to Yes. Apply your changes before closing.
   
   
2. In Shopify, go to Settings > Checkout, edit the Enhanced Checkout Sync block, and set Enable Cart Attributes Sync to True. The JSON Properties mode can be left to False.

 

Save your changes to checkout.

Split Shipping at Checkout

With split shipping, you can show customers separate shipping options for items shipping from different origins, so orders fulfilled from multiple warehouses display accurate delivery info at checkout.

Setting up split shipping at checkout has several prerequisites:

• Enable and configure Enhanced Checkout, Multi-Origin Shipping (see above), and Advanced Shipment Details.

• Configure Origins in ShipperHQ to match your Shopify locations.

• Enable split shippingin Shopify (see Shopify's Split Shipping article).

Once enabled, customers can view shipment details for orders shipping from multiple locations, with an overview and more detailed option available.

Enable more shipping options for customers to select different methods.

Advanced Shipment Details Order Metafield

In addition to visual presentation, ShipperHQ Enhanced Checkout stores key details in a Shopify order metafield (shq._shipping_insights) for orders with chosen delivery dates or store pickup. This data can be useful for ERP or fulfillment software integration.

The shq._shipping_insights metafield includes pickup locations for store pickup and dispatch/delivery dates when customers choose their delivery date.

shq._shipping_insights population requires:

• Enabled Advanced Shipment Details in ShipperHQ
• Enhanced Checkout and Advanced Shipment Details app blocks configured in Shopify at order placement

💡 To show data, create a Metafield Definition under Shopify's Settings > Metafields and metaobjects > Orders. Click "View unstructured metafields" and "Add definition" next to shq._shipping_insights. Set Type to JSON.

Additional Information

LTL Freight Accessorials

Enhanced Checkout on Shopify currently doesn't support displaying LTL Freight accessorial UI elements. Accessorials remain configurable in ShipperHQ.

Unique SKUs Required

Unique SKUs are essential for accurate order detail collection in ShipperHQ. Duplicate SKUs may cause errors in shipping rate reporting.

Sales Taxes

Shopify no longer recalculates taxes dynamically during checkout due to deprecations. Customer tax figures do not adjust with shipping changes.

Line Item and Order Hidden Properties

Shopify caches shipping rates, and rate refetching isn't possible without cart edits. Hidden properties are used to allow us to refetch rates when shipping options change:

• Line items contain hidden properties post-order placement.

Shopify Checkout Themes

ShipperHQ's Enhanced Checkout theme support is limited to general Shopify theme settings. For detailed customization instructions, log in to your Shopify store and adjust settings under Settings > Brand.