The Reach badge for Shopify stores

Add the Reach badge to your store using a checkout editor

To use Reach as a Merchant of Record (MoR), you are required by the card schemes to display the Reach badge. This ensures the customer is informed of the parties involved in the transaction.

This page explains how to add the Reach badge to your Shopify store's checkout using a checkout editor.

Example of the Reach badge showing the terms of service and disclaimer.

Using a checkout editor to add the Reach badge

You can disclose Reach as your store's MoR by adding the Reach badge on your checkout page using a checkout editor app.

Shopify supports a variety of apps to customize your checkout. The Checkout Blocks and Checkout Components apps are two popular choices.

Recommended app

Reach recommends either the Checkout Blocks app or Checkout Components app for suppliers using Shopify Plus.

If you are using your preferred checkout editor to add the Reach badge, refer to the following instructions:

  1. Copy the text from the block below.
By completing your order, you will check out with our preferred international seller Reach and agree to Reach's [Terms of Service](https://www.withreach.com/consumer-terms-of-service).
  1. Using your preferred app, paste the text into the relevant content field in the checkout and accounts editor.
  2. If you are not using Reach as the MoR for all regions where you sell, select the regions where Reach is the MoR in your app settings.
  3. Save the content block settings.

Once complete, ensure the Reach badge appears on the checkout page of your Shopify store in the correct regions.


Using the Checkout Blocks app

You can use the Checkout Blocks app to display the Reach badge using dynamic blocks.

Dynamic content allows you to customize your checkout pages in a multi-entity environment where your store does not use Reach in all regions. It can also be used for single-entity stores.

Static content block

Alternatively, you may configure a simplified Static content block with the Reach badge. Static content is created directly in the checkout and accounts editor and will display on all checkouts.

Install the Checkout Blocks app

First, you must install the Checkout Blocks app. Complete the installation process by following the steps below:

  1. After signing in to your Shopify admin, navigate to the Shopify Checkout Blocks app page in the Shopify App Store. Alternatively, select Apps from the navigation menu in your Shopify Admin and search for Checkout Blocks.
  2. Click Install.
  3. You will be redirected to your Shopify Admin. In the Install app dialog, click Install.

Checkout Blocks will now appear as one of your apps in the side navigation menu.

Create a Dynamic content block

After installing the app, follow the instructions below to create a checkout block that will hold the badge content:

  1. You should be redirected to the Checkout Blocks page in your Shopify Admin after installation. If not, select Apps from the navigation menu and select Checkout Blocks from the Installed apps list.
  2. Select Blocks.
  3. Click Create block.
  1. Under Custom content with display rules, select the Dynamic content block type.
  2. Select the Banner example template.

The checkout block editor will open, allowing you to configure the content block.

Configure the Dynamic content block

Follow the steps below to add the Reach badge text to the dynamic content block:

  1. Type Reach Badge in the Block name field.
  2. In the Content items section, click Edit next to Banner.
  1. In the Title field, type in Reach Badge.
  2. Copy the text from the code block below:
By completing your order, you will check out with our preferred international seller Reach and agree to Reach's [Terms of Service](https://www.withreach.com/consumer-terms-of-service).
  1. Return to your Shopify Admin page. Delete the exemplar text present in the Content field, and in its place, paste the copied text into the Content field.
  2. Change the Banner status to Info banner and click Done. The remaining fields require no adjustments.
  3. Click Save at the top of the page to save your changes.

Set the display rules

Once the content block is configured, set the rules for displaying the block on your checkout. The checkout block should be visible to customers in the regions where Reach is your MoR.

  1. In the Publishing panel, click the Edit icon next to Locations.
  2. Make sure that only the Checkout checkbox is selected. Click Done.
  3. In the Display rules panel, select ⊕︀ Add display rule.
  4. In the search bar type Shipping and select Shipping country.
  5. Click Select a country.
  6. Select the countries where Reach serves as your MoR.
  7. Click Done.
Only selected countries

Only the selected regions will display Reach's badge and Terms of Service on your checkout page.

  1. Click Save at the top of the page to save your changes.
  2. Change the Status from Draft to Active.

You can now add the Dynamic content block to your checkout.

