Shopify custom Thank You page

Shopify custom Thank You page

A thank-you page is a place where visitors are redirected immediately after taking some action, such as completing a purchase, submitting a form, etc...

After completing a purchase on any store powered by Shopify, the customer is redirected to the order status page, or "Thank You page" as most of us call it. It is the last step of a sell, telling the customer something nice and shows a summary of their order.

It is an automatically generated page, similar to the checkout pages, so your ability to customize and modify it is quite limited. 

It does not matter what is your Shopify plan, as the following tips work for everyone.

All the text on the page is generated dynamically so it can be found in the language settings. You can change the default text into anything you like. For example instead of saying "Thank you for your purchase" you can say "Have a good day". 

This can be done from the language settings: 

  • Log into your Shopify store admin
  • Go to Online Store
  • Select Themes
  • For the main theme select Actions > Edit Languages
  • On the language settings page, select checkout and system
  • Scroll down to "Checkout Thank you"

If your main theme language is any other than english you will see this:

Thank you page translation

If your main theme language is english, then you will see only the first field and simply replace the default value with the text you want.

Ok, I know I said custom thank you page and this is not even close to that, but hang on there as I will now show you how to actually add custom content to the page.

You may want to show a custom text box, or another button, a picture of Donald Trump...etc. Fortunately, Shopify provided a mean to do this using the additional scripts box on the Checkout settings page.

The bad news is that you actually have to enter scripts inside (JavaScript) and more bad news, it does no validation, so the code must be without bugs or the whole page may break.

The good news is that it accepts almost any JS code so you can make a lot of nice things.

This is also the place where you place the scripts for tracking purposes like Yotpo Reviews or other purchase tracking softwares.

You can find the additional scripts box here:

  • Log into your Shopify store
  • Settings
  • Checkout
  • Scroll down to additional scripts

If you have not made any changes here, it should look like this:

additional scripts box

In order to add another text box to the page use the following code:

<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>YOUR_CUSTOM_TITLE_HERE</h2>',
'<p>YOUR_CUSTOM_TEXT_HERE</p>',
'<p>ADD_ANOTHER_PARAGRAPH</p>'
)
</script>

Add any elements you can think of such as <img>, <span>, <button>. These elements will be shown in a content box right bellow the main box on the thank you page.

With some proper coding skills, the entire page can be modified to suit one's needs, even though Shopify does not encourage this. The page looks and feels good as it is. Adding another content box will do no harm and may  be useful.

The additional scripts box also supports liquid templating, so you can make use of it and show order or customer related information, conditionally show extra shipping and delivery information such as the estimated delivery date based on the orders's shipping address or simply offer a discount code to be used for the customer's next purchase.

In order to add elements to other places of the page, you will need some more advanced knowledge for creating said element and appending it where you want it. If you do need a more custom element than a content box leave it in the comments bellow and I will add a step-by-step way to do it.

 

Leave a comment

Please note, comments need to be approved before they are published.