The Reach Shopify Apps (Reach Localize and Reach Currency) enable Shopify merchants to make their business globally accessible by allowing their store to handle global transactions.

The Apps allow shoppers to purchase in their local currencies through a single Shopify store using Shopify's native checkout.

What do the Reach Shopify Apps do?

  • Support multiple currencies in one store
  • Integrate directly into Shopify's native checkout
  • Allow shop owners to set up variant-specific fixed pricing rules
  • Allow shop owners to set up rounding rules for currency conversions
  • Support over 100 different currencies
  • Enable access to Reach's many alternative payment methods at checkout

Getting Started

In order to use the Reach Shopify solution effectively, we're going to guide you through some of the questions and topics you need to think about when you're installing the app.

Supported Browsers

We currently support all the browsers that Shopify officially supports.


Please reach out with any questions! We're here to help.

[email protected]

Step 1 - Install the Reach Shopify Apps

Contact Reach Support for install links

[email protected]

You will need to install 2 apps

  • Reach Payment Gateway
  • Reach Currency App

Step 2 - Setting Up Your Store

Once the Reach Localize Apps are installed on your store, use the information on this page to help you guide you through the setup.

Here's an overview of what you'll need to do to set up your store:

  1. Update your currency settings in Shopify
  2. Verify that the update took effect by looking at the "Money" attribute in your code
  3. Add the Reach Checkout additional script
  4. Create the Reach Script Snippet
  5. Update theme.liquid and Checkout.liquid

That's it!

You can optimize your Reach Script further using some of the attributes available.

Currency Settings

  1. From Shopify's admin, select Settings and then Store details

  1. Scroll down to the Store Currency section, click Change formatting

  1. Update the HTML with/without currency "span" tag to include class="money" span as shown below

Here's an example:


To be safe, ensure the use of quotes or other symbols '<${" etc. doesn't affect the current theme by making this change then checking a preview of your theme for any console errors.

Verify Money Tags

Verify that the update you did in the "span" class in the last step has taken effect. Do this by double checking in your code that all money values are rendered with the | money filter.

Here's an example that shows | money is correctly showing up in the code.

<span>{{ product.price | money }}</span>

To make sure that the price conversions are done correctly, the class="money" must be within every that involves a price that needs to be converted on your store.

Reach Checkout Additional Scripts

  1. From Shopify's admin, click settings and then Checkout

  1. Scroll down to Additional scripts, add the Reach script in the text box available.

Here is the code to add to the Additional scripts section.

  // Required for Reach Gateway
  var gip_order_id = '{{ checkout.order_id }}';

Create the Reach Script Snippet

  1. From Shopify's admin, select Online Store.

On the theme you want to install Reach script, select Actions and then Edit code.

  1. Under "Snippets", click "Add a new snippet"

Enter the desired snippet name, we recommend "reach-script", click Create Snippet to create the snippet.

  1. Update the "reach-script.liquid" with your customized Reach code.


{Merchant Id} should be replaced with your Reach Merchant Id, kindly reach out to us for your valid Merchant Id.

You can create your custom code here My Shop's Custom Code

<!-- Reach Localize Script -->
   src="{Merchant Id}/localize.js"
   data-merchant_id="{Merchant Id}">

Update theme.liquid and checkout.liquid

  1. From Shopify's admin, navigate to your theme codes

  1. Under "Layouts", find your theme.liquid and checkout.liquid

Note: If your checkout.liquid doesn't exist, you can create it.

Copy and paste the code below into your theme.liquid and checkout.liquid just before the .

{% include 'reach-script' %}

Script Tag Options

To further customize your shop's code, you can use the attributes described below.

