Adding Social Share Button for Whatsapp

Highlighted
Tourist
4 0 2

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.

1 Like
Highlighted
Shopify Partner
7627 1050 2647

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
1 Like
Highlighted
Tourist
4 0 2

edited post.

0 Likes
Highlighted
Shopify Partner
7627 1050 2647

@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
1 Like
Highlighted
Tourist
4 0 2

@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
Highlighted
Shopify Partner
7627 1050 2647

@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
1 Like
Highlighted
Tourist
4 0 2

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

1 Like
Highlighted
Shopify Partner
7627 1050 2647

@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
1 Like
Highlighted
Shopify Partner
7627 1050 2647

@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