Squarespace is gaining popularity quickly these days, and by no surprise. It’s sleek design, incredible user-friendly interface, and straight-forward approach to web design is irresistible. Some complain that Squarespace is too limited in what it can do when it comes to integrations and customization. I beg to differ. At first glance, some things seem limiting, but the more I’m designing on different templates for different clients (and for my own site that you’re enjoying right this minute!), the more I’m enjoying the challenge of making specific layouts and actions come to life.
Today, I’m sharing with you my 3 favorite Squarespace workarounds, and boy are these good. So good, I named them...
The Free Download Funnel
The Free Download Funnel (my given name, of course) was a sneaky little workaround I discovered thanks to my friend Mariah over at Femtrepreneur. I'm not sure if she figured it out herself or learned it from another Squarespace fanatic, but either way, thanks Mariah!
The problem:
You want to give away a free product in exchange for an email address (as you’ve probably seen me do here). This is great feature to add to blog posts to help grow your list (some people call them content upgrades – genius!), or a general lead magnet or opt-in incentive. But doing that via a product block in Squarespace is not an option. The commerce settings require you to put in a price. According to the shop, there’s not such thing as free. Womp womp. But what about the newsletter block, you ask? True, you could collect an email address via the newsletter block and deliver a free product via email. But here’s the catch: the design and styling of the newsletter block is uniform across your entire site. Not much chance of customization there without some extra coding, which is not my thing.
The solution:
Have no fear, the Free Download Funnel is here . . . and it’s all about the form block! The form block is crazy versatile! Obviously forms are used to collect information, and they can be a second option to collect email addresses for a specific purpose, like a free download. Cha-ching! Or I guess, no cha-ching because it’s free, but you get the idea.
Here’s how you do it.
Add a form block to your page, and delete every collection item except the email address, and maybe the name if that’s important to you to have. The default includes Name, Email, Subject, and Message. Squarespace thinks you’re probably using the form block for a good ‘ol contact form – but sneaky sneaky, we’re pulling a workaround. If you want to keep your signup form super basic, you can delete the text for the label and only type the label into the display text for the form field (see left image below). One less line of text to keep your form ultra simple. (Look to your left – this is what I did for the sidebar of this very blog.) To deliver the freebie, click over to the Advanced tab, and include a text link in the thank you message that lets the subscriber download a file rather than navigate to a page (see middle image below). To do that, highlight your text, click the link icon in the formatting toolbar, then select File, and either upload a new file or choose from an existing file (Squarespace saves all your files uploaded from other form on your site – thanks Squarespace!).
Another great feature that some may have missed out on due to scrolling (seriously, how many things have you not noticed because you just didn’t scroll down far enough to see them?! Does that just happen to me?), is the light box option. The light box option lets you hide the entire form, and only show a button with a call to action (see right image below). Once the button is clicked, the form opens in a new window, all nice and contained. So clean, and so sleek!
Quick disclaimer: I would note that when delivering a free file in the thank you message, you could potentially lose the subscriber if you’re storage option is MailChimp. Because MailChimp uses a two-step verification method, the new subscriber has to confirm their subscription via email before being officially added to your list. Technically, they could download the free stuff, then delete the confirmation email, and never officially be subscribed to your list. Even if they do this, you made them do one of the two steps, so maybe next time they’ll end up doing both :) It was free anyway, right? Glass half full?
The Pre-Order Fake Out
A few months ago, I launched some new notepads for my shop. I planned to sell them first as pre-orders to gauge interest, but I had never done this before. I wanted to build some buzz around the pre-order launch too, and let customers know they were coming, whether they followed me on social media or not.
The problem:
Another restriction in the commerce section of Squarespace, is you can’t show products that aren’t for sale. The only way you can do this, is to set the inventory quantity to zero, and then a “Sold Out” badge will appear over the product thumbnail, and customers won’t be able to add the product to their carts. Unfortunately, there’s not option to change this text to “Pre-order” or “Coming Soon” or something like that. It's been rumored that this option is coming soon, but not quite yet. But don’t worry, this workaround is probably my favorite (and most sneakiest…is that a word?).
The solution:
To work around this restriction, I figured out a way to list these products on my general shop index page (you still can’t click them to read more info unfortunately, but you can at least show that there are new products coming).
A couple disclaimers here first: For this workaround, you will need a program like Photoshop to make it work. Also, it may depend on what template you’re using whether this will work or not. I’m using Avenue, and I image ones like Galapagos or Montauk would work fine too. And lastly, this workaround is not mobile-friendly or responsive, so customers viewing on a tablet or phone will have you busted, but they’ll still be able to see your pre-order products, so not all is lost ;)
Ok, here’s what I did.
Take a screenshot of a row of products in your existing shop, just as the customer sees it. Try to get it as close to the thumbnail edges as possible. Pull that screenshot into Photoshop and set up guides around the thumbnails. Then comes the fun part… create your own thumbnail images over the existing ones (I used my product image, with a transparent black overlay, and pre-order dates + product name on top of that).
Save this 4-up (or however many product thumbnails you have on a row) as a JPG, and then jump back in to Squarespace. Here you’ll edit the content of your footer on your shop page. I added a divider line and a header, then drop in your Pre-Order Fake Out as one long image and voila. Fake out accomplished! Obviously, you can’t click the images, and again, they’re not responsive since it’s all one image, BUT the idea of showing your customers that these pre-orders are on their way, is a great way to build some momentum before you launch the sale. You could also create each of these images individually and drop them in with the image block, and that would allow them to be responsive. See?! A workaround for a workaround. So great. Here's what the final product looks like:
The Free Guide Look-Alike
This fun workaround was one I noticed on the lovely Jennypurr blog a few weeks ago. Which, P.S., if you don't keep up with her blog, you need to be! Ok, back to this stuff . . . She has a great step-by-step guide on how to migrate your existing blog to Squarespace, and set it up as a guided-tour of sorts through pages on her website. I thought it was genius, and would love to implement this myself someday!
This is less of a problem / solution workaround, and more of an awesome / genius way of creating a step-by-step guide or course, hosted right on your website. The catch is it has to be free, since Squarespace doesn’t offer password protection using individual passwords or memberships (you can only setup one universal password as of now). But this will work great for any type of in-depth, free, step-by-step resource that you want your readers to consume immediately. Here’s how it works:
1. Create a new unlinked page on your Squarespace site for each step in your guide, plus an extra for a welcome page.
2. Set up your Welcome page to include a title and short summary of the guide.
Then you could either show a thumbnail for all of the steps in your guide like a grid, like Jen did, or you could just show step one, forcing your reader to go in order. This could either make them want to click through each step to see what you cover, OR all the clicking could give them carpal tunnel and they’ll never return to your blog. Hopefully it’s the former ;) Here's an example of Jen's welcome page:
3. Then create a new page for each step with your content and images.
Keep these simple, it’s a free guide so don’t spend too much time getting hung up on layout details. Jen does a great job of showing a main banner image to show the step you’re on, a few paragraphs with clear headers for the content, and some easy-to-follow tutorial-style images. Here's an example of one of her step pages:
4. Connect all your steps together with links.
At the end of each step, you can insert an image that links to the page for the next step in the guide. Jen includes some text that introduces the next step, and you could even include an extra image that links back to the previous step, if you wanted to be extra thorough. It also can be a good idea to set these links to open in new windows, so they can refer back to previous steps easily. But if your guide has more than just a few steps, this could turn into tab-city and be a turn-off to your reader.
5. The last step of the guide is your chance to give your reader another call to action.
You could either invite them to follow you on social media, with a quick line of text (like Jen did). You could also include another image that links to an “exit page” with any other info you want to share. Maybe this free guide is a lead-in to a larger paid-for course that you offer – you could invite them to sign up on the exit page. Or maybe the next logical step is for your reader to go to your blog or your shop, so you could include images with links to those. You could even include a link to start over and head back to Step One if they want to walk through it again. Get creative and think about what your reader would need / want to do at this point — then make it easy for them to do it! Here's how Jen closes out her free guide:
This is a unique strategy for delivering and organizing a step-by-step guide or mini-course, and you could adjust it in a lot of ways to fit your content and your Squarespace template.
If you hit roadblocks with the limitations of Squarespace, get creative! Find new ways to make your site unique and different than everyone else using your template. Push the limits, try new things, think outside the box. Template does have to mean stale. Squarespace is a powerful platform, and can be completely customized to fit the information you want to share with your readers and customers.
Learn how to earn passive income with a digital product
If you’re curious about incorporating a digital product passive income stream, check out my free email course, The Digital Product Roadmap. This free daily email series walks you through the 8 checkpoints for driving your digital product from idea to launch, and includes resources + action steps for each checkpoint. Signup and we’ll get started this week!
Your turn
I absolutely love seeing how other Squarespace users are thinking outside the box with their layouts and organization of their site. What are some of your favorite workarounds?
