Working around Squarespace’s one subscription per cart limit
One of LARO Studio’s most recent web clients, Campo Amado, launched their new site in January 2024 and our amazing client Cristal came to us with the vision of a fairly simple site setup with the main visual focus on full-bleed video and photo backgrounds.
See our portfolio page on Campo Amado here!
The website development didn’t come without its challenges, however! The main challenge on the e-commerce capabilities end was working around the main limitation of Squarespace’s product subscription feature: when a customer subscribes to a product, they can only check out with that singular item. This means that if customers wanted to get multiple coffee bags monthly or order a non-subscription product, they would have to go through multiple checkout processes. Such an odd limitation on Squarespace’s end!
It was super important for Cristal that customers could buy multiple coffee bag subscriptions and one-time purchase coffee bags without the annoying hassle of having to go through the checkout process more than two times.
Luckily, problem-solving is something I consider to be one of my strengths, and Squarespace pulled through with a handful of other features that gave us a perfect solution:
The ability to have multiple shop pages on one Squarespace site
One item pert cart limit for service products
Before we take you through the solution and how to set it up on your website, a few notes:
The solution isn’t totally automated and still involves one additional checkout process, but the requirements for this solution was all discussed with the client to make sure it was something they were willing to take on!
Of course, this is something that could be easily handled in Shopify without as much workaround, but considering Campo Amado’s number of SKUs, content/visual goals, and the fact that Cristal didn’t need all the extra bells and whistles Shopify has, Squarespace still ultimately ended up being the better choice.
We also found this plugin called Subbly that may have been a good solution but ultimately didn’t want to subject Campo Amado to the additional cost of the plugin, especially since we haven’t used it before!
The Solution
The simplified explanation of this solution is this: We created a $0 one-time purchase item with a form that would collect all the information needed about the item(s) each customer wanted to subscribe to; this would be added to their cart along with any one-time purchase items the customer also wanted to buy. Then with this info, the shop admin would set up the customer’s subscription on the backend for recurring payments.
Here’s how we did it!
The process from the shop admin & customer’s POV:
Click on each image to enlarge
01 —
The customer clicks on the subscription button, which will give a pop-up form that allows them to type in how many coffee bags they want to subscribe to, how many of each flavor profile they want, and whether they want whole beans or ground.
02 —
They click on the button, which will add these details to cart. The customer can then continue shopping and add whatever else they like to their cart before checking out.
03 —
After the customer pays for their order, the shop admin will receive all the order info. In this example, the customer wanted to subscribe to 3 bags of coffee at a time (2x French roast, 1x Vienna roast).
The shop admin will then send the customer a link to a subscription product page that will charge them for the price of 3 bags each month.
04 —
Once the customer uses this link to confirm the subscription and pay, this can be treated like any regular subscription process: they’ll be charged automatically and the shop admin will be reminded to send them the 3 bags each month!
The Setup
01 — Subscription shop page setup
Set up a separate shop page on Squarespace — this is where all the subscription products will be, so let’s call this the Subscriptions shop page.
(We just put these on a separate shop page from the other products so the products we put here wouldn’t be listed on the “Shop all” page; if you don’t mind all the subscription products showing up with everything else, you can skip the step of creating this extra shop page and just put it with the others!)
02 — Subscription product setup
Create a new Service Product and name it whatever you want; we named it “Monthly Subscribe and Save”
Edit that product and scroll down to the Checkout section
Use the Custom Button to change the text that appears on the Add to Cart button; in this case, we changed it to “Order Monthly Coffee Subscription(s) To Save 10%”
Enable Custom Forms and create a form that will allow customers to input all the information you need to know about their product subscriptions.
You can do multiple fields, but we wanted to keep it super simple with just one text area field that asked for all the subscription info the shop admin needs (quantity, flavor, grind type)
Make sure it also includes some text indicating what the next steps will be for the customer!
Also make sure you make this field required so you don’t have to chase down the customer for the info you need.
Once you’re done here, save all the edits you made to this product.
03 — Allow only 1 of these to be added to cart
Go to your Checkout Settings (your-squarespace-domain.squarespace.com/config/settings/selling/checkout) and toggle off Quantity for services. This will make it so customers can only add the subscription form/product once, so it’ll be easier for you to process the info they put in! If a customer has to edit their subscription details or add more, they can edit the details in the original form they completed.
04 — Add the subscription button to all the one-time product pages
Go to the edit page for the product whose page you want to add the subscription button to.
Open up the Additional Info panel and add a Product Block.
Connect it with the Monthly Subscribe and Save product, then go into the Design options and disable everything except the Add to Cart Button:
Now the subscription product is on your product page!
But if you want the button to appear directly underneath the one-time product’s Add to Cart button, you’ll need to add this code to your header Code Injection.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--- Move product content to PDP description --------------------------->
<script>
$(document).ready(function() {
$('.ProductItem-additional').insertAfter('.ProductItem-details-checkout');
});
</script>
<!--- END Move product content to PDP description --------------------------->05 — Set up the actual subscription products
Up till now we’ve set up everything for the first part of the customer’s initial purchase process; you now have everything you need for customers to add their subscription info to cart along with any other one-time items they want to buy.
Now onto the next step: setting up the subscriptions.
Back on your Subscriptions shop page, create a new product. Enable subscriptions for this product. Set the price on this one for the price of 1 product subscription and name it something that’ll be helpful to you (in our case, we named it “1 bag per month”)
Make sure the product description is something informative and helpful to the customer!
Note we also enabled the Custom Button option for this to change the default “Add to Cart” text to “Subscribe”
The public-facing link to this product page is what the shop admin will send to the customer so they can confirm their subscription.
This product can be duplicated as many times as you need to suit other quantities of subscription products your customers will buy — just change the prices as needed! (i.e. if a customer wants 3 bags per month, create a new subscription product and change the price so it reflects how much you need to charge for 3 bags; then send that product link to the customer)
And you’re done!
A few other aesthetic things —
These aren’t totally necessary for the functionality, but they’re a few other details that I felt were good to pay attention to.
Remove breadcrumbs on the Subscription shop page
This helps prevent customers from finding the other subscription product pages when you send them the link to theirs.
Add a product image to your subscription products
This will show up in the cart page, checkout page, and the order confirmation email.
This workaround shows how us web designers/devs can potentially use combinations of Squarespace’s various functionalities to ultimately come to a solution for customer flow. In an ideal world Squarespace has enough features so we won’t have to work around limitations so much, but I feel like their team has really been stepping it up with a lot of updates recently! Hopefully this one subscription limitation is something they address soon too.
If you’re a fellow Squarespace-r and know of a better solution to this, I’d be happy to hear about it!
Shop coffee from Campo Amado at campoamado.com.
And if you want to work with us for web design/development or more, reach out!