Social share open by default - Narrative theme

[StudioM]

Hi there,

I am using the Narrative theme and would like the social sharing icons to be displayed by default.

Currently, you need to press the share button before they become visible.

Your kind help will be much appreciated!

[KetanKumar]

@StudioM 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[StudioM]

Hi @KetanKumar !

The URL is:

https://tzuf.net

Sending you the password privately.

Thank you very much!

[KetanKumar]

@StudioM 

Thanks for store details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__share .social-sharing__item-list {
    position: relative;
    width: 100%;
    display: inline-block;
    text-align: center;
}
.product__share .social-sharing__item {
    position: relative;
    opacity: 1;
    left: 0;
    margin: 0;
}

[StudioM]

Hi @KetanKumar !

Thank you again for your time and effort!

As for the result after using the code, the share icons are now visible by default:

And it could be perfect, only they are not clickable.

In order to use them, you still need to press the "SHARE", then they expand once more and have this grey uncentered circle around them:

Is there a way to make them clickable without the expanding and all?

Many Thanks in Advance!

[KetanKumar]

@StudioM 

Yes, is possible to some custom code on backend side 

[StudioM]

I will rephrase my question:

What can I do to make it work as explained?

Thanks!