Add the Dynamic content block to your checkout

Once the content block is configured and set up with display rules, add it to your checkout using the checkout and accounts editor.

Follow the instructions below or review Shopify's Creating checkout blocks in the Checkout Blocks app to add the Reach badge:

  1. Click More actions ⌄ and select Add to editor.
  1. A dialog will appear outlining the editing steps and your Block ID. Note the Block ID and click Open editor. A new page will open for the checkout and accounts editor.
  2. On the editor page, click the blue ⊕︀ Add to next to Dynamic content in the left Checkout Blocks panel and select Checkout.
  1. The dynamic content block will appear on the checkout preview, and the Dynamic content panel will open. Under Block settings, select the block ID you noted in step 2 from the Block ID dropdown list. The content block will appear in the checkout preview, showing the Reach badge.
  2. Move the Dynamic content block to a suitable location using one of the following methods:
    1. Using the arrows below the content block.
      Error

      An error may prevent you from moving the block past a certain point in your checkout with the arrows. In this case, use the second method described.

    2. Select the Sections icon in the top-left corner of the toolbar, then drag the dynamic content block to the desired location in the content list.
  3. Click Save in the upper-right corner.

The Reach badge will now be displayed to your customers at checkout in the regions where Reach is your MoR.


Using the Checkout Components app

You may use the Checkout Components app to display the Reach badge on your Shopify checkout.

To begin the setup process, notify your Reach representative, who will connect you with the Checkout Components team.

Install the Checkout Components app

After your introduction, follow the steps below to add and configure the app:

  1. Install the Checkout Components app from the Shopify app store.
  2. Subscribe to the Starter plan. Notify your Checkout Component contact after you subscribe.
  3. Open your Shopify admin dashboard.
  4. Click Apps in the side navigation bar and select Checkout Components.
  5. Under Checkout Components, select Settings.
  6. Select Integrations and select the Reach card.
  1. Select the Enable Reach checkbox, then click Save.

The Reach badge template will now be accessible in the Checkout Components app.

Create a checkout component

Once the Reach badge template has been enabled, create a checkout component using the following steps:

  1. Select Components from the side navigation menu.
  2. Select Create component.
  3. Select the Reach international checkout template. The form will open pre-populated with banner copy, the Terms of Service link, and translations for all 13 supported languages.
Not there?

The Reach internal checkout template is hidden until you enable the integration. If it is missing contact your Reach representative or try reloading the app.

  1. Edit the component name, provide a name, and click Save. For example, reach-badge is an acceptable name. The form and display rules will be locked, with a banner that reads: This component is a template.
  2. Click Publish.

Verify the component is active. If it is not active, select the component name, select the Status drop-down, and choose Active.

Add the component to your checkout

Once your component is active, place the component in your checkout using the following steps:

  1. On the Checkout Component page in your Shopify Admin, click the component's hyperlinked name.

  2. Select Add to checkout, then select your store name.

  3. In the Shopify checkout editor, select the blue ⊕︀ Add to icon beside Checkout Components in the left editor panel and click Checkout to add a Checkout Component block.

  4. In the Checkout Components panel, under Block settings, fill in the Component name field with the same name you created in the previous steps. The block will update to display the Reach badge.

    Example of how the Checkout Component block will appear with the Reach badge content.
  5. Move the Dynamic content block to a suitable location using one of the following methods:

    1. Using the arrows below the content block.
      Error

      An error may prevent you from moving the block past a certain point in your checkout with the arrows. In this case, use the second method described.

    2. Select the Sections icon in the top-left corner of the toolbar, then drag the dynamic content block to the desired location in the content list.
  6. Click Save.

You can review how your checkout will appear to customers using the Preview Shop button at the top right of the page.

The Checkout Component block should display the Reach badge. Verify the following elements are present:

  • The banner renders info-toned with the disclosure copy.
  • The Terms of Service link opens Reach's consumer terms in a new tab.
  • The Reach logo renders below the text, left-aligned, and hovering over it shows a Learn more tooltip. Clicking the tooltip opens a new tab to withreach.com.
  • Switching the checkout language updates the copy with the correct translation.

For more information about Check Components, review the Checkout Components Documentation portal.