Adding Social Share Button for Whatsapp

quickkhai
Tourist
5 0 3

Hi,

How does one create a whatsapp social share button on the password page?

I am using the Prestige theme you can view my site is here.

Is it also possible to customise the message that appears on the social media post of the person sharing?

Cheers.

KetanKumar
Shopify Partner
14027 1635 5029

Hello, @quickkhai 

Welcome to the Shopify community!
and Thanks for your Good question. 


Please share your password page code,
So I will check and provide a solution here.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
quickkhai
Tourist
5 0 3

edited post.

0 Likes
KetanKumar
Shopify Partner
14027 1635 5029

@quickkhai 

i mean i need hard code or 

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
quickkhai
Tourist
5 0 3

@KetanKumar 

Whoops sorry, I misread what you asked for.

I'm not sure if this is the code you are looking for.

{%- capture background_image_url -%}
{%- if section.settings.background_image -%}
{{- section.settings.background_image | img_url: '1500x', format: 'pjpg' -}}
{%- else -%}
{{- 'password.jpg' | asset_img_url: '1500x', format: 'pjpg' -}}
{%- endif -%}
{%- endcapture -%}

<div class="FlexboxIeFix">
<div class="Password" style="background-image: url({{ background_image_url }})">
<header class="Password__Header">
<a href="{{ routes.root_url }}" class="Password__Logo">
{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

<img class="Password__LogoImage"
src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
{%- else -%}
<span class="Heading u-h4">{{- shop.name -}}</span>
{%- endif -%}
</a>

<button class="Password__LockAction Heading u-h8" data-action="open-modal" aria-controls="modal-password">
<span class="hidden-phone">{{ 'general.password.enter_password' | t }}</span> {% render 'icon' with 'lock' %}
</button>
</header>

<div class="Password__Content">
<div class="Password__Newsletter Password__Card">
{%- if section.settings.heading != blank -%}
<h1 class="Password__Heading Heading u-h2">{{ section.settings.heading | escape }}</h1>
{%- endif -%}

{%- if section.settings.newsletter_text != blank -%}
<div class="Password__Message Rte">{{ section.settings.newsletter_text }}</div>
{%- endif -%}

{%- if section.settings.show_newsletter_signup -%}
{%- form 'customer', class: 'Password__Form Form Form--spacingTight Form--small' -%}
{%- if form.posted_successfully? -%}
<p class="Alert Alert--success">{{ 'general.password.newsletter_success' | t }}</p>
{%- else -%}
<input type="hidden" name="contact[tags]" value="prospect, password page">

<div class="Form__Group">
<input type="email" class="Form__Input" name="contact[email]" placeholder="{{ 'general.password.newsletter_input' | t }}" aria-label="{{ 'general.password.newsletter_input' | t }}">
<button type="submit" class="Button Button--primary Button--small">{{ 'general.password.newsletter_submit' | t }}</button>
</div>
{%- endif -%}
{%- endform -%}
{%- endif -%}
</div>

{%- if section.settings.show_social_sharing -%}
<div class="Password__Social">
<span class="Heading u-h5">{{ section.settings.social_message | escape }}</span>

<div class="Password__ShareButtons ShareButtons">
<a class="ShareButtons__Item ShareButtons__Item--facebook" href="https://www.facebook.com/sharer.php?u={{ shop.url }}" target="_blank" rel="noopener">{%- render 'icon' with 'facebook' -%}</a>
<a class="ShareButtons__Item ShareButtons__Item--twitter" href="https://twitter.com/share?url= Your humble bookstore {{ shop.url }} will be launching soon! Come visit to get updated!" target="_blank" rel="noopener">{%- render 'icon' with 'twitter' -%}</a>
<a class="ShareButtons__Item ShareButtons__Item--pinterest" href="https://pinterest.com/pin/create/button/?url={{ shop.url }}" target="_blank" rel="noopener">{%- render 'icon' with 'pinterest' -%}</a>
<a class="ShareButtons__Item ShareButtons__Item--whatsapp" href="whatsapp://send?text=Lookout for the launch of nurulanwarbookstore.com! Visit www.nurulanwarbookstore.com for updates!" {{ shop.url }}" target="_blank" rel="noopener">{%- render 'icon' with 'whatsapp' -%}</a>
</div>
</div>
{%- endif -%}
</div>

<footer class="Password__Footer">
{%- capture shopify_link -%}
<a href="//www.shopify.com" target="_blank" title="Create your own online store with Shopify">
{%- render 'icon' with 'shopify-logo' -%}
</a>
{%- endcapture -%}
</footer>
</div>
</div>

<div id="modal-password" class="Password__Modal Modal Modal--fullScreen" aria-hidden="true" role="dialog" data-scrollable>
<button class="Modal__Close Modal__Close--outside" data-action="close-modal">{%- render 'icon' with 'close' -%}</button>

<div class="Modal__Content">
<div class="Password__Content">
<div class="Password__Card">
<h1 class="Password__Heading Heading u-h2">{{ 'general.password.enter_password' | t }}</h1>

{%- form 'storefront_password', class: 'Password__Form Form Form--spacingTight Form--small', id: 'modal-password' -%}
{%- if form.errors -%}
<p class="Alert Alert--error">{{ form.errors.messages['form'] }}</p>
{%- endif -%}

<div class="Form__Group">
<input type="password" class="Form__Input" name="password" placeholder="{{ 'general.password.password_input' | t }}" aria-label="{{ 'general.password.password_input' | t }}" autofocus>
<button type="submit" name="commit" class="Button Button--primary Button--small">{{ 'general.password.password_submit' | t }}</button>
</div>
{%- endform -%}
</div>
</div>
</div>
</div>

<style>
.Password__Header .Heading,
.Password__Footer .Heading {
color: {{ section.settings.text_color }};
}

{%- if section.settings.logo -%}
@media screen and (max-width: 640px) {
.Password__LogoImage {
max-width: {{ section.settings.mobile_logo_max_width }}px;
}
}
{%- endif -%}
</style>

{% schema %}
{
"name": "Password page",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image",
"info": "200 x 60px .png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 350,
"step": 5,
"unit": "px",
"label": "Logo image width",
"default": 140
},
{
"type": "range",
"id": "mobile_logo_max_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Mobile logo image width",
"default": 90
},
{
"type": "image_picker",
"id": "background_image",
"label": "Custom background image",
"info": "1500 x 1500px .jpg recommended"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#ffffff"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Opening Soon"
},
{
"type": "header",
"content": "Newsletter signup"
},
{
"type": "checkbox",
"id": "show_newsletter_signup",
"label": "Show newsletter signup",
"default": true
},
{
"type": "richtext",
"id": "newsletter_text",
"label": "Text",
"default": "<p>A short sentence describing what someone will receive by subscribing</p>"
},
{
"type": "header",
"content": "Social sharing"
},
{
"type": "checkbox",
"id": "show_social_sharing",
"label": "Show social sharing",
"default": true
},
{
"type": "text",
"id": "social_message",
"label": "Social message",
"default": "Spread the word"
}
]
}
{% endschema %}

 

 

0 Likes
KetanKumar
Shopify Partner
14027 1635 5029

@quickkhai 

Thanks for code but this code is not allowed to icon finder 

it's possible to  this 

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
quickkhai
Tourist
5 0 3

Ok sure. Do I need to share my login details? Sorry for sounding confused, I'm relatively new to how things work here.

KetanKumar
Shopify Partner
14027 1635 5029

@quickkhai 

No, worries 

i have send request can you please just accept so i will update code

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
14027 1635 5029

@quickkhai 

I have done this, please 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Paula2021
Excursionist
24 0 5

Hi Ketan Kumar,
I'm thinking about installing this theme on my shopify. but before I do so I want to know if it would be possible to add "sharing" through whatsapp and via email ( I do not see this option in the demo).
Thanks!