Talk 7: How to Add Custom Social Media Share Icons Below Product Prices on Squarespace (Works for Desktop Only)
How to Add Custom Social Media Share Icons on Squarespace Product Pages
Adding custom social media share icons to your product pages can make a huge difference in visibility and engagement. However, Squarespace’s built-in templates don’t always offer this level of customization. The good news? It’s entirely possible with a few clever adjustments.
In this post, I’ll share an overview of how you can add custom social media icons below your product price, and I’ll show you how to prepare your site for customization without diving too deep into the code. For the full, step-by-step instructions (with code included), check out the paid version of this blog, available for just €35/year. 🚀
Why Add Social Media Icons to Product Pages?
1. Encourage Sharing: Social buttons make it easy for customers to share your products on Facebook, Instagram, Pinterest, and more.
2. Boost Visibility: Sharing your product pages can increase traffic and drive sales.
3. Stand Out: Custom buttons give your site a unique and professional touch.
Getting Started
Before jumping into customization, you need to identify where on your product pages the social icons will be placed. The most common location is below the product price, as it ensures high visibility for users.
Here’s how you can start:
1. Inspect Your Page Elements
To determine where to place the icons, use Google Chrome’s Inspect tool:
1. Open a product page on your site.
2. Right-click on the product price and select Inspect (or Inspect Element).
3. In the developer tools, look for the container holding the product price. It may look something like this:
<div class="pdp-details-price">
<div class="product-price">
€43.76
</div>
</div>
4. Make a note of the class name (e.g., .pdp-details-price), as this will be used to target the element in the code.
What You’ll Need
To add the social buttons, you’ll need to:
1. Write a small piece of JavaScript to dynamically insert the icons below the price.
2. Use CSS to style the buttons so they match your site’s branding.
3. Add the Font Awesome library to load social media logos.
Want the Full Tutorial?
The full tutorial includes:
• Step-by-step code implementation for adding the buttons.
• Custom styling tips to create light backgrounds, hover effects, and animations.
• Guidance on how to ensure the icons work seamlessly on all devices.
• Advanced tricks like matching the buttons to their platform’s brand colors.
Access the complete guide in our paid blog for just €35/year, along with exclusive tips, tricks, and bundles for Squarespace users.
Why Subscribe?
Our paid blog is packed with detailed tutorials, advanced coding tips, and time-saving solutions tailored for Squarespace users. From troubleshooting common issues to adding unique features, you’ll find everything you need to take your site to the next level.
Final Thoughts
Adding social media share buttons to your Squarespace product pages is one of the best ways to boost engagement and make your site more interactive. Ready to get started? Visit the paid blog for the full guide and unlock the potential of your website today!
