Shipping price showing on product page is a must (solution)

carlosx2
Excursionist
13 0 5

It is the weirdest thing that Shopify doesn't have the option to show the shipping price on the product page. I have had many visitors asking on the chat what our shipping prices are to their country. Plenty of studies have shown that being open about all the costs of placing an order will increase your conversion rate. Letting people find out in the checkout process is hurting any business. I never place an order if I can't find out quickly how much shipping is going to cost me. Maybe if there is really no other option, but in most cases I would never buy from such a site.

 

So I have been searching high and low for such an app or solution and there is non out there that doesn't cost a fortune.  I did see some but they have no exchange rate or geo options. So I create a little piece of code to solve this issue. It gets the IP from the user to look up the country and the exchange rate, it has a JSON array with all the shipping rates, I wanted to make this separate but Shopify doesn't let you do this or I have to find out how to do this. However this is just an easy liquid file that uses some free api's to do a really easy task, you do need to adjust a few things to make it suitable for your location. 

 

Create a liquid page in snippets called product-shipping-rates.liquid and add the code and adjust it to suit your needs. I hope this code can save others some time and work as an easy solution. Shopify should really add an option like this. 

 

Let me know if you have any questions or suggestions for the code. 

 

These shipping rates are track and trace packages from The Netherlands by postnl. 

 

{% if product.available %}
<div id="jsonData"></div>

