2. Set 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:
- Update your currency settings in Shopify
- Verify that the update took effect by looking at the "Money" attribute in your code
- Add the Reach Checkout additional script
- Create the Reach Script Snippet
- Update theme.liquid and Checkout.liquid
That's it!
You can optimize your Reach Script further using some of the attributes available.
Currency Settings
- From Shopify's admin, select Settings and then General
- Scroll down to the Store Currency section, click Change formatting
- 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
- From Shopify's admin, click settings and then Checkout
- Scroll down to Order processing and in the 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
- From Shopify's admin, select Online Store.
On the theme you want to install Reach script, select Actions and then Edit code.
- Under "Snippets", click "Add a new snippet"
Enter the desired snippet name, we recommend "reach-script", click Create Snippet to create the snippet.
- 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
- From Shopify's admin, navigate to your theme codes
- 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.
Attribute | Required | Value |
---|---|---|
id | Yes | 'gointerpay_localize' |
src | Yes | Localize.js script source |
data-merchant_id | Yes | Your Merchant ID |
data-store_currency | No | The store currency. Defaults to 'USD' if omitted. Set to the 3-char currency code for all other currencies. |
data-process_store_currency | No | Set 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_gateways | No | A 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_gateways | No | Used 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-env | No | Script 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_only | No | Set to 'true' if only Reach DHL app functionality is required. Will disable price conversion and payment processing functions. |
data-currency_tag | No | This 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_countries | No | A 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_prices | No | This flag is used to enable automatic rounding on all prices across the store. |
data-block_ga_crawlers | No | This flag is used to force web crawlers like Google crawlers to use store currency and remain undetected |
data-hide_zero_decimal | No | Set 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 Code | Gateway |
---|---|
all | Using 'all' will override the specific gateway behaviour and show all gateways instead. |
shopify | Shopify Payments |
sezzle | Sezzle |
paypal | PayPal |
amazon | Amazon Pay |
cash | Cash on Delivery (COD) |
afterpay | Afterpay |
afterpay_na | Afterpay North America |
bank | Bank Deposit |
money_order | Money Order |
clearpay | Clearpay |
clearpay_uk | Clearpay UK |
klarna | Klarna |
laybuy | Laybuy |
paybright | PayBright |
quadpay | QuadPay |
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.
- All currency customization apps installed on your store
- Any Geo location apps
- Shopify Multi Currency
Updated about 4 years ago