Adding Custom Social Media Share Icons Below Product Prices on Squarespace (Redux Desktop Version only)

November 27, 2024 NoarusRainbowLand

Exclusive Tutorial: Adding Custom Social Media Share Icons Below Product Prices on Squarespace (Redux)

Welcome back to our paid blog series! This is the second installment of our journey to adding custom social media share icons to Squarespace product pages. If you’ve followed the first tutorial, you might have encountered an issue where Squarespace’s newer templates or unexpected updates caused your customizations to disappear. Don’t worry—we’ve got you covered with an updated approach that works flawlessly!

In this tutorial, we’ll walk you through a completely new method to add beautifully styled share icons below the product price. This guide builds on what we learned before, so if you’re new, this is the perfect place to start!

What Happened to the First Method?

As Squarespace continues updating its platform, certain templates can lose customizations or stop supporting previously added code. In our case, the original approach worked perfectly until a sudden template update caused:

• Loss of customizations on product pages.

• Social buttons becoming hidden or misaligned.

This updated tutorial resolves these issues by using a more robust method to ensure your customizations persist through future changes.

Step 1: Inspect Your Product Page

Before adding the code, you need to determine where to insert the social icons. Follow these steps to locate the product price container:

1. Open a Product Page:

• Navigate to a product page on your site.

2. Inspect the Product Price:

• Right-click the price and select Inspect (or Inspect Element, depending on your browser).

• You’ll see the HTML structure for the price container. Look for something like this:

€43.76

</div>

3. Take Note of the Class Name:

• In this example, the container is .pdp-details-price. We’ll use this to target the price section in our JavaScript.

Step 2: Add Social Icons Using JavaScript

Now, let’s create the share buttons and dynamically insert them below the price.

1. Go to Settings > Advanced > Code Injection > Footer.

2. Paste this code:

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

const shareButtonsHTML = `

</a>

</a>

</a>

</a>

</a>

</a>

</div>

// Locate the product price and insert the buttons below it

const productPrice = document.querySelector(".pdp-details-price");

if (productPrice) {

productPrice.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 product 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>

Step 3: Style the Social Icons

To make the icons visually appealing, add this CSS to Design > Custom CSS:

/* Social Icons Container */

.product-share-buttons {

display: flex;

gap: 10px;

justify-content: flex-start;

margin-top: 15px;

}

/* General Icon Styling */

.share-icon {

display: inline-flex;

justify-content: center;

align-items: center;

width: 40px;

height: 40px;

border-radius: 8px;

font-size: 20px;

color: #333;

background-color: #f0f0f0;

text-decoration: none;

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

border: 1px solid #e0e0e0;

}

.share-icon:hover {

background-color: #dcdcdc;

transform: scale(1.1);

}

/* Facebook */

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

.share-icon.facebook:hover { background-color: #e6eaf4; }

/* Twitter */

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

.share-icon.twitter:hover { background-color: #d9effc; }

/* Pinterest */

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

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

/* LinkedIn */

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

.share-icon.linkedin:hover { background-color: #e0f4fc; }

/* Tumblr */

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

.share-icon.tumblr:hover { background-color: #e6e8ee; }

/* Instagram */

.share-icon.instagram {

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

}

.share-icon.instagram:hover {

filter: brightness(1.2);

transform: scale(1.1);

}

Step 4: Test Your Customization

1. Save all changes and refresh your product page.

2. Confirm the social icons appear below the product price.

3. Test each button to ensure the correct sharing dialog opens.

Why Subscribe to Our Blog?

This tutorial is part of our exclusive series designed to help Squarespace users customize their websites. By subscribing for just €35/year, you’ll gain access to:

• Step-by-step coding guides for advanced customizations.

• Solutions to common Squarespace limitations.

• Time-saving tips and tricks to make your site stand out.

This tutorial is a follow-up to our earlier guide on social icons. If your template changes again or more updates roll out, we’ll be here to provide the next solution!

Final Thoughts

Adding social media share icons to your Squarespace product pages is a game-changer for boosting engagement and driving traffic. This updated method ensures your customizations remain intact even as templates evolve.

Got questions or feedback? Let us know in the comments! And if you haven’t already, subscribe today to unlock all our premium content. 🚀

This content is exclusive to our paid members. Please respect copyright laws and refrain from copying or sharing this material.