When a customer has successfully checked out on your Squarespace website a confirmation page will appear. This page is designed to comfort customers by confirming that their order was successfully placed.

There are currently (February 2023) two different post-checkout pages.

Physical, digital and service products

Squarespace recently made some changes to the order confirmation process. Anyone checking out with physical, digital, or service products will now see a full Order Status page (see below). This replaced the original Order Confirmation page in 2023, which displayed a simple line of text including “Order Confirmed”, the order number and the order value. None of the physical or service products were listed.

This new Order Status page is a welcome development and provides some really useful features that could reduce the administrative burden for merchants.

It includes:

the order number
an order status badge (“pending fulfillment” or “fulfilled”)
a summary of the items ordered, including the product title, a product thumbnail, the SKU, variant details and the price.
the contact details provided by the customer
the order total

For example, the summary of the order, complete with product thumbnails, is a vast improvement over the order total that appeared on the old Order Confirmation page. These visual cues provide some welcome reassurance that the correct products were ordered.

This new Order Status page can also be reached if the customer clicks view your order in their Order Confirmed email. When the order has been fulfilled, if you have added a tracking number to an order for physical goods, the tracking information will also be shown on this page. It’s really neat and will clearly improve over time.

That said, there are also some issues with this new Order Status page, as I’ve documented below (see Feedback on the Order Status page).

Gift cards, subscriptions and memberships

Gift cards, subscription products and memberships have always used a different checkout to regular products, forcing them to be purchased separately. For the time being, this continues and the original Order Confirmation page is still used for these products. As I mentioned above, this page is somewhat simpler, showing just a bold “Order Confirmed” title, the order number and the value of the order. I fully expect this page to be replaced by the Order Status page, but it is unlikely to happen immediately.

Customising the Order Status page

If you want to track sales using a third party solution, or you want to style the Order Status page, you can add code to the Order Status page that runs whenever this page is shown. To do this, visit Code Injection and scroll down to the Order status page panel.

Bear in mind that the Order Status panel doesn’t only appear when a customer has successfully checked out. A customer may view this page at any time in the future, to check on their order status. If you are using a tracking script to track sales, it is therefore very important that this script only runs the first time this page is shown, otherwise it will register a sale whenever the customer views the Order Status page! You can ensure the code only runs the first time by placing the code between {.if firstPageView} and {.end} tags.

Conversely, if you want to style the Order Status page, you’ll probably want styling to apply every time the page is viewed, regardless of whether it is the first or subsequent view.

Here is an example showing how to add CSS (in between style tags) and JavaScript (in between script tags). Code placed between the {.if firstPageView} and {.end} tags will only run once, after the initial purchase.

<style>
  /* this CSS always applies */
</style>

<script>
  // This script always runs
  
  {.if firstPageView}
  // Add tracking scripts here
    
  
</script>

Customising the Order Confirmation page

If you want to track sales of gift cards, subscriptions and memberships, or you want to style the page shown after someone purchases any of these items, you’ll need to add your code to the Order Confirmation page. To do this, visit Code Injection and scroll down to the Order confirmation page panel.

The Order Confirmation page only appears once after checkout, so you do not need to worry about the ‘firstPageView’ tags mentioned above.

Feedback on the Order Status page

Whilst I really welcome the introduction of an Order Status page on 7 February 2023, I do have two concerns about this first iteration. Helping customers feel reassured is fundamental part of design and yet there are three missing elements:

1. There isn't a positive confirmation message

The fundamental purpose of the post-checkout, confirmation page is to provide reassurance that the payment has been successful. However, when a customer successfully places an order for a physical or service product, the first thing they see is a sand coloured badge that says "Pending fulfillment". This badge is supposed to convey a positive picture of someone preparing, packaging and despatching their order but instead it was described by customers as an “amber warning”. Nowhere does it say that that the order has been confirmed or their payment method has been charged.

This has caused additional administration for merchants who needed to respond to concerned first-time customers who were concerned that something had gone wrong with their order. In contrast, the original Order Confirmation page provided customers with a large comforting "Order Confirmed" title, followed by a short summary paragraph of reassuring text that included "Your order...has been confirmed".

2. No header - there isn't any site branding

The second issue is that the new Order Status page doesn’t include the website header. Without the merchant’s own branding this page is just another generic, black and white Squarespace page that does not help to engender trust. We need the header, complete with the site logo.

3. No footer - customer care information is missing

Although you hope that every customer will be happy with their order, it is important to provide customer care contact information in case there are any issues with the order. There’s now a lovely order summary but what if something isn’t correct? Links to customer service, delivery and returns are often provided in the website header, but the new Order Status page doesn’t include the website footer.

I’m confident that the Squarespace product team will respond positively to this feedback (which I’ve already shared with them) but they (added on 7 February 2023). This is because . , as it lacks two essential elements that are necessary to comfort first-time customers and to calm their anxieties:

Adding an ‘Order confirmed’ heading

I’ve written some code to fix the first issue by inserting an "Order confirmed" heading above the Order Status page, complete with some supporting text. This code should be added to Code Injection > ORDER STATUS PAGE.

<!-- Add 'Order Confirmed' header to Order Status page -------------------------------------->
<!-- Copyright Soundfocus Digital [sf.digital] ---------------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.----------------------------------->
<style>
.sf-order-status-header {
  max-width: 1200px;
  margin: 34px auto;
  box-sizing: border-box;
  font-family: Clarkson, "Helvetica Neue", Helvetica, Arial, sans-serif!important;
  padding-left: 33px;
  padding-right: 33px;
}
@media (pointer: coarse) {
  .sf-order-status-header {
    padding-left: 16px;
    padding-right: 16px;
    }
  }
