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.

• Step 1. Install the Reach Shopify Apps
• Step 2. Set Up Your Store
• Step 3a. (Optional) - Vanity Pricing
• Step 3b. Cart Template change
• Currency Selector

Supported Browsers

We currently support all the browsers that Shopify officially supports.

Support

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

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

3. 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

2. 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.

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

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.

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

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

3. 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 -->
<script
   id="gointerpay_localize"
   src="https://assets.rch.io/{Merchant Id}/localize.js"
   data-merchant_id="{Merchant Id}">
</script>

Update theme.liquid and checkout.liquid

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

2. 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.

Gateway Codes

Environments:

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 https://docs.withreach.com/docs/setup#section-currency-settings

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 -->
<script
   id="gointerpay_localize"
   src="https://assets.rch.io/{Merchant Id}/localize.js"
   data-merchant_id="{Merchant Id}"
   data-auto_round_prices="true">
</script>

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 span.money tag exists.

Add data-product-id and data-variant-id attributes to the parent of any span.money 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="{{ product.id }}" 
     data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {{ product.price | money }}
    
// Sale prices
<div data-product-id="{{ product.id }}" 
     data-variant-id="{{ product.selected_or_first_available_variant.id }}:compare">
    {{ product.compare_at_price | money }}

product.liquid

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="{{ product.id }}">
  ...

❗️

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 = $('span.money');
    ...
}

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.

2. Select Actions and click on Edit Code

3. 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

4. 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:

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.

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'/>

2. Create a hidden span with class gip-cart-line-item-price and product/variant ID attributes and create a child element span.money with the original (non-discounted) item price.

<span class="gip-cart-line-item-price"
    style="display:none;"
    data-product-id="{{ line_item.product_id }}"
    data-variant-id="{{ line_item.variant_id }}">
    {{ line_item.original_price | money }}
</span>

3. 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"
    style="display:none;"
    data-original-price-cents="{{ line_item.original_price }}"
    data-discounted-price-cents="{{ line_item.discounted_price }}">
</span>

4. 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"
    style="display:none;"
    data-product-id="{{ line_item.product_id }}"
    data-variant-id="{{ line_item.variant_id }}:compare">
    {{ variant.compare_at_price | money }}
</span>

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.

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>
</select>

• 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