How to Change the Order Confirmation Page to Increase Sales
Pin this post to Pinterest! ☝🏻
Did you know you can create your own Order Confirmation page that someone sees when they make a purchase on your Squarespace website?
All it takes is some very simple code installed on your page, and you’re on your way to increasing sales.
Currently, when someone purchases a physical item, digital item, or a service, they are taken to a page that looks like this (below). If they purchased a digital download, then they can either use the “Download Item” button to download the item or use the link in the confirmation email that is sent after a purchase is complete.
Unfortunately, it's kind of a dead end for customers at that point. There's no where to go other than the "Continue shopping" link. Chances are, if they just purchased something, they probably aren't going back for more shopping.
WHY YOU SHOULD CUSTOMIZE THE CONFIRMATION PAGE
Instead of using the default Order Confirmation page that Squarespace gives you, it would be better to create a new confirmation page with a newsletter block to keep our customers in a journey.
This is another place for you to put a lead generator on your site. Lead generators are one of the best ways to grow your site because once you have someone’s email address, you can keep them in the loop with your emails.
However, most people aren't just going to hand over their email address... you have to give them something in exchange. Like a discount code or a helpful pdf (like this, this, and this).
CREATE A NEW CONFIRMATION PAGE
To do this, you're going to create a regular page on your site by clicking the + sign in the Not Linked section. From there you can add text, images, newsletter block, social icons, or whatever else your heart desires.
For the site in this example, we're giving a discount code for 10% off their next purchase once they sign up. This does two things -
1. It gets them on our mailing list and
2. It gets them to come back and buy more
Also known as a win/win 😉
On this site, the newsletter section was created by using a code block to embed a Flodesk form (this post will show you how!). Since the newsletter block is already connected to Flodesk (get 50% off here!), the customer will instantly get an email including the discount code.
PRO TIP: I also tag the people that fill out the form in Flodesk so that I can track who fills out the form and returns to make another purchase.
Here’s my new confirmation page with the newsletter block -
HOW TO CUSTOMIZE THE CONFIRMATION PAGE
Here is the code that you'll be installing -
There is only one thing you'll need to change… where it says YOURPAGE, change that to the url of your page. So, if your url is mysite.com/new-page, then you would put new-page in that section. Be sure to keep the apostrophe after the word that is in the original code, otherwise it will not work.
The {.if firstPageView} part of the code tells it to show your new confirmation page ONLY the first time it is run. This is important because if you want to go back and look at an order status on the back end (COMMERCE -> ORDERS, click the order, click the 3 dots on the top right, click View order status) you will be able see the actual order status. If we didn't include that line of code, then it would show the new confirmation page every single time (that's not helpful!).
To install the code, go to Settings -> Developer Tools -> Code Injection, then scroll down to the ORDER STATUS PAGE and paste the code. Don't forget to hit Save!
IMPORTANT: If you are selling a physical item, a digital item, or a service, you will need to paste your code in the ORDER STATUS PAGE section - NOT the Order Confirmation Page.
This is what mine looks like -
NOW YOU CAN TEST IT OUT!
Change one of your items to $0, so you can purchase it without being charged and see how your new page looks!
If it isn't redirecting to your new page, double check these 3 things:
That you pasted the code in the Order Status Page section (and not the Order Confirmation Page section)
That you still have all of the correct characters in the code after the url
That your url is correct (do not include your domain - like, mysite.com)
IMPORTANT: If your newsletter is connected to your CRM (like Flodesk - here’s that discount code again), be sure to go into your CRM and create the email that will go out once the customer fills out the form.
*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.