srcYesLocalize.js script source
data-merchant_idYesYour Merchant ID
data-store_currencyNoThe store currency. Defaults to 'USD' if omitted. Set to the 3-char currency code for all other currencies.
data-process_store_currencyNoSet to 'true' if Reach will process store currency orders. Reach payment methods will be shown for all currencies including the store currency. Shopify payment methods will always be hidden unless the 'data-whitelisted_store_currency_gateways' flag is used.
data-whitelisted_gatewaysNoA comma separated list of Shopify gateway codes. Each gateway included will be enabled for localized orders. See Gateway Codes below for more information.
data-whitelisted_store_currency_gatewaysNoUsed together with the 'data-process_store_currency' attribute. A comma separated list of Shopify gateway codes. Each gateway included will be enabled for store currency orders if 'data-process_store_currency' is also set to true. See Gateway Codes below for more information.
data-envNoScript environment. Defaults to 'production' if omitted, which will use production APIs. Set to 'sandbox' or 'development' when using the corresponding MIDs/API. See Environments below for more information.
data-flc_onlyNoSet to 'true' if only Reach DHL app functionality is required. Will disable price conversion and payment processing functions.
data-currency_tagNoThis flag can be used to force a shop's visitors to re-localize (clear their cached currency) once every time a new value is set. The value can be any alphanumeric string.
data-disabled_countriesNoA comma separated list of 2-character country codes. The script will be disabled if the shopper is localized to any of these countries.
data-auto_round_pricesNoThis flag is used to enable automatic rounding on all prices across the store.
data-block_ga_crawlersNoThis flag is used to force web crawlers like Google crawlers to use store currency and remain undetected
data-hide_zero_decimalNoSet to "true" to remove .00 from rounding values. Set to "false" if you want decimal .00 with your rounded prices. e.g. If set to "true" $35.00 CAD is displayed as $35 CAD

Gateway Codes

Gateway CodeGateway
all Using 'all' will override the specific gateway behaviour and show all gateways instead.
shopify Shopify Payments
cashCash on Delivery (COD)
bankBank Deposit
afterpay_naAfterpay North America
amazonAmazon Pay
chinapayChina Payments
clearpay**** Clearpay
clearpay_eur****Clearpay EUR
clearpay_ukClearpay UK
(Add both tags)
Klarna (English)
klarna_esKlarna (Spanish)
Use the following text in your label:
Compra ahora, paga después con Klarna
klarna_frKlarna (French)
Use the following text in your label:
Acheter maintenant, payer plus tard avec Klarna
klarna_de_invoiceKlarna (German)
Use the following text in your label:
Rechnung mit Klarna
klarna_de_installmentKlarna (German)
Use the following text in your label:
Ratenkauf mit Klarna
klarna_de_immediatelyKlarna (German)
Use the following text in your label:
Sofort bezahlen mit Klarna
klarna_itKlarna (Italian)
Use the following text in your label:
Compra ora, paga dopo con Klarna
money_orderMoney Order
splititSplitit Monthly Payments
Use the following text in your label:
Spotii - Pay in 4 instalments Cost-Free ◉◎◎◎ قسطها على 4 دفعات مجاناً
zipZip - Pay in 4 (Quadpay)


Uninstall conflicting apps from your store


Uninstall conflicting apps from your store

Reach Localize is powerful but not powerful enough to work accurately when there are conflicting apps already installed in your store. If you have apps that fall under the categories below, kindly uninstall them or stop them before completing your Reach Localize customization.

  1. All currency customization apps installed on your store
  2. Any Geo location apps
  3. Shopify Multi Currency

Step 3a. - Vanity Pricing

"Vanity Pricing" or "rounded pricing" is a way for you to control how your prices are displayed to your shoppers.

The Reach Vanity Pricing functionality allows shop owners to convey value and motivate customers with specific rounding or display rules attached to their prices.


Before you start

Make sure you reach out to your Reach Account Manager to discuss your rounding rules, fixed foreign pricing, charm values, and discounted sale pricing.

Add Auto Rounding to my prices

First, ensure that your currency settings is updated as recommended here

Then, with the attribute data-auto_round_prices="true" added to your "reach-script", you should be able to have all prices within your website rounded.

Note: cart pages require special attributes, check here for cart integrations

<!-- Reach Localize Script -->
   src="{Merchant Id}/localize.js"
   data-merchant_id="{Merchant Id}"

Disable Rounding Tag

For prices you do not want rounded after using the attribute above, you can add the data-variant-id="noround" within the tag of the price you don't want to round.

Product and Variant Tags

