Hello for Shopify

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.

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

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.

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.

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>

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.

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

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