How can I enable social media icons in the Dawn theme for product sharing?

leanneinnovate
Visitor
3 0 3

Hi everyone,

 

I'm a VBA developer, so have been trying to figure my way around liquid.  I am using the Dawn Theme, and when I enable sharing on my page it just gives me a generic up arrow and the word "Share".  And then the form that comes up is weird - no customers are going to use that!

 

How do I get the actual social media icons so when someone wants to share a product to Facebook they see the facebook icon, click it, and it sends the info to their facebook page?  There is no option in this theme to enable social sharing - all I can do is put my facebook URL in.

 

Can anyone help?  This is frustrating.  And I don't want to change my theme cos I've done a fair amount of customisation already!

 

Thanks,

Leanne

Replies 8 (8)

LitExtension
Shopify Partner
4860 1001 1135

Hi @leanneinnovate,

Please go to main-product.liquid file, find 'share-button' and change code:

<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>

 Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
leanneinnovate
Visitor
3 0 3

Hello @LitExtension,

 

Yes, that's getting there!  Thank you!  However, the icons are huge?  Any idea why that is the case?  Is it not possible to just have small icons, next to each other, like you'd normally see on a product?  This one also has bullets and the website names, which I don't particularly want either...  I can probably figure out the spacing and the bullets, but the icons are a mystery to me...  See screenshot below:

 

leanneinnovate_0-1644242694525.png

 

LitExtension
Shopify Partner
4860 1001 1135

Hi, @leanneinnovate,

Please send your site and if your site is password protected, please send me the password. I will check it.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Griffin-SC
Tourist
6 0 4

Did you ever get this corrected? I'm working on the same issue and would love to shrink these icons down.

HelloHai
Visitor
2 0 1

Hi - I added this CSS to my theme. You can add it right where you add the code from LitExtention 

<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>

 

Just change the color to match your theme. The one here just matches what I used at www.journalxo.co 

Jewelry3dStudio
Visitor
2 0 0

Thank you

Pierre Tuffenkjian
Jewelry3dStudio
Visitor
2 0 0

Thank you

Pierre Tuffenkjian

gr_trading
Shopify Partner
1669 141 173

Hi @leanneinnovate ,

 

Request you to refer the below video to implement the same.

 

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