Dawn 2.0 Theme - Social Sharing on Product Pages

[JasonBoyd]

I have done some searching and it seems that Dawn 2.0 removed the social sharing buttons that some other themes had. Is there any way to add this back?

What I am looking for is this:

Right now all my product page shows is the share block.

I have also found this code for the social sharing but I am unsure how to change the code href’s to be dynamic to whatever the current product is.

            
              
      
      Share
      Share on Facebook
    
      
      Tweet
      Tweet on Twitter
    
      
      Pin it
      Pin on Pinterest
    

            
          

Note: some code amended for simplicity. HREF changed to MyProduct as I want that to be dynamic, but not sure the code to be used.

Website is www.littleshopofcuriosity.ca password is ‘curious’

Thank you,

[KetanKumar]

@JasonBoyd

oh sorry for that issue but our store doesn’t work how can i check

[JasonBoyd]

Sorry, seems my DNS needs to get fixed, for now you can access the page through

www.littleshopofcuriosity.myshopify.com

store password is ‘curious’

[BSS-Commerce]

Hi @JasonBoyd

This is the code to share the product in each product. The window.location.href will get the URL of the product page with the corresponding product.

  [
    
    Share
    Share on Facebook
  ](https://www.facebook.com/sharer/sharer.php?u=)
  [
    
    Tweet
    Tweet on Twitter
  ](http://www.twitter.com/share?url=)
  [
    
    Pin it
    Pin on Pinterest
  ](http://pinterest.com/pin/create/button/?url=)

I hope that this can help you

[JasonBoyd]

@BSS-Commerce Thank you, which file do I put the code into?

[BSS-Commerce]

Hi @JasonBoyd

Because this code is used to share the product, it should be placed in the main-product.liquid file:

[JasonBoyd]

• @BSS-Commerce Thank you. I wasn’t able to figure out where to put it exactly in main-product.liquid. I ended up replacing the code within share-button.liquid instead.

I also had to change the code a bit as the icons were not rendering.

  - {%- render 'icon-facebook' -%}
        Share
        Share on Facebook
    
  

  - {%- render 'icon-twitter' -%}
        Tweet
        Tweet on Twitter
    
  

  - {%- render 'icon-pinterest' -%}
        Pin It
        Pin on Pinterest
    
  

But now I am left with this:

and I am unsure the css needed or code change required to have it look like this:

Not worried about the slight difference in icons, just don’t know how to position them and space them, while also removing the link underlines and the link colouring.

[BSS-Commerce]

Hi @JasonBoyd

Find the file base.css and add the following code at the end of the file:

.btn--share {
	color: black;
	text-decoration: none;
	margin: 0px 16px;
	display: flex;
	align-items: center;
}

.btn--share svg.icon {
	margin-right: 8px;
}

Please let us know if it works for you by giving us likes or marking it as a solution.

[JasonBoyd]

Thank you, that worked! Appreciate all of the help.

[Glad2bee]

Thank you! works perfectly.

[dreamtechzone_5]

Hello BSS-Commerce!

I am using shopify inspired theme. How can I add a social share icon? I have added an image. I want to keep the social share icon exactly like this image. Is it possible? Please help me. Thank you.
URL: https://blue-chic-clothes.myshopify.com/products/sexy-women-one-shoulder-long-sleeve-jumpsuit
Password: Admin

Now

I want