There’s nothing worse than an unhappy customer. And what’s a big contributor to disappointment when it comes to e-commerce purchases? Shipping mistakes. 

That’s why this week we’re digging into troubleshooting wrong address errors in Shopify. Keep reading to learn an easy workaround for this common e-commerce challenge!

Why use Shopify?

Shopify is an easy, accessible platform for new small business owners and seasoned pros alike. It allows users to quickly launch an online store without the stressful development costs and server challenges that come with more complicated platforms. 

Shipping challenges in Shopify

Whether you’re new to the e-commerce game, or you’ve been running an online business for years, you’ve probably noticed that when it comes to inputting addresses for orders of any size, there can be a huge amount of variation.

It’s likely that by now you’ve seen cases where customers want to use different shipping addresses within one order, or a shipping address that differs from the billing address, leading to confusion in the checkout process, and ultimately, a dissatisfied customer.

The Fix

We can help mitigate potential problems by offering customers the ability to double check and verify their shipping address before completing the checkout process. 

And while Shopify doesn’t offer a huge array of customizations when it comes to the checkout process, in the case of shipping, there’s one customization option that can prove super useful: make payment fields “unclickable” until customers confirm the correct shipping address. 

Users who subscribe to Shopify Plus can put this customization to use, by accessing checkout.liquid: 

Once you’ve accessed checkout.liquid (follow this link for a more thorough guide), you can insert Javascript code that takes action only when a specific step in the checkout process is reached. Here’s how: 

1. Use Javascript to create a white transparent field that covers payment fields, making them unclickable, and disabling the whole area. This action will trigger when customers get to the ‘add payment information’ part of the checkout process.  

1. Add a checkbox and label with a message for the client that’s shown before customers are allowed to add payment information. This message should say something like: “Please confirm your shipping address”.

1. Use CSS to make the panel disappear when the checkbox is checked, or utilize Javascript to control that action.

Conclusion

In the world of e-commerce, things are constantly changing. New problems arise as old technologies are replaced by new ones, but change isn’t something to be feared!