Shopify Headless Implementations
Shopify supports using their platform in a headless fashion. With a few extra steps the Mulberry Shopify application can support this type of integration as well.
Important
Make sure you've installed the Mulberry Shopify application into your Shopify storefront before attempting the steps below.
Embedding the Scripts
The first step to getting Mulberry integrated within a headless integration is to embed the Mulberry Shopify app and Mulberry SDK JavaScripts into the <head> of your theme as shown below.
Staging
<script src="https://ottawa-staging.getmulberry.com/app/adapter.js"></script>
<script src="https://staging.getmulberry.com/plugin/static/js/mulberry.js"></script>
Production
<script src="https://ottawa.getmulberry.com/app/adapter.js"></script>
<script src="https://getmulberry.com/plugin/static/js/mulberry.js"></script>
Define your public token
Define your public token within your theme as shown below
window.mulberryConfig = {
publicToken: '[insert your public token here]'
}
Fetching Your Shopify Variant ID For a Given Warranty Offer
When you install the Mulberry Shopify app and your account is configured, Mulberry products and variants associated with your warranties will be created within your Shopify store.
After fetching warranty offers from the Mulberry API, you will need to retrieve a Shopify variant ID to use when structuring your checkout object.
// warranty is the warranty offer the user has selected
response = await mulberryShop.getWarrantyVariant(warranty);
The response object will look like this:
{shopify_variant_id: 39721910075451}
You should add an additional line item to your checkout payload that includes this variant ID along with some custom properties.
Defining Line Item Properties at checkout
When creating a checkout via the Shopify REST API with products and associated warranties, please make sure that the line_item.properties (or customAttributes in the GraphQL API) (see section line_item.properties located here) for the warranty line item have certain meta information which allows Mulberry to connect the warranty plan to the product.
The key information to include is the warranty_offer_id (returned when calling the mulberry.core.getWarrantyOffer() function) and the _variant_id nodes. You can find an example of how the Line Item properties should be constructed below.
"_variantId": "{{the Variant ID of the product this warranty is associated with}}",
"_warranty_offer_id": "{{the warranty_offer_id that was returned from offers endpoint}}"
Updated about 2 years ago