Shopify

Plugin overview

Overview

General info

Ingrid's Shopify app is developed and maintained by Code
Support is handled by Code via support@code.nl
Ingrid's checkout widget is not available due to restrictions in what can be rendered on a checkout page in Shopify, Ingrid creates shipping options via Shopify's CarrierService API and Shopify renders the options in their native shipping checkout

Functionality

Shipping option propagation using Shopify's CarrierService API
Propagation of:
- Product item attributes
- Weight
- Dimensions
- External ID(Shopify's order number)

Registering of tracking numbers
A/B testing
Checkout delivery options folding
Custom category naming
Filter Rules
Post filtering rules
Language localization
Pricing rules
Product/Cart availability check
Delivery time logic
Options for shipping date adjustment

Coming before end of year 2024:

Shopify UI improvements/Pickup point functionality
Toggleable setting to set pickup point as delivery address in Shopify
PDP widget integration and 1-button install
Apple pay support
Upsell bar in checkout and minicart
1-button tracking widget install
Multi warehouse support
Split shipping
Expose full session.complete response in note_attributes[]

Installation guide

Detailed installation instructions are provided as a part of the installation process once the app has been installed. To install the app:

Go to https://apps.shopify.com/ingrid
Click on "Add app"
Follow the instructions inside the app

App settings

Sync customer tags to Ingrid - If enabled sends tags place on customer's profiles as cart.attributes which can be used to build price rules and filter rules.

Register tracking numbers - If enabled registers tracking numbers when a new tracking number is detected on an order in Shopify, requires Ingrid credentials to be configured

Maximum number of pickup options to show - Sets how many pickup points should be offered per carrier options with the type "PICKUP". If set to three and a merchant two different pickup point services enabled, three each will be displayed for a total of six. This can be used to reduce loading time since less options have to be created if the option is set to a lower amount.

Namespace for dimensions metafield - Used for fetching and sending dimensions to Ingrid on product level

Key for metafield - Used for fetching and sending dimensions to Ingrid on product level

Installing the tracking widget

A one button install of the tracking widget is currently in development but for now, this code snippet can be used to render the widget.

The plugin supports registering tracking numbers towards Ingrid, this works as long as tracking numbers are stored in Shopify. To enable this, enable the "Register tracking number" in the app settings in Shopify.

This is required in order to use the tracking widget unless you are booking using Ingrid's TA.

FAQ

How can the shipping details be extracted from an order?

The additional order details are placed in the note attributes of the order. We have also stored the Shopify order number in Ingrid so that the customer can see for which order the information relates.

// example of Ingrid note attributes stored with the order
Ingrid Transport Order ID: 01G29J7YREY4DTBTWTTF7ATOPG
Ingrid Shipping Method: pnl-bua
Ingrid External Method ID: VARUBREV
Ingrid External ID (Pickup Point ID): 01234

The data can be accessed in the note_attributes[] field on the order object in Shopify's Rest Admin API https://shopify.dev/docs/api/admin-rest/2024-07/resources/order#resource-object

Is Ingrid's data visible on the order page in Shopify?

Yes, here's an example:

What can I do if the shipping options loads slowly?

There is a app setting called "Maximum number of pickup options to show" which limits the amount of pickup options that are created by the carrier service,

How can I provide dimensions on product level to Ingrid?

Step 1: In Shopify create a new metafield definition(if there isn't one for dimensions already) by in the store settings going to "Custom data" → "Variant"(or "Product"). Then define a namespace and key, in the example below "code" is the namespace and "dimensions" is the key but these could be called anything.

Step 2: Add length, width and height in json-format on each of the product/variant (weight can be omitted as this is grabbed from the native "weight"-field on the product

Metafield "Dimensions" on a variant product in Shopify

Step 3: Add the namespace and key from step 1 to the Ingrid app settings in Shopify:

Step 4: All done!

Code snippet - Tracking widget

This script can be added or modified on a page in Shopify in order to render Ingrid's tracking widget. The siteId needs to be changed and is fetched from Ingrid's merchant portal.

<script src="https://cdn.ingrid.com/delivery-tracking/bootstrap.js"></script>
<div id="delivery-tracking-widget"></div>
<script>// <![CDATA[
const params = new URLSearchParams(window.location.search);
var identifier = params.get("identifier");
const contact = params.get("contact");
var locale = ingridSetLocale();

if(identifier != null)
{
  identifier = "#" + identifier;
  window.IngridDeliveryTrackingWidgetApi.renderPrivateMode({
  containerId: "delivery-tracking-widget",
  locale: locale,
  siteId: "insert-site-id",
  identifier,
  contact,
});
}
else
{
  window.IngridDeliveryTrackingWidgetApi.renderSearchMode({
  containerId: "delivery-tracking-widget",
  locale: locale,
  siteId: "insert-site-id",
});
}

function ingridSetLocale()
{
  const shopifyLocale = Shopify.locale + "-" + Shopify.country;
  const supportedLocales = ["cs-CZ", "da-DK", "nl-NL", "en-AU", "en-CA", "en-IE", "en-US", "en-GB", "et-EE", "fr-FR", "fi-FI", "fi-SE", "de-DE", "el-GR", "hr-HR", "is-IS", "it-IT", "ja-JP", "ko-KR", "lt-LT", "nb-NO", "nn-NO", "no-NO", "pl-PL", "pt-PT", "ru-RU", "sk-SK", "sl-SI", "es-ES", "sv-FI", "sv-SE"];
  if(supportedLocales.includes(shopifyLocale)) ? return shopifyLocale : return "en-US";
}
// ]]></script>

How can I link directly to a page containing the code snippet above to point to a specific order in for example an order confirmation or shipping confirmation?

The below html tag can be copy and pasted or modified in order to point to a specific order within the tracking widget.

<a href="/pages/tracking?identifier=&contact=" class="button__text">Track your order</a>