DOCS

Shopify

/

Hello for Shopify

Learn about the Hello integration for Shopify.

Are you looking to give your international customers the same kind of shopping experience as your domestic customers? Let us introduce you to Zonos Hello!

When an international shopper arrives at your site, Hello immediately welcomes the shopper and messages them in their local language, letting them know you sell globally. It’s quick and easy to integrate our extension and start delivering a better experience for your international shoppers.

Features 

  • Welcome the international customer to your store.
  • Enable currency conversion throughout your site.
  • Display estimates for duties and taxes.
  • Localize the messaging inside Hello.
  • Personalize the shopper experience.
  • Eliminate customer anxiety toward hidden international fees.
  • Zonos Hello supports multi-country ecommerce shops.
1

Get started

  1. Sign up for Hello - Once you create an account, you will be given access to Zonos Dashboard.
  2. Installation - Follow the instructions below to install Hello for your Shopify platform.

Note: Zonos credentials, including your Hello site key, can be found at https://dashboard.zonos.com/settings/dashboard/integrate.

2

Install

Ready to install Hello? We’re excited to get you started!

3

Sign up

  1. Go here and click Sign up for free to begin.

  2. Once you finish the registration process, check your inbox for an email to activate your Zonos account.

  3. After verifying your email, you will receive a second email with your custom Hello script.

  4. Copy the custom Hello script found in the email.

Note: Add a shipment rating to ensure that Hello will work as accurately as possible as a stand-alone plugin.

4

Add custom script

  1. Now, log in to your Shopify store and go to Online Store.
  2. On your current theme, click Actions -> Edit code.
  3. In your theme files, click theme.liquid.
  4. At the bottom of the theme.liquid file, place your custom Zonos script before the closing body tag.
  5. Next, hit Save.
  6. You should now see Hello on your website’s homepage. If not, try a hard refresh or clear your cache.
5

Add duty and tax quotes

If you are using Shopify as your platform, we have a script you can use that will pull the product data from your Shopify product details.

The below code has a function that will run on the product pages and the cart page.

Hello integration script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
    function znDutyTaxEstimateOnDetailPage() {
        {% if product and product.price %}
          zonos.quote({
            items: [{ price: "{{ product.price | money_without_currency }}", name: "{{product.title | replace: '"', '\"'}}", url: "{{ shop.secure_url }}{{ product.url }}", image: "https:{{ product.featured_image | product_img_url: 'medium' }}"}],
            currencyCode: '{{ shop.currency }}'

          });

      {% endif %}

  }

  function znDutyTaxEstimateOnCartPage() {
  if (window.location.href.indexOf("cart") > -1) {
  zonos.quote({
  items: [
  {% for item in cart.items %}
  { price: "{{ item.price | money_without_currency }}", quantity: {{item.quantity}}, name: "{{ item.title | replace: '"', '\"'}}", url: "{{ shop.secure_url }}{{item.url}}", image: "https:{{item.image| product_img_url: 'medium'}}"},
  {% endfor %}
  ],currencyCode: '{{ shop.currency }}'});
  }
  }

  znDutyTaxEstimateOnDetailPage();
  znDutyTaxEstimateOnCartPage();
</script>
6

Hide content from shoppers

Use Hello to hide content from international shoppers.

The z-intl class is based on the current domestic country. If Hello is set to an international country, the z-intl class will act as a hidden class, hiding the content that z-intl is tied to.

Use the following CSS to hide content. Replace your-content with floating content you want hidden.
z-intl your-content { display: none; }

Now you can hide Hello from your domestic customers to make room for other dialog boxes.

Hello customization CSS

1
2
3
4
5
6
#zonos {
  display: none;
}
z-intl #zonos {
  display: block;
}
6

Hide for specific countries

Add the #zonos id combined with the country code that doubles as the CSS class for that country to the z-intl { display: none; } function.

The line should look something like this:

Hello customization CSS

1
2
3
z-intl #zonos.US {
  display: none;
}

Was this page helpful?