How to create a Call Now button with shake effect to your Shopify store

Do you want to create an easy “Call Now” button for your viewers? Because your mobile visitors are already holding their phone it will allow them to call you with one simple touch of the button.

This guide will show you how to add a simple “Call Now” button with shake effect to your Shopify store.

• From your Shopify admin, go to Online Store > Themes.
• Find the theme you want to edit, and then click Actions > Edit code.
• In the Layout section, click theme.liquid to open the file in the online code editor.
• Find </body> and paste the below code just above it.
  
  {% assign huratips_phone_number_link = 'tel:+84905567654' %} {% assign huratips_phone_number_text = 'Call me now' %} {{ '//cdn.shopify.com/s/files/1/0015/7417/4755/t/1/assets/huratips_call_animation.scss.css?1265' | stylesheet_tag }} <div class="phonering-alo-phone phonering-alo-green phonering-alo-show visible-xs hidden-sm hidden-md hidden-lg" id="phonering-alo-phoneIcon" style="right: -40px; top: 70px; display: block;"> <div class="phonering-alo-ph-circle"></div> <div class="phonering-alo-ph-circle-fill"></div> <a href="{{huratips_phone_number_link}}"></a> <div class="phonering-alo-ph-img-circle"> <a href="{{huratips_phone_number_link}}"></a> <a href="{{huratips_phone_number_link}}" class="pps-btn-img " title="{{huratips_phone_number_text}}"> <img src="https://cdn.shopify.com/s/files/1/0382/4185/files/call-1.png?787" alt="{{huratips_phone_number_text}}" width="50" onmouseover="this.src='https://cdn.shopify.com/s/files/1/0382/4185/files/call-1.png?787';" onmouseout="this.src='https://cdn.shopify.com/s/files/1/0382/4185/files/call-1.png?787';"> </a> </div> </div>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  {% assign huratips_phone_number_link = 'tel:+84905567654' %} {% assign huratips_phone_number_text = 'Call me now' %}   {{ '//cdn.shopify.com/s/files/1/0015/7417/4755/t/1/assets/huratips_call_animation.scss.css?1265' | stylesheet_tag }} <div class="phonering-alo-phone phonering-alo-green phonering-alo-show visible-xs hidden-sm hidden-md hidden-lg" id="phonering-alo-phoneIcon" style="right: -40px; top: 70px; display: block;">   <div class="phonering-alo-ph-circle"></div>   <div class="phonering-alo-ph-circle-fill"></div>   <a href="{{huratips_phone_number_link}}"></a>   <div class="phonering-alo-ph-img-circle">     <a href="{{huratips_phone_number_link}}"></a>     <a href="{{huratips_phone_number_link}}" class="pps-btn-img " title="{{huratips_phone_number_text}}">       <img src="https://cdn.shopify.com/s/files/1/0382/4185/files/call-1.png?787" alt="{{huratips_phone_number_text}}" width="50" onmouseover="this.src='https://cdn.shopify.com/s/files/1/0382/4185/files/call-1.png?787';" onmouseout="this.src='https://cdn.shopify.com/s/files/1/0382/4185/files/call-1.png?787';">     </a>   </div> </div>

• Click Save and you are done.

Notes: You must change the phone number to your numeber phone in first line.

DEMO