I’m trying to find a way to add or replace out the sharing options on the product page. I’ve been searching and just can’t seem to find the right solution. Right now my Share looks like this.

It opens a popup and it doesn’t even list FB as a option..
My goal is to get something like this.
Or at least a minimum have a Facebook option.
Any help would be really appreciated.
I found this out there and it sorta does something. I can add a custom liquid code block to the page and put this in there, but the icons are HUGE. How do I get them reduced.
{%- render 'icon-facebook' -%}
facebook
facebook
{%- render 'icon-twitter' -%}
twitter
twitter
{%- render 'icon-pinterest' -%}
pinterest
pinterest
1 Like
Hi Griffin.
You might need to add some custom CSS to fix the icon sizes. I’ve updated your code ( just added a class in
) and added some style. Hopefully it would help :). Let me know if it worked. Thanks
ul.custom-share-buttons {
display: flex;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
ul.custom-share-buttons li {
margin: 0 5px;
}
ul.custom-share-buttons li a {
color: inherit;
}
ul.custom-share-buttons li a svg {
width: 20px;
height: 20px;
}
span.share-title {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
word-wrap: normal !important;
}
1 Like
That is perfect. I added a Custom Liquid block right above the Share block and it is perfect. Thank you for your help.
www.pressmarks.com
1 Like
That is perfect. I added a Custom Liquid block right above the Share block and it is perfect. Thank you for your help.
www.pressmarks.com
1 Like
Glad I was able to help:)