5 Custom Codes for your Squarespace Store
Hello there, Squarespace whiz! Looking to spruce up your Squarespace E-Commerce Store? Perfect.
In this guide, I delve into five popular codes related to the E-Commerce side of Squarespace.
#1: Hide Cart Icon When Empty (0:21)
Ever felt like that empty cart icon is just hanging around your store like an unwanted ghost? With a tiny bit of CSS, we can hide your cart icon whenever it is empty.
Simply copy and paste this code into your site’s Custom CSS.
/* REBECCA GRACE DESIGNS */
/* Hide Cart Icon When Empty*/
.header-actions-action--cart .cart-quantity-zero {
display: none;
}#2: Change the Words “Shopping Cart” on Cart Page (2:19)
Currently, there is no way to edit the Cart Page in Squarespace. As a standard setup, it has the title “Shopping Cart” and then lists the items in the cart along with a button that says “Continue Shopping” or “Checkout” depending if your visitor has items in their cart.
By changing these words, you can add a dash of personality to your cart page and make it a little more on brand.
Here's How:
Copy and paste the CSS Below into your site’s custom CSS. Then get creative and replace YOUR WORDS HERE with your attention-grabbing phrase! Make sure you leave quotation marks.
/* REBECCA GRACE DESIGNS */
/* Shopping Cart Page */
.cart-title {
visibility: hidden;
}
.cart-title:before {
visibility: visible;
content: "YOUR WORDS HERE";
}#3: Edit the Checkout Button on the Cart Page (3:47)
Similarly, you may want to customize the checkout button on the cart page. This code will allow you to customize the button color and font color.
/* REBECCA GRACE DESIGNS */
/* Shopping Cart Checkout Button */
.cart-checkout-button {
background-color: red !important; // background-color
color: white !important; // font-color
}#4: Products Side by Side on Mobile (4:53)
Bothered by the single-column view of products on mobile? Why not jazz things up by setting your products side by side? By integrating this code to your Custom CSS section, your products will now strut their stuff side by side—providing customers a broader view of all your products at a glance!
Copy and paste the following code into your site’s Custom CSS. If your products are still in one column on mobile, try making the width a little smaller to accomodate your product images.
/* REBECCA GRACE DESIGNS */
/* Products Side by Side on Mobile */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex !important;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 46%;
}
}#5: Redirect to a Thank You Page After Purchase (6:46)
Whether you want to provide a custom “Thank You” message, give more instructions about their next steps, or encourage them to sign up for a mailing list, a custom “Thank You” page can be a great way to boost your customer’s experience.
With a little coding magic, we can redirect your customers from the Order Confirmation page to a custom Thank You page after they make a purchase. A couple things to note:
You cannot have different Thank You pages for different products. This code redirects customers from the Order Confirmation page to a page of your choice. There is no way to differentiate between products, so there is no way to redirect to different pages based on which product they purchased. All customers will be redirected to the same Thank You page.
Your customers will be redirected from the Order Confirmation Page. Make sure your have your customer notifcations set up so that they can still receive this information to their email.
Here’s How to Set up the Redirect:
Create a custom Thank You page in the Not Linked Section of your Squarespace Website. Be sure to make a note of the URL of this page.
Go to Website, then click on Website Tools, then click on Code Injection and scroll down to Order Confirmation Page.
Copy and paste the code below into the Order Confirmation Page box.
Change the 10 to match the number of seconds you would like the redirect to happen after.
Change the /PAGEURLHERE to match the page URL of your custom Thank You Page.
<!-- REBECCA GRACE DESIGNS --> <!-- Redirect to Thank You Page After Purchase --> <meta http-equiv="refresh" content="10;URL='/PAGEURLHERE'" />
