Squarespace: Order Confirmation Page

Change Font Style

To change font style (color, font name, text size,…) you can add this to Home > Design > Custom CSS

/* order title */
#confirmed-page h1 {
    color: red;
    text-transform: uppercase;
    font-size: 20px;
    font-family: monospace;
    letter-spacing: 2px;
    font-weight: 600;
}
/* order message */
#confirmed-page p {
    color: gray;
    font-family: fantasy;
    font-weight: 300;
    font-size: 18px;
}

Add Text + Links

Add this code to Home > Settings > Advanced > Code Injection > Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
    $('div#confirmed-page').append('<p class="t-order">Back to <a href="/shop">Shop<a></p>');
  });
</script>
<style>
.t-order a {
    text-decoration: underline;
    color: green;
}
</style>

Order Confirmation Page Background Image

Add to Home > Design > Custom CSS

body#order-confirmed {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

 

Share this post:

2 thoughts on “Squarespace: Order Confirmation Page”

  1. Would like to integrate with http://www.offset.earth Impact API where we could POST a number of trees to be planted from the order confirmation code injection.

    Would also like to show the customer how many trees they planted in the order confirmation. I guess I could use thee variables provided in the Order Confirmation code injection bit.

    Thank you for your help. Happy to donate some money if we can get this sorted. 🙂

    Reply
    • Hi. I’m not familiar with Ecommerce features. You can post on some FB Groups: Squarespace Customization Resource Group, Squarespace Community, Squarespace Entrepreneurs

      Reply

Leave a Comment