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

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

Installation

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

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.

Insert custom Hello script in Shopify

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.

Adding a duty and tax quote

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.

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

Hide content for Zonos Hello

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 so other dialogs are visible again.

#zonos {
  display: none;
}
z-intl #zonos {
  display: block;
}

Hide Zonos Hello 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:

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