Adding text to the Squarespace Cart Page
Introduction
If youβre using Squarespace to build an online store, the cart page is a crucial element, serving as the final checkpoint before customers make a purchase.
Squarespace already has a streamlined the cart page that is functional and visually appealing. The Product Titles, Quantities and Product Prices are clear, and the Product Thumbnails are automatically matched to a productβs colour variant, but thereβs always more that can be done.
For example, there are instances where adding text to the cart page can significantly enhance the user experience. This short guide explores some of the reasons why adding text to the cart page can help, and then provides a way to add a simple text-only message.
Pause for thought
Customers tend to pause and contemplate their purchase when they reach the cart page, so itβs an ideal opportunity to provide them with timely information about their purchase. For example, in the interests of transparency and trust, you may want to explain that additional fees may be added at checkout. This can be particularly important when selling internationally when shipping costs and/or taxes may a larger effect on the overall cost of an order.
If youβve used Etsy, youβll know how helpful it can be to see estimated production and/or delivery times, and to know read an overview of the sellerβs returns policy. Adding this to the cart page helps to set the customerβs expectations early on.
Another example is when a customer is purchasing in a currency other than their own. They may need to consider the cost of currency conversion charges that their card provider will levy. Although these costs arenβt charged by the seller, warning the customer about them can foster transparency and trust, reducing the likelihood of abandoned carts due to unexpected costs during checkout. As the Squarespace checkout page is notorious for not being customisable (due to rigorous security controls), the cart page is your last opportunity to provide customers with an explanation.
How to add a static message
Hereβs an example of a Squarespace Cart page with the text βPlease note thatβ¦β added using the instructions below.
The solution is a really straightforward and can be added to any Squarespace website. It only requires a few lines of CSS (thatβs βstyling codeβ to the unfamiliar) that you can add to the Custom CSS panel of your Squarespace website. If youβre not sure where to find this panel, this guide will help!
/**************************************
Add message to the Cart page
Copyright SF Digital https://sf.digital
Use freely in your Custom CSS but
do NOT re-publish.
**************************************/
#cart .cart-container::after {
content: "Your text here.";
font-size: 14px;
}
#cart .cart-row:last-of-type {
margin-bottom: 17px;
}
When youβve added this to the Custom CSS panel, save your changes, and then refresh your website by pressing Cmd-R (Mac) or F5 (Windows). The message wonβt appear on an empty checkout so, if you havenβt already done so, add at least one product to your cart before viewing it!
If youβd prefer the text to be shown below the Checkout button, you can do this with the following CSS instead. However, Iβd always recommend adding it above this button because users wonβt always scroll past this button, especially on mobile devices, so may miss your message entirely!
/**************************************
Add message to the Cart page
Copyright SF Digital https://sf.digital
Use freely in your Custom CSS but
do NOT re-publish.
**************************************/
#cart #sqs-cart-root::after {
content: "Your text here.";
font-size: 14px;
}
#cart #sqs-cart-container {
margin-bottom: 17px;
}
Did this help?
Next steps
I donβt provide support for the free plugins on this website but Iβm always keen to hear from other Squarespace users. You can message me directly via the Squarespace Forum (if you're a member) or, if you have an idea or a comment, feel free to message me here.
FAQ
Can I right-align a short message?
Yes. Add βfloat: right;β on a new line just below βfont-size: 14px;β and save your changes.
Can a link be added to the message?
No. This was built for simplicity using a CSS-only method. As CSS cannot be used to add a link. For this youβll need a developer to write more complex code using JavaScript.
Read my other free Squarespace guides
