Some custom code for Order Confirmation Page
Table of Contents
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; }