Shopify (Plus)

Introduction

Shopify is a leading ecommerce platform. HubBox supports retailers using Shopify Plus with our Shopify app which can be installed via the Shopify App Store.

Shopify App Listing

Checkout Extension Integration

Installing the app

The HubBox Shopify app is available to install from the Shopify App Store. Once you have installed the app you will then be able to access the App's admin panel and start the installation process.

If you have already agreed terms with the HubBox Sales team, the HubBox Integrations team will reach out to you directly to start the installation and will set your account to "Licensed". This will then give you all of the required access to the App. If you have not yet agreed terms with HubBox, please contact our Sales Team.

Setting up the app

Once you have installed the app, you will be able to access the HubBox app Admin panel and set up the app.

Below are the admin options and guidance on what each setting does:

Setting	Description
Selecting the network	Select the appropriate carrier networks and set the appropriate geographic location
Map Settings	Generate a Google Maps API key and add here in order to display pickup locations to customers on a map interface. You can also set a default latitude and longitude to center the map
Adding Shipping Rate filter	Enable a Delivery Customization to hide rates depending on whether the customer has chosen pickup or home delivery

Shipping rate filtering

For the Shipping Rate filter, below are the options available:

• Options displayed for pickup - only select rates that should be displayed if the customer has chosen a pickup location. If all rates can be displayed for pickup, keep this setup to the default of “All”
• Options displayed for home delivery - only select rates that should be chosen if customer has chosen home delivery. If you do not need to hide any rates, “All” rates will be shown by default

Adding the Extension to your checkout

To add Shopify's Extension to your checkout you will need to go to Settings > Checkout in the Shopify admin area.

Here you can duplicate your checkout so that you can add the HubBox Extension and test before going live.

1. Click "Customize"
2. Go to the page where you wish the integration to appear, this can either be the Information or the Shipping page (or placed on both pages)
3. Click "Add app block" in the bottom left
4. Click on the HubBox Local Pickup app
5. You can now see the integration added to the checkout and move the app block around on the page
6. Once tested, you can publish the checkout to set the app live

The end result

Once the app is set live on your checkout, your customers will be able to select the pickup location option. This will present the customer with available pickup locations near them for them to select.

Once the customer has selected a location, they will complete checkout as normal. The shipping address will be the customer's chosen pickup location address.

You will also see the following changes to orders where the customer has selected a pickup location:

• A tag will be applied to all pickup orders. For UPS orders, the tag will be "UPS Access Point" and for DPD orders the tag will be "DPD Ship to Shop".
• The pickup location's ID will be added as a note attribute to the order

UPS order example

DPD order example

Generating an orders token

Why does HubBox need an orders token?

HubBox needs the orders token so that if a customer chooses to pickup their order, the HubBox app can add the required tags and metafields to the order as well as update the pickup location address.

How can I generate the orders token?

To generate the orders token you will need to take the following steps:

1. Go to your Shopify Admin area
2. Go to Settings
3. Click on Apps and sales channels from the left hand menu
4. Click on the text that says Develop apps
5. Then click on the green button that says Create an app
6. Input HubBox as the app name, select yourself as the app developer and click Create app
7. Click on the button that says Configure Admin API scopes
8. Search for orders in the search bar
9. Under Orders, check the write_orders and read_orders checkboxes
10. Then click Install app
11. Finally, click Reveal token once, copy the token and send it to HubBox

Important: make sure you copy the token and send it before navigating away from the page as you are only able to view this token once.

Generating a Google Maps API key

As the HubBox app uses Shopify's Google Map component (to display pickup locations to customers), you will need to generate a Google Maps API key. For information on how to do this please visit the Google Maps Platform website and follow the instructions to create your API key.

The video below also provides step-by-step instructions. Once an API key is generated, go to the HubBox app admin panel in your Shopify account and add the API key in the "Map Settings".

Potential Costs: Google Maps API usage generally has a free tier that covers most standard use cases. For higher usage, there may be costs associated. Please refer to Google's pricing for details.