<script>
  // Retrieve user's IP address
  var userIP = '{{ request.remote_ip }}';
  var setShippingPrice;
  var setShippingCurrency;

  // Fetch IP information using ipinfo.io API
  fetch('https://ipinfo.io/' + userIP + '/json?token=0d199b49fcd789')
    .then(response => {
      if (!response.ok) {
        throw new Error('Error retrieving IP information');
      }
      return response.json();
    })
    .then(data => {
      // Extract country code from IP information
      var countryCode = data.country;

      if (!countryCode) {
        document.getElementById('jsonData').textContent = 'There are no shipping rates available at this moment.';
        return;
      }

      // Fetch country information using restcountries.com API
      var countryInfoURL = 'https://restcountries.com/v3.1/alpha/' + countryCode;
      fetch(countryInfoURL)
        .then(response => {
          if (!response.ok) {
            throw new Error('Error retrieving country information');
          }
          return response.json();
        })
        .then(countryData => {
          // Extract country name, currency code, and currency symbol from country information
          var countryName = countryData[0].name.common;
          var currencyCodeObject = Object.keys(countryData[0].currencies);
          var currencyCode = currencyCodeObject[0];
          var currencySymbolData = countryData[0].currencies;
          var currencySymbol = currencySymbolData[currencyCode].symbol;

          // Perform filtering on packageData array based on country code
          var matchedPackages = packageData.filter(function (item) {
            return item.priority_package_track_trace === countryCode;
          });

          if (matchedPackages.length > 0) {
            // Get shipping price for the matched country
            setShippingPrice = matchedPackages[0].rate_1.toString();

            var baseCurrency = 'EUR';

            // Make request to exchange rate API to convert shipping price to desired currency
            var requestURL = 'https://api.exchangerate.host/convert?from=' + baseCurrency + '&to=' + currencyCode + '&amount=' + setShippingPrice;
            var request = new XMLHttpRequest();
            request.open('GET', requestURL);
            request.responseType = 'json';
            request.send();

            request.onload = function () {
              var response = request.response;

              // Perform conversion and display the result
              var convertedPrice = response.result.toFixed(2);
              var resultHTML = 'Shipping to ' + countryName + ' costs ' + currencySymbol + convertedPrice;
              document.getElementById('jsonData').innerHTML = resultHTML;
            }
          } else {
            document.getElementById('jsonData').textContent = 'There are no shipping rates to show currently for your location.';
          }
        })
        .catch(error => {
          console.error('Error:', error);
          document.getElementById('jsonData').textContent = 'There are no shipping rates available at this moment.';
        });
    })
    .catch(error => {
      console.error('Error:', error);
      document.getElementById('jsonData').textContent = 'There are no shipping rates available at this moment.';
    });

  var packageData =
    [
      {
        "priority_package_track_trace": "AU",
        "rate_1": 15.55,
        "rate_2": 18.95,
        "rate_3": 20.5,
        "rate_5": 23
      },
      {
        "priority_package_track_trace": "BE",
        "rate_1": 7.4,
        "rate_2": 7.65,
        "rate_3": 9.05,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "BR",
        "rate_1": 14,
        "rate_2": 16.95,
        "rate_3": 20,
        "rate_5": 23
      },
      {
        "priority_package_track_trace": "BG",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "CA",
        "rate_1": 15.5,
        "rate_2": 18,
        "rate_3": 19.5,
        "rate_5": 23
      },
      {
        "priority_package_track_trace": "CN",
        "rate_1": 14.3,
        "rate_2": 16.1,
        "rate_3": 17.9,
        "rate_5": 20.25
      },
      {
        "priority_package_track_trace": "CY",
        "rate_1": 8,
        "rate_2": 8.5,
        "rate_3": 10,
        "rate_5": 13
      },
      {
        "priority_package_track_trace": "DK",
        "rate_1": 8.2,
        "rate_2": 8.8,
        "rate_3": 10,
        "rate_5": 11
      },
      {
        "priority_package_track_trace": "DE",
        "rate_1": 6.5,
        "rate_2": 7,
        "rate_3": 7.5,
        "rate_5": 8
      },
      {
        "priority_package_track_trace": "EE",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "FI",
        "rate_1": 8.55,
        "rate_2": 8.75,
        "rate_3": 9.65,
        "rate_5": 13.1
      },
      {
        "priority_package_track_trace": "FR",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "GR",
        "rate_1": 9.4,
        "rate_2": 10,
        "rate_3": 12.1,
        "rate_5": 14
      },
      {
        "priority_package_track_trace": "HK",
        "rate_1": 14.3,
        "rate_2": 16.1,
        "rate_3": 17.9,
        "rate_5": 20.25
      },
      {
        "priority_package_track_trace": "HU",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "IE",
        "rate_1": 8.15,
        "rate_2": 8.3,
        "rate_3": 9.6,
        "rate_5": 11.15
      },
      {
        "priority_package_track_trace": "IT",
        "rate_1": 7.2,
        "rate_2": 7.45,
        "rate_3": 8.6,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "JP",
        "rate_1": 15.8,
        "rate_2": 17.85,
        "rate_3": 19.7,
        "rate_5": 23
      },
      {
        "priority_package_track_trace": "HR",
        "rate_1": 8,
        "rate_2": 8.5,
        "rate_3": 10,
        "rate_5": 13
      },
      {
        "priority_package_track_trace": "LV",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "LT",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "LU",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "MT",
        "rate_1": 9.4,
        "rate_2": 10,
        "rate_3": 12.1,
        "rate_5": 14
      },
      {
        "priority_package_track_trace": "NL",
        "rate_1": 4.10,
        "rate_2": 4.10,
        "rate_3": 4.10,
        "rate_5": 4.10
      },
      {
        "priority_package_track_trace": "NZ",
        "rate_1": 15.55,
        "rate_2": 18.95,
        "rate_3": 20.5,
        "rate_5": 23
      },
      {
        "priority_package_track_trace": "NO",
        "rate_1": 10,
        "rate_2": 10.4,
        "rate_3": 11.85,
        "rate_5": 13.55
      },
      {
        "priority_package_track_trace": "AT",
        "rate_1": 6.9,
        "rate_2": 8.1,
        "rate_3": 9.6,
        "rate_5": 11
      },
      {
        "priority_package_track_trace": "PL",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "PT",
        "rate_1": 6.8,
        "rate_2": 7.3,
        "rate_3": 8.5,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "RO",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "SI",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "SK",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "ES",
        "rate_1": 6.8,
        "rate_2": 7.3,
        "rate_3": 8.5,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "CZ",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "GB",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "US",
        "rate_1": 15.5,
        "rate_2": 18,
        "rate_3": 19.5,
        "rate_5": 23
      },
      {
        "priority_package_track_trace": "ZA",
        "rate_1": 16.5,
        "rate_2": 19.00,
        "rate_3": 20.50,
        "rate_5": 24.00
      },
      {
        "priority_package_track_trace": "SE",
        "rate_1": 7.95,
        "rate_2": 8.35,
        "rate_3": 8.8,
        "rate_5": 9.4
      },
      {
        "priority_package_track_trace": "CH",
        "rate_1": 8.15,
        "rate_2": 8.3,
        "rate_3": 9.6,
        "rate_5": 11.15
      },
      {
        "priority_package_track_trace": "EU",
        "rate_1": 7.55,
        "rate_2": 7.85,
        "rate_3": 9.1,
        "rate_5": 10.45
      },
      {
        "priority_package_track_trace": "RW",
        "rate_1": 17.4,
        "rate_2": 19.2,
        "rate_3": 20.5,
        "rate_5": 23
      }
    ];
</script>
{% else %}
<!-- Add your code here for when the product is not available -->
{% endif %}
Replies 5 (5)

neatproductsltd
Visitor
3 0 0

do you have an example website where this is working so i can see it in action?

carlosx2
Excursionist
13 0 5

Sorry for the late reply, I was on vacation. You can see it run on the following page https://nimmacrafts.com/collections/frontpage/products/christmas-house-cookie-cutter-and-fondant-sta...

 

The page should load in your browser language and price symbol. 

SR_Author
Shopify Partner
12 0 0

If you want a complete solution, it can't be done with only liquid. You have duly appreciated the importance of informing customers of the total cost of an item (including shipping), but the solution you propose only breeds the possibility of error.

There is a better option. 

Pay attention to my widget: https://apps.shopify.com/shiprate-estimator

If you need help installing it, feel free to ask me.

carlosx2
Excursionist
13 0 5

As I stated before, it is quite simple to add, you might need a bit of coding experience. Your solution is just for you to make money in a way to that is obsolete. There are no errors to arise. Your solution is expensive and mine is just simple and free.  Push your grab somewhere else. You don't have any review after more than six months. 

SR_Author
Shopify Partner
12 0 0

I appreciate your opinion. When you change tariffs in Shopify, do not forget to change them in your script, otherwise it all becomes meaningless.