Customising the Squarespace Checkout
I receive at least one request every week to “customise” the Squarespace Checkout so I’ve posted this article to help the thousands of Squarespace users searching for the answer to this question. I hope it helps you.
Why can’t I customise the Squarespace Checkout? Why can’t I add code?
In summary, it is to protect payment security. Squarespace take care of ensuring the checkout page remains safe and secure so that you don’t have to. In return, they don’t allow you to make changes to the checkout. If you want to customise fonts, add script or add CSS styling then you’re out of luck. It is not possible.
Why? Because major payment card brands including Visa, MasterCard and American Express created some regulations called the Payment Card Industry Data Security Standard or PCI DSS for short. It’s a set of minimum data security requirements that must be followed by any online page that processes, stores, or transmits credit card data. It’s essential if we are to protect cardholders from online fraud. All checkout pages are required to be “PCI compliant” and must be tested to ensure they are. If any changes are made to a checkout page, it must be re-tested to ensure it remains compliant. This isn’t something you can do for yourself as it is a long, technical and expensive process and this is why you cannot make changes to the checkout.
There’s a secondary reason and that’s to ensure you cannot break it. The checkout page is really complex because it adapts to the type of product being purchased (service or physical, outright purchase or subscription), the language, the country, the currency, the size of the device and whether the browser supports Apple Pay. It would be very easy to break any of these elements but if the checkout didn’t work, your customers would not be able to make purchases and that’s pretty fundamental when it comes to an online store!
What can I customise?
Here's what you can customise:
You can change a few of the checkout styles in Design > Checkout Page. For example the colour of the background, buttons, header, header border and title. You can also decide whether to show the site logo (or title) and choose how the header should be aligned. No other style choices are available.
You can set a country to be preselected for billing and shipping address fields. The setting is in Commerce > Checkout.
You can add a telephone number to the billing address or the shipping address. This setting is in Commerce > Checkout > Additional Fields. It’s important to remember that collecting additional information in checkout may negatively affect conversion rates.
You can add links to your Return Policy, Terms of Service and Privacy Policy that open in a pop-up window. This setting is in Commerce > Checkout > Checkout Page: Store Policies.
You can add a Custom Checkout Form to collect additional information from customers, like gift messages, special delivery instructions, or comments. You can also use it to require customers to agree to a statement. However, the form cannot be used to influence the cost of the order or shipping options.
What cannot be changed?
There are lots of things that cannot be changed on the checkout page, including the following. This list is not exhaustive but it represents the things that I get asked the most!
You cannot add any code. No JavaScript, HTML or CSS.
You cannot bypass payment. The checkout requires at least one payment method via Stripe or PayPal. For an alternative option that bypasses the checkout, see our Wishlist plugin.
You cannot change the font. You must use Squarespace’s own Clarkson font (named after their headquarters at 8 Clarkson Street, NYC) in the size and colour they specified.
You cannot change the wording used on the checkout page. For example, you cannot change “Shipping” to “Delivery” or change “Tax” to “VAT”.
You cannot prompt for dates in non-US formats. Dates on Custom Checkout Forms must be entered in US format (mm/dd/yy).
You cannot remove the requirement for a billing address. Even digital products require a full billing address.
You cannot change the position of a checkout form. If you add a custom form, it will always appear just before the billing information.
You cannot change the way prices are displayed. For example, to show the currency symbol after the numbers or use a comma instead of a decimal point.
You cannot validate addresses or postcodes outside the US.
You cannot make decisions based on information that the customer provides. For example, you cannot change the shipping cost based on their postcode or round up the total with a donation.
You cannot add explanatory messages, for example to describe complex shipping options.
You cannot remove ‘Edit Details’ links or prevent customers changing product quantities on this page.
The initial shipping cost is based on the 'Default Country in Address Fields' that is set in Commerce > Checkout. It isn't possible to prevent the initial shipping cost from being shown on the checkout view before the customer enters their address.
You cannot add a gift-wrapping option unless it is free or included in one of your shipping option descriptions.
Data captured with Custom Checkout Forms is saved with the order information. It cannot be saved elsewhere, such as in a Google sheet.
