How to Add Custom Social Share Buttons to Squarespace Product Pages (Without Plugins Desktop Version)

November 24, 2024 NoarusRainbowLand

Squarespace is one of the best platforms for creating a sleek and professional website. However, it’s no secret that the newest version of Squarespace lacks built-in social share buttons on product pages. While Squarespace is great at many things, this omission leaves many store owners frustrated—forcing them to look for costly plugins, sketchy third-party software, or overly complicated solutions.

But not anymore. 🙌

In this post, I’m sharing how I overcame this issue with custom HTML, CSS, and JavaScript, creating a solution that dynamically adds beautiful share buttons to product pages—exactly where they belong! And yes, this works without breaking your footer or adding unwanted duplicates anywhere else.

Why Social Share Buttons Matter

Social share buttons may seem like a minor detail, but they can have a huge impact on your business:

• Boost Traffic: Every share is a chance to bring more visitors to your site.

• Increase Engagement: Make it easy for your customers to share their favorite products with friends.

• Elevate Your Brand: Custom buttons add a professional and cohesive touch to your website’s design.

How I Did It: A Step-by-Step Guide

This guide walks you through everything you need to do—no plugins, no external tools, just a clean, reliable solution for adding social share buttons to your Squarespace product pages.

Step 1: Add Custom JavaScript

The first step is to write a script that dynamically injects social share buttons directly below product titles on product pages.

Here’s How to Do It:

1. Log in to Squarespace and navigate to Settings > Advanced > Code Injection > Footer.

2. Paste the following JavaScript into the Footer Code Injection box:

document.addEventListener("DOMContentLoaded", function () {

// Check if the current page is a product page

if (document.body.classList.contains("collection-type-products")) {

const shareButtonsHTML = `

</a>

</a>

</a>

</a>

</a>

</a>

</div>

// Append buttons ONLY below product titles inside product containers

const productContainers = document.querySelectorAll(".ProductItem");

productContainers.forEach(function (productContainer) {

const productTitle = productContainer.querySelector(".ProductItem-details-title");

if (productTitle) {

productTitle.insertAdjacentHTML("afterend", shareButtonsHTML);

}

});

// Sharing Functions

const currentURL = encodeURIComponent(window.location.href);

window.shareOnFacebook = function () {

window.open(`https://www.facebook.com/sharer/sharer.php?u=${currentURL}`, '_blank');

};

window.shareOnTwitter = function () {

window.open(`https://twitter.com/intent/tweet?url=${currentURL}`, '_blank');

};

window.shareOnPinterest = function () {

const imageURL = encodeURIComponent("YOUR_IMAGE_URL"); // Replace with your image URL

window.open(`https://pinterest.com/pin/create/button/?url=${currentURL}&media=${imageURL}`, '_blank');

};

window.shareOnLinkedIn = function () {

window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${currentURL}`, '_blank');

};

window.shareOnTumblr = function () {

window.open(`https://www.tumblr.com/widgets/share/tool?canonicalUrl=${currentURL}`, '_blank');

};

}

});

</script>

Note: Replace YOUR_IMAGE_URL with the URL of a product image to enable Pinterest sharing.

Step 2: Style the Buttons with CSS

Now that the buttons are appearing on product pages, let’s style them to look sleek and professional.

Here’s How to Do It:

1. Go to Design > Custom CSS.

2. Paste the following CSS:

.product-share-buttons {

display: flex;

gap: 10px;

margin-top: 15px;

justify-content: flex-start;

}

.share-icon {

display: inline-flex;

justify-content: center;

align-items: center;

width: 40px;

height: 40px;

border-radius: 8px;

background-color: #f0f0f0;

color: white;

font-size: 18px;

text-decoration: none;

transition: transform 0.2s ease, background-color 0.3s ease;

}

.share-icon.facebook { background-color: #3b5998; }

.share-icon.twitter { background-color: #1da1f2; }

.share-icon.pinterest { background-color: #bd081c; }

.share-icon.linkedin { background-color: #0077b5; }

.share-icon.tumblr { background-color: #35465c; }

.share-icon.instagram {

background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

}

.share-icon:hover {

transform: scale(1.1);

}

Step 3: Load Font Awesome for Icons

The social media icons are powered by Font Awesome, so you’ll need to load it.

1. Navigate to Settings > Advanced > Code Injection > Header.

2. Add this line:

Step 4: Test Your Changes

1. Visit a product page and ensure the buttons appear directly below the product title.

2. Check non-product pages to confirm no rogue buttons are appearing.

3. Test responsiveness on mobile, tablet, and desktop devices.

What Makes This Solution Unique?

• No Plugins: No need for third-party software that could slow down your site.

• Full Control: Customize the buttons to match your branding.

• Problem Solved: Finally, a reliable way to add share buttons to Squarespace product pages without breaking the footer!

Get More Exclusive Tips

If you found this guide helpful, don’t forget to subscribe to my exclusive paid blog for €35/year. I share tips, tutorials, and templates to help you get the most out of your website—no gimmicks, just solutions! 🌟