Social media sharing on product page theme dawn

MiaIshaaq
Tourist
3 0 1

Hi there,

i am using a Dawn theme and i am having problems adding social share buttons to my product page.

The 3 buttons i need are facebook, instagram and tiktok. I can't seem to find any information online.

I have managed to add social sharing but the icons are completely wrong colour and also wrong social media. I need the icons to be official icons, same size i already have on my website. My website link is www.miaishaaq.co.uk

 

This is the code i have inserted into the main-product.liquid. I am not an expert and have no idea how to change the code to my needs. Thank you in advance.

 

<ul class="social-sharing">
<li>
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: product.url }}" class="btn--share share-facebook">
{%- render 'icon-facebook' -%}
<span class="share-title" aria-hidden="true">facebook</span>
<span class="visually-hidden">facebook</span>
</a>
</li>
<li>
<a target="_blank" href="//twitter.com/share?text={{ product.title | url_param_escape }}&amp;url={{ shop.url | append: product.url }}" class="btn--share share-twitter">
{%- render 'icon-twitter' -%}
<span class="share-title" aria-hidden="true">twitter</span>
<span class="visually-hidden">twitter</span>
</a>
</li>
<li>
<a target="_blank" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: product.url }}&amp;media={{ product | img_url: '1024x1024' }}&amp;description={{ product.title | url_param_escape }}" class="btn--share share-pinterest">
{%- render 'icon-pinterest' -%}
<span class="share-title" aria-hidden="true">pinterest</span>
<span class="visually-hidden">pinterest</span>
</a>
</li>
</ul>
<style>
.btn--share .icon { width: 24px; color: #DB2763;}
.social-sharing {list-style-type: none; padding: 0px 4px; margin: 8px 0;}
.social-sharing li {display: inline-block; padding-right: 16px;}
.share-title {display: none;}
</style>

Reply 1 (1)

gr_trading
Shopify Partner
1687 141 174

Hi @MiaIshaaq ,

 

Instead of fixing your code my request would be to download the code provided in below video and follow the instruction to implement the same.

 

 

Let me know if it helps...

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee