Shopify Connector Configuration - Bloomreach Experience - Open Source CMS

Shopify Connector Configuration

This Bloomreach Experience Manager feature requires a standard or premium license. Please contact Bloomreach for more information.

Introduction

As explained in Configure brX GraphQL Service, the .env file contains the connection settings to integrate with Shopify.

Configuration Options

The following options are supported:

Property Name Description Example Value(s) Default Value
SHOPIFY_STOREFRONT_API_BASE_URL The base URL of the Shopify Storefront API. 'https://yourstore.myshopify.com/api/2020-07'  
SHOPIFY_STOREFRONT_API_ACCESS_TOKEN

The application access token passed to Shopify Storefront API.
This token value is used when creating a ShopifyBuy Client using Shopify Storefront API Javascript SDK, or it is set to the X-Shopify-Storefront-Access-Token request header when making GraphQL requests.

'12345678901234567890123456789012'  
SHOPIFY_STOREFRONT_DOMAIN The merchant domain name to be passed when creating a ShopifyBuy Client using Shopify Storefront API Javascript SDK. 'yourstore.myshopify.com'  
SHOPIFY_ADMIN_API_URL The base URL of the Shopify Admin API, which is used to retrieve more advanced field data not available from the Shopify Storefront API. 'https://********:********@yourstore.myshopify.com/admin/api/2020-07'  
SHOPIFY_MULTIPASS_SECRET The secret used to generate Shopify Multipass tokens when redirecting to the Shopify Checkout page with enabling Multipass login. '00123456789012345678901234567890'  

Shopify Private App

The brX GraphQL Service needs access to Shopify Storefront and Admin API: it is recommended to create a Shopify Private App.

More specifically, store administrators need to:

  1. Enable private app development from the Shopify admin: please rember to select the Allow this app to access your storefront data using the Storefront API option in the Storefront API section;
  2. Generate credentials from the Shopify admin.

Once the private app is successfully created, store administrators can browse the related configurations and safely communicate both the Storefront access token and Admin API URL to system integrators.

Admin API Permission

The Shopify connector requires just one extra permission regarding the Product Admin API. In the Private App configuration, scroll to the Admin API section: in the Admin API Permission, click on the "Show inactive API Permission" and locate the Products entry. Once located, click on the related dropdown and select the "Read access" scope. Please save the new configuration.

The Admin API Permissions section should look like the image below:

Federated Checkout

This feature is only available to Shopify Plus merchants.

If you are using the default Online Store Sales Channel, you will have to use your Shopify storefront's checkout page (e.g. https://mystore.myshopify.com/1234567890/checkouts/) for payment processing (including billing address). However, by default your customer's login session won't be shared between your SPA and Shopify storefront, so the customer has to login again on the Shopify checkout page, even if they have already logged into your SPA. For this reason, the Accelerator provides a "Federated Checkout" integration, which is based on the Shopify Plus Multipass API.

The checkout process is depicted below. First of all you need to enable Multipass login through your shop admin, and then configure SHOPIFY_MULTIPASS_SECRET property in your .env file with the "multipass secret" value you get from the prior step.

Some important details about the flow depicted above (assuming the customer has already logged into the SPA):

  1. The SPA starts the check out process (e.g. when customer clicks on the "Checkout" button) by invoking the "checkOut" mutation on the brX GraphQL Service;
  2. The brX GraphQL Service tries to obtain a multipass token from Shopify Multipass API, using the account information of the current logged-in customer, the SHOPIFY_MULTIPASS_SECRET value configured, and a return_to URL of your Shopify storefront's checkout page for that customer. This will ensure the customer gets redirected to the checkout page after successful authentication with Multipass;
  3. If the information in step 2 is correct, Shopify should respond with a "Multipass token"; 
  4. The brX GraphQL Service will use the token obtained in step 3 to construct a "Multipass login URL" (e.g. https://mystore.myshopify.com/account/login/multipass/1234567abcdefg), and send back to the SPA as part of the "checkOut" mutation response;
  5. The SPA can now login to your Shopify storefront using the "Multipass login URL" from step 4;
  6. If the login is successful, Shopify should redirect your customer to the return_to URL configured in step 2. In this case, it will be your Shopify storefront's checkout URL for that customer.
  7. The customer can now continue their checkout process on your Shopify storefront's checkout page. Their cart contents, as well as account information, will be carried over to the checkout page.

Customize the Shopify "Order Status" page to redirect back to the SPA after checkout

When the customer completes their checkout process on Shopify's checkout page, they will reach the Order Status page (see an example below):

To redirect the customer to your SPA from it, you can customize this page in a few ways:

  • Insert HTML/Javascript using the Additional scripts field. For example, you can use that field to insert a button that will redirect the customer to your front-end page when clicked. 
  • If you are a Shopify Plus merchant, you can also modify checkout.liquid template to completely customize the checkout process. Notice: The checkout (not just the Order Status) is all hosted in one template.
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?