Okay
  Public Ticket #1423030
social icons on product detail page
Closed

Comments

  • stoneliu started the conversation

    Hello,

    Could you please show me how to make the social icons on product details page displayed as shown on the demo site? The default sharethis icons don't look good on claue.

    Thank you.

  • [deleted] replied

    Hi

    Please provide admin account and admin url, I will help you

  • stoneliu replied

    Good morning,

    Please simply share the codes. And it's against Magento's security practices to reveal admin account casually - after all people are depending on the online selling business to make a living. Hope you understand.

    Thanks

  • stoneliu replied

    Please update?

  • [deleted] replied

    Hi

    Please go to admin MGS -> Theme Settings then scroll down to "Custom Style" and add this code to textarea:

    .sharethis-inline-share-buttons .st-btn {
        background: 0 0 !important;
        height: auto !important;
        top: 0 !important;
        color: #222;
    }
    .sharethis-inline-share-buttons .st-btn>* {
        display: none;
    }
    svg:not(:root) {
        overflow: hidden;
    }
    .sharethis-inline-share-buttons .st-btn:after {
        display: block;
        line-height: 1;
        font-size: 20px;
        font-family: "FontAwesome";
    }
    .sharethis-inline-share-buttons .st-btn[data-network=facebook]:after {
        content: "\f09a";
    }
    .sharethis-inline-share-buttons .st-btn[data-network=twitter]:after {
        content: "\f099";
    }
    .sharethis-inline-share-buttons .st-btn[data-network=pinterest]:after {
        content: "\f231";
    }
    .sharethis-inline-share-buttons .st-btn[data-network=email]:after {
        content: "\f003";
    }
    .sharethis-inline-share-buttons .st-btn[data-network=sharethis]:after {
        content: "\f1e0";
    }

    Then refresh cache and try again

  • stoneliu replied

    Thanks, added code and flushed cache, but it didn't work. Share this default buttons still display.

  • stoneliu replied

    Hello,

    Don't know why but now the codes worked and desired buttons showed up. Could you please also share the codes for Linkedin, Google+, SMS and Whatsapp buttons as well?

    Thanks

  • [deleted] replied

    Hi

    Please provide url site, I need your url site to check it

  • stoneliu replied

    ableschic.com

  • [deleted] replied

    Hi

    Can you please add Linkedin, Google+, SMS and Whatsapp to your social media? I don't see them in detail page, I have to see them, so you will provide code to style them

  • stoneliu replied

    Done, please check again :)

  • [deleted] replied

    Hi

    Do you change the code? I don't see my changes for facebook, twitter,..., please provide admin account for me, I will help you do it then I will show the code that I used

  • stoneliu replied

    Hello,

    I thought you need to see the original sharethis buttons so I deleted the custom codes. I will add it again so that you can see them.

    I guess only this part needs to change: content: "\f*** accordingly.


  • [deleted] replied

    Hi

    Please add the following codes:

    .sharethis-inline-share-buttons .st-btn[data-network=linkedin]:after {
        content: "\f0e1";
    }

    .sharethis-inline-share-buttons .st-btn[data-network=googleplus]:after {
        content: "\f0d5";
    }

    .sharethis-inline-share-buttons .st-btn[data-network=whatsapp]:after {
        content: "\f232";
    }

    Refresh cache and try again

  • stoneliu replied

    THanks,

    Finally I save 6 buttons on the page but there is a empty space in between them even after flush caches on both sides. Please check any product links on ableschic.com.

    Thanks

  • [deleted] replied

    Hi

    Please add the following code to custom style:

    .sharethis-inline-share-buttons .st-btn[data-network=whatsapp]:after {
        content: "\f232";
    }

    .sharethis-inline-share-buttons .st-btn[data-network=email]:after {

        content: "\f003";

    }


  • stoneliu replied

    Hello,

    I don't need whatsapp and email button, I only need 6 buttons as on my site. The problem is there is a empty space in the line between the sharethis button. Please check again.

  • [deleted] replied

    Hi

    So please add this code:

    .sharethis-inline-share-buttons .st-btn[data-network=whatsapp],

    .sharethis-inline-share-buttons .st-btn[data-network=email] {

        display: none;

    }

  • stoneliu replied

    Hello,

    You slept too late in the night, that's not good for health :)

    The issue is that I didn't put the codes for whatsapp and email buttons on the site at all... What the use of display none?

    Tried adding below codes and flushed caches, didn't work. Still a space in between.

    https://ableschic.com/black-tungsten-carbide-wedding-ring-flat-brushed-finish-with-gold-groove-line-engagement-bands-valentine-s-gift-for-him-her-8mm

    Thanks

  • [deleted] replied

    Hi

    Thanks, you must update "share this" icon again, in your setting here

    https://platform.sharethis.com/get-share-buttons

    You still use whatapps and email

  • [deleted] replied

    Hi

    Have you removed them yet?

  • stoneliu replied

    Yes that's stupid of me - forgot to login to change sharethis button settings :)

    Now both sharethis site and my site buttons match, maybe wait 5 minutes for the change to take place.

    I removed the display none codes...

  • [deleted] replied

    Hi

    :) yes, just want to ask if you feel happy with our theme and my service, can you please rate 5stars for us on the themeforest? It will helps, you can visit this link to rate:

    https://themeforest.net/item/claue-clean-minimal-magento-2-theme/reviews/20155150

    Thanks very much

  • stoneliu replied

    Now the button displayed correctly. It's all about sharethis site settings.

    Loved the theme and your support, will rate 5 star soon. :)

  • [deleted] replied

    Hi

    Thanks so much