Update Shopify to Shopify Markets

This guide explains how to update your existing Shopify integration with Ometria to Shopify Markets. If this is a new installation then refer to Setting up a Shopify integration.

Shopify users can integrate their Ometria account with Shopify Markets to provide a more localised experience for international markets.

This integration means you can make use of the following features:

• Your Shopify markets (i.e. regions) are mapped to stores in Ometria
• See the which of your products are available in each market
• See product pricing in the same currency as your Shopify Market settings for product and product recommendation template blocks.

You'll be able to pull all of your historical Shopify Market data for product availability and pricing. 

Getting started

You'll need to consult with Ometria before integrating with Shopify Markets.

If you're interested, please reach out to your Customer Success Representative to discuss enablement.

There is no charge for this integration.

Enabling Market Scopes in Shopify

Once you've consulted with Ometria about your integration, we'll ask you to prepare your Shopify Markets account for integration.

In Shopify, you'll need to navigate to the 'Ometria' app and turn on Enable Market:

Markets with shared domains

Some Shopify accounts are set up with multiple markets sharing the same domain.

In this case, make sure you've configured the country/region redirection setting. 

theme.liquid configuration

1. In Shopify, go to Online Store > Edit Code > theme.liquid
2. Update the following fields for Shopify Markets:
   • site: {{localization.country.iso_code|json}}
   • shop_currency: {{localization.country.currency.iso_code|json}}

You'll also need to make a few updates to your theme.liquid file to make sure that the URLs added to abandoned baskets are specific to the store the contact visited, and not your default store. 

Example:

ometria.raw_data = {
  cart_count: {{ cart.item_count | json }},
  cart_total: {{ cart.total_price | json }},
  cart: [],
  collection_count: {{ collection.products_count | json }},
  collection_handle: {{ collection.handle | json }},
  collection_id: {{ collection.id | json }},
  current_page: {{ current_page | json }},
  customer_email: {{ customer.email | json }},
  customer_id: {{ customer.id | json }},
  customer_phone: {{ customer.phone | json }},
  page_handle: {{ page.handle | json }},
  product_id: {{ product.id | json }},
  search_count: {{ search.results_count | json }},
  search_terms: {{ search.terms | json }},
  template: {{ template | json }},
  locale_domain: true,
  shop_currency: {{ localization.country.currency.iso_code | json }},
  site: {{ localization.country.iso_code|json }}
};

Note: If you have requested a namespace for each store from Ometria, please add a line with the namespace you were provided with a colon (e.g. namespace:"uk:") to the ometria.raw_data section. You must use the same case as provided by your Technical Project Manager. Please make sure that each line has a comma at the end, except the last line. 

Example with namespace:

ometria.raw_data = {
  cart_count:         {{ cart.item_count | json }},
  cart_total:         {{ cart.total_price | json }},
  cart:               [],
  collection_count:   {{ collection.products_count | json }},
  collection_handle:  {{ collection.handle | json }},
  collection_id:      {{ collection.id | json }},
  current_page:       {{ current_page | json }},
  customer_email:     {{ customer.email | json }},
  customer_id:        {{ customer.id | json }},
  customer_phone:     {{ customer.phone | json }},
  page_handle:        {{ page.handle | json }},
  product_id:         {{ product.id | json }},
  search_count:       {{ search.results_count | json }},
  search_terms:       {{ search.terms | json }},
  template:           {{ template | json }},
  locale_domain:      true,
  shop_currency:      {{ localization.country.currency.iso_code | json }},
  site:               {{ localization.country.iso_code|json }},
  namespace:          "uk:"
};

Shopify Pixel

Update your pixel with the one below.

const OMETRIA_TAG_ID    = '<tag id>';
const OMETRIA_NAMESPACE = '';
const OMETRIA_TAG_URL   = 'https://cdn.ometria.com/tags/' + OMETRIA_TAG_ID + '.js';

function omNumericId(id) {
  return String(id == null ? '' : id).split('/').pop();
}

