Dawn 2.0 Theme - Social Sharing on Product Pages
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.
</div>
<div class="social-sharing"><a target="_blank" href="MyProduct" class="social-sharing__link" title="Share on Facebook">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-facebook"/></svg>
<span class="social-sharing__title" aria-hidden="true">Share</span>
<span class="visually-hidden">Share on Facebook</span>
</a><a target="_blank" href="MyProduct" class="social-sharing__link" title="Tweet on Twitter">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-twitter"/></svg>
<span class="social-sharing__title" aria-hidden="true">Tweet</span>
<span class="visually-hidden">Tweet on Twitter</span>
</a><a target="_blank" href="MyProduct" class="social-sharing__link" title="Pin on Pinterest">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-pinterest"/></svg>
<span class="social-sharing__title" aria-hidden="true">Pin it</span>
<span class="visually-hidden">Pin on Pinterest</span>
</a></div>
</div>
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,
- @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.
<ul class="footer__list-social list-unstyled list-social">
<li class="list-social__item">
<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">Share</span>
<span class="visually-hidden">Share on Facebook</span>
</a>
</li>
<li class="list-social__item">
<a
target="_blank"
href="//twitter.com/share?text={{ product.title | url_param_escape }}&url={{ shop.url | append: product.url }}"
class="btn--share share-twitter"
>
{%- render 'icon-twitter' -%}
<span class="share-title" aria-hidden="true">Tweet</span>
<span class="visually-hidden">Tweet on Twitter</span>
</a>
</li>
<li class="list-social__item">
<a
target="_blank"
href="//pinterest.com/pin/create/button/?url={{ shop.url | append: product.url }}&media={{ product | img_url: '1024x1024' }}&description={{ product.title | url_param_escape }}"
class="btn--share share-pinterest"
>
{%- render 'icon-pinterest' -%}
<span class="share-title" aria-hidden="true">Pin It</span>
<span class="visually-hidden">Pin on Pinterest</span>
</a>
</li>
</ul>
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.
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.
Hi @JasonBoyd
Because this code is used to share the product, it should be placed in the main-product.liquid file:
- @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.
<ul class="footer__list-social list-unstyled list-social">
<li class="list-social__item">
<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">Share</span>
<span class="visually-hidden">Share on Facebook</span>
</a>
</li>
<li class="list-social__item">
<a
target="_blank"
href="//twitter.com/share?text={{ product.title | url_param_escape }}&url={{ shop.url | append: product.url }}"
class="btn--share share-twitter"
>
{%- render 'icon-twitter' -%}
<span class="share-title" aria-hidden="true">Tweet</span>
<span class="visually-hidden">Tweet on Twitter</span>
</a>
</li>
<li class="list-social__item">
<a
target="_blank"
href="//pinterest.com/pin/create/button/?url={{ shop.url | append: product.url }}&media={{ product | img_url: '1024x1024' }}&description={{ product.title | url_param_escape }}"
class="btn--share share-pinterest"
>
{%- render 'icon-pinterest' -%}
<span class="share-title" aria-hidden="true">Pin It</span>
<span class="visually-hidden">Pin on Pinterest</span>
</a>
</li>
</ul>
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.
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.
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
