Customizing Your E-Commerce Thank You Page

So Paul has just bought a cool product on your awesome website. He’s gone through the different checkout steps and clicked the final “place order” button. By default, Paul will now be sent to Snipcart’s standard Thank you page, displayed inside the cart.

But the buying experience isn’t quite finished once a customer has placed his order. As a matter of fact, we know merchants are usually fond of optimizing the last steps of the buying experience (and we’ve also been asked a couple of times how to do it with Snipcart).

In this post, we will show you two ways to go about it using our Javascript API. The first one will be altering resources in the current order confirmation screen, allowing you to deliver custom messages to your customers. The second one will be to completely discard this default screen and redirect your customer to a customized page.

Modifying the default confirmation page's copy

Using our Localization Javascript API you can change the text in a flash.

The standard confirmation page message looks like this:

Let's say you want to customize this message to include a discount code. You will need to get the key of the resource for the confirmation message. We suggest you take a look at the localization file you need in our Github repository.

For this case, we will override our en locale; we will need to change the thankyou_message resource.

After including the snipcart.js file, we will use the registerLocale method that allows us to override or define new locales.

Snipcart.execute('registerLocale', 'en', {
    "thankyou_message": "Thanks for your order on our super flabbergasting website! For your next purchase, use NEXT_ORDER discount code and get 10% off!"
});

This code snippet can be anywhere on your page, as long as it is included after the snipcart.js file.

The next time a customer will complete an order, he will now see this message instead:

Easy, right?

Redirecting the user to a custom Thank you page

The first approach is easy enough: you may want to take your Snipcart integration even further. Some of our users, for instance, want to redirect their customers to a completely customized Thank you page where they can suggest items for the next purchase, add social sharing widgets, etc.

I will not cover the details of the implementation of such a page in this post, for it depends on the server language you use and what exactly you want to do. But I will show how to redirect to this kind of page and to pass the order token as parameter. You will be able to retrieve the order details through our API later on to display nice things on this specific page.

First of all, we need to bind on the order.completed event. It will be raised as soon as the payment is successful. You can read more about Javascript events in our documentation.

We will use the bind method.

Snipcart.execute('bind', 'order.completed', function (order) {
});

In the callback function, we will redirect the customer to the custom Thank you page you created. We will pass the order token in the query string.

Snipcart.execute('bind', 'order.completed', function (order) {
  var url = '/thankyou?order=' + order.token;
  window.location.href = url;
});

The customer will be redirected to this page when completing the order. You can then use the token to retrieve the order and do some e-commerce magic!

Conclusion

There’s a bunch of strategic stuff you should consider adding to that brand new, customized Thank you page. Post-conversion optimization key elements like product suggestions, social sharing widgets, time-limited offers, or exclusive discount codes, like we mentioned earlier. Email opt-in’s also a great idea, if you prefer inserting it on your Thank You page instead of inside your checkout experience with our custom fields.

At its core, Snipcart is pretty simple to use. However, if you leverage all our APIs, it can be integrated very deeply in your application. Of course, we suggest you try a lot of different approaches to try to increase your post-conversion rate. This way you'll make sure Paul gets the best from what your business has to offer!

If you want to read a little more about optimizing Thank you pages, check out GetElastic’s 11 Ways to Optimize Thank You Pages and Unbounce’s 7 Thank You Pages That Take Post-Conversion to the Next Level.

As usual, your thoughts, comments and feedback are all welcome in the comments below! Now sell on, developers and merchants!