function omSite(checkout) {
  var c = checkout && checkout.localization && checkout.localization.country;
  return (c && c.isoCode) ? c.isoCode.toLowerCase() : undefined;
}

function omLoadTag() {
  if (document.querySelector('script[src*="' + OMETRIA_TAG_ID + '"]')) return;
  var sc = document.createElement('script');
  sc.src = OMETRIA_TAG_URL;
  sc.async = true;
  document.getElementsByTagName('head')[0].appendChild(sc);
}

analytics.subscribe('checkout_started', (event) => {
  var checkout = event.data.checkout;
  window.ometria = window.ometria || {};

  var cart = [];
  (checkout.lineItems || []).forEach(function (item) {
    cart.push([
      parseInt(item.variant.product.id, 10),
      parseInt(item.variant.id, 10),
      item.quantity,
      item.finalLinePrice.amount * 100
    ]);
  });

  window.ometria.raw_data = {
    template:       'checkout',
    namespace:      OMETRIA_NAMESPACE,
    site:           omSite(checkout),
    cart_total:     checkout.totalPrice.amount * 100,
    cart_count:     (checkout.lineItems || []).length,
    cart:           cart,
    shop_currency:  checkout.currencyCode,
    customer_email: checkout.email
  };
  omLoadTag();
});

analytics.subscribe('checkout_contact_info_submitted', (event) => {
  var email = event.data.checkout && event.data.checkout.email;
  if (!email) return;
  window.ometria = window.ometria || {};
  window.ometria.raw_data = window.ometria.raw_data || {};
  window.ometria.raw_data.customer_email = email;
  if (typeof ometria !== 'undefined' && typeof ometria.identify === 'function') {
    ometria.identify(email);
  } else {
    omLoadTag();
  }
});

analytics.subscribe('checkout_completed', (event) => {
  var checkout = event.data.checkout;
  var orderId  = checkout && checkout.order && checkout.order.id;
  if (!orderId) { console.warn('Ometria: no order id on checkout_completed'); return; }

  var numeric = omNumericId(orderId);
  window.ometria = window.ometria || {};

  if (typeof ometria !== 'undefined' && typeof ometria.trackTransaction === 'function') {
    if (checkout.email) ometria.identify(checkout.email);
    ometria.setPageType('confirmation');
    ometria.trackTransaction(OMETRIA_NAMESPACE + numeric);
    return;
  }

  window.ometria.raw_data = {
    template:  'confirmation',
    order:     numeric,
    namespace: OMETRIA_NAMESPACE,
    site:      omSite(checkout)
  };
  omLoadTag();
});

Overlays for Shopify Markets

If you'd like to use the same overlays for each Shopify store, choose the default store option when creating your overlay version.

See: Overlays: Stores

If you'd like to create a separate overlay for each of your stores (i.e. Shopify regions), follow these steps:

Stores with unique URLs

Select the corresponding store and customise your overlay as needed.

Stores that share the same URL 

E.g. www.example.com/en-eu

You'll need to use overlay tags to differentiate your stores. 

Create a tag for each store with the corresponding two letter ISO 3166-1 alpha-2 code, e.g. GB for the United Kingdom, AR for Argentina, etc. 

See: Setting tags for overlays 

Once you've set your tags, apply them to each overlay and select the corresponding store.

Swym integration

If you're using Ometria's integration with Swym and want to support prices, currency and URL by market, you'll need to switch to Swym's Wishlist Plus plan. 

Please get in touch with your Swym representative to find out more.

This Wishlist Plan plan supports market data for the following events:

• Wishlist
• Back in Stock
• Price Drop 

Validate

Validate the setup on staging, with a real front-end test order, for at least three markets including one non-primary market. Screenshots of a preview theme are not enough.

To see what is being sent: run ometria.setDebugLogging(1) in the browser console. For storefront pages the console works as normal. For anything inside checkout you have to switch the console’s JavaScript context to the pixel sandbox first, or the Ometria object will not be there. If ometria.setDebugLogging comes back as "not a function" on a storefront page, the Ometria tag never loaded, which almost always means something above it threw.

Troubleshooting