Squarespace: Order Confirmation Page

Some custom code for Order Confirmation Page

Order Confirmation Page ID 

• general: body#order-confirmed
• Headline (Order Confirmed): div#confirmed-page h1
• Text (Order number: #….): div#confirmed-page>p:nth-child(2)
• Order Number: div#confirmed-page>p:nth-child(2) strong
• Text (Your order of…..): div#confirmed-page>p:nth-child(3)
• Link: div#confirmed-page a

How to get Order Confirmation Page URL?

You can setup a “Service” product with $0. Then place it then Squarespace will redirect you to Order Confirmation Page.

Order Confirmation Page Color

/* Order Confirmation Page Background */
body#order-confirmed, body#order-confirmed footer.sections .section-background {
    background-color: #000;
}
/* Nav Items color */
body#order-confirmed .header-nav-item>a {
    color: white;
}
/* Header Button Color */
body#order-confirmed a.btn {
    color: white;
    border-color: white;
}
/* Social Icons Color */
body#order-confirmed .header-actions-action--social svg {
    fill: white;
}
/* Burger Color */
body#order-confirmed:not(.header--menu-open) .burger-inner>div {
    background-color: white !important;
}
/* Page content color */
div#confirmed-page * {
    color: white;
}

Order Confirmation Page Content Color & Font

div#confirmed-page * {
    color: red;
    font-family: monospace;
}

Remove Header – Footer

body#order-confirmed header#header, body#order-confirmed footer.sections {
    display: none;
}

Underline Link on Order Confirmation

div#confirmed-page a {
    color: blue;
    text-decoration: underline;
}

Rename “Order confirmed”

div#confirmed-page h1 {
    font-size: 0;
}
div#confirmed-page h1:before {
    content: "Your Order Info";
    font-size: 30px;
    font-weight: 600;
}

Add an Image after Text

div#confirmed-page h1+p+p:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/03/16/01/23/bird-7071408__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    width: 50%;
    height: 300px;
}