</style>
<script>
  {.if firstPageView}
  let sfStatusPageHeading = "Order confirmed";
  let sfStatusPageText = "Your order has been confirmed. A confirmation email has been sent to you at <b>{customerEmailAddress}</b>."; 
  function _0x3c85(){const _0x216267=['sf-order-','DOMConten',')+$','ment','status-he','4832608vTuOyw','afterbegi','ge\x20was\x20cu','5LawVuc','innerHTML','apply','ent','-root','9rMlhuL','stomised\x20','://sf.dig','search','2133376rkMJqH','className','ctor','1022JShQIP','toString','2417670QlZsvi','createEle','addEventL','4268210CwqcNF','insertAdj','(((.+)+)+','istener','construct','status\x20pa','10652ZZgQGq','.0.\x20This\x20','append','471NUMVad','883jqXQYv','body','2399530YCoIPP','#order-st','div'];_0x3c85=function(){return _0x216267;};return _0x3c85();}const _0x332997=_0x2db3;function _0x2db3(_0x4b7022,_0x4d2841){const _0x11e185=_0x3c85();return _0x2db3=function(_0x4f5cce,_0x5a7d37){_0x4f5cce=_0x4f5cce-0xbb;let _0x3c851e=_0x11e185[_0x4f5cce];return _0x3c851e;},_0x2db3(_0x4b7022,_0x4d2841);}(function(_0x2ca577,_0x309f61){const _0x3fe7ca=_0x2db3,_0x417239=_0x2ca577();while(!![]){try{const _0x316a2e=-parseInt(_0x3fe7ca(0xe2))/0x1*(-parseInt(_0x3fe7ca(0xd3))/0x2)+-parseInt(_0x3fe7ca(0xe1))/0x3*(parseInt(_0x3fe7ca(0xde))/0x4)+parseInt(_0x3fe7ca(0xc7))/0x5*(-parseInt(_0x3fe7ca(0xd5))/0x6)+parseInt(_0x3fe7ca(0xbc))/0x7+parseInt(_0x3fe7ca(0xd0))/0x8+parseInt(_0x3fe7ca(0xcc))/0x9*(-parseInt(_0x3fe7ca(0xd8))/0xa)+parseInt(_0x3fe7ca(0xc4))/0xb;if(_0x316a2e===_0x309f61)break;else _0x417239['push'](_0x417239['shift']());}catch(_0x340817){_0x417239['push'](_0x417239['shift']());}}}(_0x3c85,0x3d8f2));const _0x5a7d37=(function(){let _0xa105bf=!![];return function(_0x1abc6b,_0x1f1fe6){const _0x1802d2=_0xa105bf?function(){const _0x5a942c=_0x2db3;if(_0x1f1fe6){const _0x5ead7f=_0x1f1fe6[_0x5a942c(0xc9)](_0x1abc6b,arguments);return _0x1f1fe6=null,_0x5ead7f;}}:function(){};return _0xa105bf=![],_0x1802d2;};}()),_0x4f5cce=_0x5a7d37(this,function(){const _0x27a0c0=_0x2db3;return _0x4f5cce[_0x27a0c0(0xd4)]()[_0x27a0c0(0xcf)]('(((.+)+)+'+_0x27a0c0(0xc1))[_0x27a0c0(0xd4)]()[_0x27a0c0(0xdc)+'or'](_0x4f5cce)[_0x27a0c0(0xcf)](_0x27a0c0(0xda)+_0x27a0c0(0xc1));});_0x4f5cce(),document[_0x332997(0xd7)+_0x332997(0xdb)](_0x332997(0xc0)+'tLoaded',function(){const _0x2f753d=_0x332997;if(document['querySele'+_0x2f753d(0xd2)](_0x2f753d(0xbd)+'atus-page'+_0x2f753d(0xcb))){console['log']('Version\x201'+_0x2f753d(0xdf)+_0x2f753d(0xdd)+_0x2f753d(0xc6)+_0x2f753d(0xcd)+'by\x20code\x20f'+'rom\x20https'+_0x2f753d(0xce)+'ital');let _0x1a396a=document[_0x2f753d(0xd6)+'ment'](_0x2f753d(0xbe));_0x1a396a[_0x2f753d(0xd1)]=_0x2f753d(0xbf)+_0x2f753d(0xc3)+'ader';let _0x101d7f=document[_0x2f753d(0xd6)+_0x2f753d(0xc2)]('h1');_0x101d7f[_0x2f753d(0xc8)]=sfStatusPageHeading,_0x1a396a['append'](_0x101d7f);let _0x3724ce=document['createEle'+_0x2f753d(0xc2)]('p');_0x3724ce['innerHTML']=sfStatusPageText,_0x1a396a[_0x2f753d(0xe0)](_0x3724ce),document[_0x2f753d(0xbb)][_0x2f753d(0xd9)+'acentElem'+_0x2f753d(0xca)](_0x2f753d(0xc5)+'n',_0x1a396a);}});
  {.end}  
</script>

Paste in the code and then edit the heading and text on lines 22 and 23 to customise it for your site.

Line 22 determines the heading title.

Line 23 determines the paragraph text that appears below the title. In the example, I have included the customer’s email address, and added bold tags either side of this for emphasis. You can see how this looks in the example screenshots below.

  let sfStatusPageHeading = "Order confirmed";
  let sfStatusPageText = "Your order has been confirmed. A confirmation email has been sent to you at <b>{customerEmailAddress}</b>.";

Here are some example screenshots of the order status page after the code was added.