Adding custom CSS to a Weebly Powered Square Online Store

In years past, Square’s online store product left much to be desired. So, I was excited when they acquired a full-featured website builder in Weebly. As new features are added, month by month, to the fruit of that acquisition, their Weebly Powered Square Online Store e-commerce product (which is still free for Square merchants, BTW), their online store product is finally starting to fit better alongside Square’s POS and payment products. Square POS remains best-in-class, and I recommend it wholeheartedly to SMB merchants.

That said, there are still some missing pieces in the new Weebly/Square Online stores, including one of my favorites: the ability to add custom CSS. There doesn’t appear to be any way to customize the theme at all yet, other than some basic font and color controls in the editor. However, I recently stumped on a way to add custom CSS, whether they like it or not.

You may be aware that there’s an Integrations section in the Site Settings for Google Analytics, Facebook Pixels, tracking codes, and other stuff. However, if you’re anything like me, you may have never noticed that there’s also “Custom header code” section at the bottom. You can paste code into this area, but the only kinds of tags that you can use are <script>, <noscript>, and <meta>. While they explicitly don’t allow you insert internal CSS wrapped in <style> tags in this part of the interface (which is an absurd, neh, draconian limitation on Square/Weebly’s part, it turns out you still add CSS. The aha moment, and the trick here, came when when I found that one can write CSS into the header using Javascript.

<script>
/* specify our style rules in a string */
var cssRules = '.w-sitelogo img { width: 200px !important; }';

/* create the style element */
var styleElement = document.createElement('style');

/* add style rules to the style element */
styleElement.appendChild(document.createTextNode(cssRules));

/* attach the style element to the document head */
document.getElementsByTagName('head')[1].appendChild(styleElement);
</script>

Copy and paste the code above, replacing my logo-related CSS with your own code in the var cssRules = line. Don't forget to leave those single quote lines surrounding the CSS in place. Those quote marks are JavaScript speak that says "here is a text string; it's not JavaScript code."

This whole thing started with me banging my head against the computer wishing the Weebly/Square editor gave me more control over the size of and padding around the logo. That's what the CSS code above is doign for me in this case. So, if that's what you Googled to get here, there you are!