Customize Social media buttons

Solved
Excursionist
23 1 3

Hi all,

I'm using Brooklyn theme but i assume it might be similar in other themes.

i would like to use different icons for the social media share buttons.

 

I think this is the relevant piece of code that should be changed:

 

snippets -> social-sharing.liquid file:

{% if settings.share_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="share-facebook" title="{{ 'general.social.alt_text.share_on_facebook' | t }}">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
</a>
{% endif %}

 

I would like to use different icons, I will upload the new icon images to my Assets folder,

I just need to know what to replace in the code so it will use the new icons images that I upload(for example new_facebook_icon.png).

I assume something should be changed in this line:

<span class="icon icon-facebook" aria-hidden="true"></span> 

 

any help is appreciated.

0 Likes
Highlighted

Success.

Excursionist
23 1 3

I figured it out.

below is the relevant piece of code to replace in snippets -> social-sharing.liquid

1. upload your new icons under settings -> files . you can get official HD icons by googling "Facebook assets logo" , replace 'Facebook' with WhatsApp or Pinterest.

2. I removed the "words" between the icons. you can keep them by removing the comment/endcomment on the relevant lines

3. I replaced Tweeter with WhatsApp

4. you should change the name in Green to match the name of the file you uploaded in every relevant line, you can control the size of the icon by changing the numbers in Red in every relevant line (shouldn't be more than 30).

5. this changes the social media icons on the product page, to change in the footer of the home page make similar changes in your Footer file

 

{% if settings.share_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="share-facebook" title="{{ 'general.social.alt_text.share_on_facebook' | t }}">
{% comment %}<span class="icon icon-facebook" aria-hidden="true"></span>{% endcomment %}
<img src='{{ 'f-ogo_RGB_HEX-58_3.png' | file_img_url: '24x24' }}' alt='Facebook Logo' style="margin-right: 1px;">
{% comment %}<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>{% endcomment %}
{% comment %}<span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>{% endcomment %}
</a>
{% endif %}

{% comment %}{% if settings.share_twitter %}
<a target="_blank" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: share_permalink }}" class="share-twitter" title="{{ 'general.social.alt_text.share_on_twitter' | t }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_twitter' | t }}</span>
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_twitter' | t }}</span>
</a>
{% endif %}{% endcomment %}

{% if settings.share_facebook %}
<a target="_blank" href="whatsapp://send?text={{ shop.url | append: share_permalink }}" class="share-facebook" title="Share on WhatsApp">
{% comment %}<span class="icon icon-facebook" aria-hidden="true"></span>{% endcomment %}
<img src='{{ 'WhatsApp_Logo_58.png' | file_img_url: '28x28' }}' alt='WhatsApp Logo' style="margin-right: 23px;">
{% comment %}<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>{% endcomment %}
{% comment %}<span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>{% endcomment %}
</a>
{% endif %}
{% if settings.share_pinterest %}
<a target="_blank" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="share-pinterest" title="{{ 'general.social.alt_text.share_on_pinterest' | t }}">
{% comment %}<span class="icon icon-pinterest" aria-hidden="true"></span>{% endcomment %}
<img src='{{ 'Pinterest_badge_4.png' | file_img_url: '24x24' }}' alt='Pinterest Logo' style="margin-right: 23px;">
{% comment %}<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_pinterest' | t }}</span>{% endcomment %}
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_pinterest' | t }}</span>
</a>
{% endif %}

1 Like
Highlighted
New Member
5 0 0

Hi,

 

I have to add instagram in social share,  by default it shares facebook,twitter,pinterest. 

 

Snippets - Social-Sharing.liquid file i have added this code:  {% if settings.share_instagram %}
<a target="_blank" href="//www.instagram.com/share?u={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="social-sharing__link share-instagram" title="{{ 'general.social.alt_text.share_on_instagram' | t }}">
{% include 'icon-pinterest' %}
<span class="share-title visually-hidden">{{ 'general.social.alt_text.share_on_instagram' | t }}</span>
</a>
{% endif %}

 

how do i add instagram link in social share.

 

Thanks in Advance!.


@ZivHodiva wrote:

I figured it out.

below is the relevant piece of code to replace in snippets -> social-sharing.liquid

1. upload your new icons under settings -> files . you can get official HD icons by googling "Facebook assets logo" , replace 'Facebook' with WhatsApp or Pinterest.

2. I removed the "words" between the icons. you can keep them by removing the comment/endcomment on the relevant lines

3. I replaced Tweeter with WhatsApp

4. you should change the name in Green to match the name of the file you uploaded in every relevant line, you can control the size of the icon by changing the numbers in Red in every relevant line (shouldn't be more than 30).

5. this changes the social media icons on the product page, to change in the footer of the home page make similar changes in your Footer file

 

{% if settings.share_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="share-facebook" title="{{ 'general.social.alt_text.share_on_facebook' | t }}">
{% comment %}<span class="icon icon-facebook" aria-hidden="true"></span>{% endcomment %}
<img src='{{ 'f-ogo_RGB_HEX-58_3.png' | file_img_url: '24x24' }}' alt='Facebook Logo' style="margin-right: 1px;">
{% comment %}<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>{% endcomment %}
{% comment %}<span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>{% endcomment %}
</a>
{% endif %}

{% comment %}{% if settings.share_twitter %}
<a target="_blank" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: share_permalink }}" class="share-twitter" title="{{ 'general.social.alt_text.share_on_twitter' | t }}">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_twitter' | t }}</span>
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_twitter' | t }}</span>
</a>
{% endif %}{% endcomment %}

{% if settings.share_facebook %}
<a target="_blank" href="whatsapp://send?text={{ shop.url | append: share_permalink }}" class="share-facebook" title="Share on WhatsApp">
{% comment %}<span class="icon icon-facebook" aria-hidden="true"></span>{% endcomment %}
<img src='{{ 'WhatsApp_Logo_58.png' | file_img_url: '28x28' }}' alt='WhatsApp Logo' style="margin-right: 23px;">
{% comment %}<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>{% endcomment %}
{% comment %}<span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>{% endcomment %}
</a>
{% endif %}
{% if settings.share_pinterest %}
<a target="_blank" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="share-pinterest" title="{{ 'general.social.alt_text.share_on_pinterest' | t }}">
{% comment %}<span class="icon icon-pinterest" aria-hidden="true"></span>{% endcomment %}
<img src='{{ 'Pinterest_badge_4.png' | file_img_url: '24x24' }}' alt='Pinterest Logo' style="margin-right: 23px;">
{% comment %}<span class="share-title" aria-hidden="true">{{ 'general.social.share_on_pinterest' | t }}</span>{% endcomment %}
<span class="visually-hidden">{{ 'general.social.alt_text.share_on_pinterest' | t }}</span>
</a>
{% endif %}


 

0 Likes
Highlighted
New Member
9 0 0

This wasn't working for me at all and I follow your instructions to the tee. Anyone else have a different resolution?

0 Likes
Highlighted
Excursionist
23 1 3

Hi,

what theme are you using?

if you're using Broklyn theme, you can paste the full code from snippets -> social-sharing.liquid and ill try to see if i can spot any issues.

0 Likes
Highlighted
New Member
9 0 0
Hello-

Yes I am using the Brooklyn Theme and below is the code requested:


{% assign shareButtonStyle = settings.social_sharing_style %}



0 Likes
Highlighted
New Member
5 0 0
Hi,

The code which you have sent is there in venture theme also. If I want to
add Instagram share button then how can I proceed? Wherever changes need to
0 Likes
Highlighted
Excursionist
23 1 3
LuxeBoss,
Is that the entire code?
Looks like it's missing a few lines on the top.
More importantly I don't see any of the changes I entered.
0 Likes
Highlighted
Excursionist
23 1 3
KarthikR,
I'm not familiar with Instagram share (I mean I don't think such a thing exists)
What do you want to share on Instagram? A link to a page in your store?
There are no links in Instagram, just photos and videos.
0 Likes
Highlighted
New Member
9 0 0
I just want to have the ability to change my social media icons.
0 Likes