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;
}
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. 🙂
Hi. I’m not familiar with Ecommerce features. You can post on some FB Groups: Squarespace Customization Resource Group, Squarespace Community, Squarespace Entrepreneurs