Solved

Dawn 2.0 Theme - Social Sharing on Product Pages

JasonBoyd
Excursionist
22 1 6

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:

D7793FAB-3D9C-4C58-BB5F-591035052CBB.jpeg

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,

Accepted Solutions (2)
JasonBoyd
Excursionist
22 1 6

This is an accepted solution.

  • @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 }}&amp;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 }}&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">Pin It</span>
      <span class="visually-hidden">Pin on Pinterest</span>
    </a>
  </li>
</ul>

 

 

 

But now I am left with this:

IMG_0658.jpg

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

Octopus Tee in Heather Blue Made in Canada – West Coast Karma.png
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.

View solution in original post

BSS-Commerce
Shopify Expert
3477 461 520

This is an accepted solution.

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

view (1).png

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 10 (10)

KetanKumar
Shopify Partner
36855 3637 11980

@JasonBoyd 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JasonBoyd
Excursionist
22 1 6

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
Shopify Expert
3477 461 520

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.

<div class="social-sharing">
  <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=" class="social-sharing__link"
    title="Share on Facebook"
    onclick="window.open(this.href + window.location.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');">
    <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="http://www.twitter.com/share?url=" class="social-sharing__link" title="Tweet on Twitter"
    onclick="window.open(this.href + window.location.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');">
    <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="http://pinterest.com/pin/create/button/?url=" class="social-sharing__link"
    title="Pin on Pinterest"
    onclick="window.open(this.href + window.location.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');">
    <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>

I hope that this can help you

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

JasonBoyd
Excursionist
22 1 6

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

BSS-Commerce
Shopify Expert
3477 461 520

Hi @JasonBoyd 

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

view (9).png

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

JasonBoyd
Excursionist
22 1 6

This is an accepted solution.

  • @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 }}&amp;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 }}&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">Pin It</span>
      <span class="visually-hidden">Pin on Pinterest</span>
    </a>
  </li>
</ul>

 

 

 

But now I am left with this:

IMG_0658.jpg

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

Octopus Tee in Heather Blue Made in Canada – West Coast Karma.png
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
Shopify Expert
3477 461 520

This is an accepted solution.

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

view (1).png

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

JasonBoyd
Excursionist
22 1 6

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

Glad2bee
Tourist
5 0 1

Thank you! works perfectly.

 

dreamtechzone_5
Shopify Partner
267 1 32

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

 

Screenshot 2024-05-14 014626.png

I want

dreamtechzone_5_0-1715636451357.png