Use CSS to make any custom designs in Square Online (2022)
There’s no custom CSS -field like with Squarespace and no code access like you have with Shopify. But where there's a will there's a way.
Update 14 Jan 2024
We do not offer Square Online customisations for projects under US$1000. For small fixes you can try UpWork or similar freelance marketplaces.
Update 14 Nov 2022.
I recommend getting a free server from Amazon. Hosting a CSS file there. And using this script to add it to Square
<script> document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" href="https://example.com/squareup.css">`); </script>After setting it up you have complete control over all the styles in Square.
Original post
So, you’ve created a website with Square, but you’d like to make some design changes beyond the regular settings. Maybe you know a little bit of CSS, the styling language of the web. But, there’s currently no place to add the CSS code.
Even if you try to add a <style> tag to the Add custom header code -field, you’ll see this error
Damn! So close. I wonder why Square / Weebly decided to block Custom CSS? For me CSS is a must-have feature and I’d think twice before committing to a platform that does not allow it.
But there’s a nice little workaround to get those custom styles. I’m not sure if Square likes custom CSS being added this way, but if you make a small design change like adding some extra padding to a logo or making the mobile layout a work a bit better, I don’t see a problem.
How to add custom CSS to Square Online (Weebly)?
The way to add the CSS is by using javascript to write a <style> tag to the header like this. Code goes to Settings => Tracking Tools => Add custom header code.
Here' are the official instructions for custom code.
To write, edit & test your code before adding it I recommend a CSS chrome plugin like User CSS.
Example use case #1 — Add images to modifiers in Square Online
Need help with CSS or styling Square / Weebly?
If you want to hire a pro to make any custom design changes to your Square Online site, hit me up at @hire. With 10+ years in web design & dev I’m able to code pretty much any custom design imaginable.
Quick edits are relatively cheap and can be often be done within the same day you get in touch. Hourly rate is $120. Customisations start at $240.