Change “Order Confirmed” text

div#confirmed-page h1 {
    visibility: hidden;
}
div#confirmed-page h1:before {
    visibility: visible;
    content: "You’re registered for reimagining justice";
}

Hide Order Info

div#confirmed-page p {
    display: none;
}

Order Confirmation Page Background

body#order-confirmed, body#order-confirmed .Main {
    background: green !important;
}

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;
}

Remove Header/Footer

body#order-confirmed {
header.Header.Header--top {
    display: none !important;
}
footer.Footer {
    display: none !important;
}
}

Notes: Each template will have a different class name for header/footer. If the code doesn’t work, please share link to your site. I can send new code.