If you cannot for any reason do auto rounding for your store then you would have to do the vanity task manually by following the steps below.

In order to vanitize product pricing properly the Reach code needs to know what prices should be converted for the different variant product options.


These edits are usually made in the collection.liquid and product.liquid files but your store may have other places where the tag exists.

Add data-product-id and data-variant-id attributes to the parent of any tags for a product in your .liquid code.

  • For any secondary prices such as sale prices, append a suffix to the data-variant-id with the format <variant_id>:<text> where text can be an identifier of your choosing.
<div data-product-id="{{ }}" 
     data-variant-id="{{ }}">
    {{ product.price | money }}
// Sale prices
<div data-product-id="{{ }}" 
     data-variant-id="{{ }}:compare">
    {{ product.compare_at_price | money }}


In product.liquid, add the data-gip-product-variant-select attribute with product ID as the value to the variant element if a product has multiple variants.

<select data-gip-product-variant-select="{{ }}">


Make sure that this change doesn't affect the selectCallback javascript function, which is sometimes used for switching between variants.

function selectCallback(variant, selector) {
    var $price = $('');

Step 3b. - Cart Template changes

The following section is for preparing your cart page or flyout carts for vanity pricing. For flyout carts or any additional carts there are extra steps required which are outlined below under Additional Carts

Main Store Cart (/cart)

  1. Login to Shopify's admin, select Online Store.

  1. Select Actions and click on Edit Code

  1. Under "Templates", select cart.liquid.

Note: In some themes, this may be located under "Sections" in the cart-template.liquid file as shown in the first line of the cart.liquid shown below

  1. Finally, make customized changes to your cart pages using the information and attributes below

In order to convert prices to the consumer currency, elements with prices in the cart page will need to be tagged with these classes:

gip-cartparent element of the cart line itemsThere can only be one element on the page with this class or else the cart will not be valid.
gip-cart-line-itemmain line item element

The gip-cart is needed within a cart body while the gip-cart-line-item needs to be included within the line-item loop of the cart.

Most carts includes product price, compare_at_prices, quantity, final line item prices, subtotals and sometimes total depending if there are discounts or not. an example set of attributes are shown below.

If these cart elements exist in your cart.liquid page, you will need to add the corresponding classes to overwrite any existing inner html content with the converted prices. If no conversion is happening then the inner html content will be untouched.

Add CartTo the Cart ElementNotes
gip-cart-subtotalnon-discounted subtotal
gip-cart-discounted-subtotaldiscounted subtotal from discounts, auto discounts, and script discounts
gip-cart-total-discountstotal discounts amount from discounts, auto discounts, and script discounts
gip-cart-additional-feeadditional feesThe amount must be contained in a child element and these fees will be added to the cart total.
<h3 class="gip-cart-additional-fee"><span class="money">$123.45</span></h3>
gip-cart-totalcart total

Line Item Optional Classes

Within the line item itself you will need to do some or all of the following steps depending on your store:

  1. Add gip-cart-line-item-qty class to the line item element that contains the quantity amount. Make it non-editable if you have an Update Cart button.
// For carts with an editable quantity and an update cart button, 
// create a new hidden span:
<span class='gip-cart-line-item-qty' style='display:none;'>{{ line_item.qty }}</span>
// For carts that use Ajax to update the quantity immediately add 
// the 'gip-cart-line-item-qty' to the existing element: 
<input type='text' class='gip-cart-line-item-qty'/>
  1. Create a hidden span with class gip-cart-line-item-price and product/variant ID attributes and create a child element with the original (non-discounted) item price.
<span class="gip-cart-line-item-price"
    data-product-id="{{ line_item.product_id }}"
    data-variant-id="{{ line_item.variant_id }}">
    {{ line_item.original_price | money }}
  1. Create a hidden span with class gip-cart-line-item-meta and the attributes data-original-price-cents and data-discounted-price-cents
<span class="gip-cart-line-item-meta"
    data-original-price-cents="{{ line_item.original_price }}"
    data-discounted-price-cents="{{ line_item.discounted_price }}">
  1. Create spans with class gip-cart-line-item-discount and attribute data-discount-title for each Shopify Script line item discount. This is only necessary if you use scripted discounts.
{% for discount in line_item.discounts %}
    <span class="gip-cart-line-item-discount"
    data-discount-title="{{ discount.title }}"></span>
{% endfor %}

Optional If you are using the gip-cart-line-item-compare-at-price-display or gip-cart-line-item-compare-at-total classes to display compare at prices, you will additionally need to add this:

<span class="gip-cart-line-item-compare-at-price"
    data-product-id="{{ line_item.product_id }}"
    data-variant-id="{{ line_item.variant_id }}:compare">
    {{ variant.compare_at_price | money }}

Optional Classes

If these line item elements exist in your cart.liquid page, you will need to add the corresponding classes to overwrite any existing inner html content with the converted prices. If no conversion is happening then the inner html content will be untouched.

gip-cart-line-item-price-displaynon-discounted unit price
gip-cart-line-item-compare-at-price-displayunit "compare at" price
gip-cart-line-item-discounted-price-displaydiscounted unit price from discounts, auto discounts, and script discounts
gip-cart-line-item-final-price-displayfinal unit price
gip-cart-line-item-totalnon-discounted line total
gip-cart-line-item-compare-at-price-totalline "compare at" total
gip-cart-discounted-line-item-totaldiscounted line total from discounts, auto discounts, and script discounts
gip-cart-final-line-item-totalfinal line total

Additional Carts

For any additional carts, like popup carts, you will need to do all of the same changes for the main cart for your other carts. In order to differentiate the carts use this class name structure gip-secondary-cart-* where '*' is the rest of the class name from above.

For example, if on the cart page you had gip-cart-line-item, for the popup cart you would use gip-secondary-cart-line-item for that element.

Fly-Out (Popup) Cart

Most stores have more than one(1) cart, If you have used the above configurations for the main cart and you have a popup cart. We shall consider this your secondary cart. Thus, doing what we have done with the main cart above using gip-cart classes, we would do the same for the popup cart using gip-secondary-cart classes.

An example of a popup cart is shown below with the appropriate gip-secondary-cart classes used.

If your store has more than 2 carts e.g an extra mobile cart or re-usable cart codes, then it is time to use the gip-extra* attribute classes as described below.

*It is very important that all carts when displayed on the store do not have duplicated cart attributes.


If your store has more than just the basic cart and popup cart you may use these class prefixes as well for those carts:

  • gip-extra-cart-*
  • gip-extra2-cart-*

Apply Utility Classes

Optional Add gip-convert-hide or gip-convert-display-none to set opacity to 0 or set display to 'none' respectively, if certain elements should be hidden permanently when currency conversion is running. Elements will be displayed if currency conversion is disabled (ie. domestic localize).

Optional Add gip-extra-discount-display class to any elements that display the discount amount (from percentage or flat discount codes only) in checkout. This could be used for custom messages detailing how much was discounted. Checkout pages only.

Currency Selector

The Reach Currency Selector allows your shoppers to control the currency in which they shop at your store, regardless of geolocation.


The currency selector is an optional feature; it will not affect anything else if omitted.

Add the currency selector to Sections > footer.liquid

<select class="gip_currency_select">
  <option value="GBP">British Pounds</option>
  <option value="CAD">Canadian Dollars</option>
  <option value="USD">US Dollars</option>
  <option value="EUR">Euro</option>
  <option value="-1" class="gip_currency_select_local">(local)</option>
  • Each option should contain the Reach currency code as the value, but the text can be anything.
  • There must be an option for the store base currency.
  • There must also be an option with a value of -1 which will be used for the automatically detected currency if it is not already on the list. If custom text is required for this option, the id="gip_currency_select_local" can be removed to achieve this.

Custom Currency Selector

If you are utilizing your own currency selector there are some optional classes that may help you.

  • You may add the class gip-currency-select-text to any element that should display the current currency code.
  • You may add the class gip-currency-class to any element that you would like to style according to the currency selected. The script will automatically add an additional 'gip-currency-class-{current currency}' class to that element.
    • For example, if the selected currency is "USD" then the added class will be `gip-currency-code-usd