{"id":6764,"date":"2025-02-04T00:00:00","date_gmt":"2025-02-04T00:00:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=6764"},"modified":"2025-06-16T12:54:53","modified_gmt":"2025-06-16T07:24:53","slug":"how-to-add-click-to-call-button-in-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-click-to-call-button-in-shopify\/","title":{"rendered":"How to Add Click to Call Button in Shopify? – Easy Way"},"content":{"rendered":"\n

The faster your customers can reach you, the better their experience and the higher the chances of conversions. <\/p>\n\n\n\n

One way to achieve this is a click to call button. <\/p>\n\n\n\n

It is more like a Telegram chat<\/a> or Whatsapp chat button you keep on your store, but here, visitors directly call you instead of chatting.\u00a0<\/p>\n\n\n\n

In this blog, get the direct solution to add click to call button in Shopify without any third-party app or need of technical help. Just follow the steps to activate the click to call feature in your store.<\/p>\n\n\n\n

What is a Click to Call Button & How Does it Work?<\/h2>\n\n\n\n

A click to call button is a one-click feature for customers to contact you via call. You can show the Shopify phone call button on various pages of your store like this. <\/p>\n\n\n

\n
\"Click<\/figure>\n<\/div>\n\n\n

On clicking the button, your customer’s phone dialer pad will automatically open with your phone number pre-filled, which they can directly call. <\/p>\n\n\n\n

Making it extremely easy for customers to connect with you on the spot and easy for you to solve their queries instantly.  Now, if you are thinking how do I add a call button to Shopify? Here are the 3 easy to follow steps. <\/p>\n\n\n\n

Steps to Add Click to Call in Shopify<\/h2>\n\n\n\n

Step 1: Open the Theme File Editor <\/h3>\n\n\n\n

From your Shopify admin panel, head to Online Store > Themes.<\/strong><\/p>\n\n\n

\n
\"Open<\/figure>\n<\/div>\n\n\n

Then, from the right side, click on the three dots next to Customize and select Edit code.<\/strong>  <\/p>\n\n\n

\n
\"Click<\/figure>\n<\/div>\n\n\n

Step 2: Create a click-to-call Snippet<\/h3>\n\n\n\n

Now from the theme file editor, create a new snippet named \u201cmeetanshi-click-to-call\u201d and click Done.<\/p>\n\n\n

\n
\"Create<\/figure>\n<\/div>\n\n\n

Then add the following code to the snippet:<\/p>\n\n\n\n

{% assign call_button_enabled = true %}\n{% assign call_button_text = \"Call Us\" %}\n{% assign call_button_number = \"+1234567890\" %}\n{% assign call_button_bg_color = \"#28a745\" %} <!-- Button background color -->\n{% assign call_button_text_color = \"#ffffff\" %} <!-- Button text and icon color -->\n{% assign call_button_size = \"16px\" %} <!-- Button font and icon size -->\n{% assign call_button_padding = \"12px 24px\" %} <!-- Button padding -->\n{% assign call_button_position = \"bottom-right\" %} <!-- Options: bottom-right, bottom-left -->\n\n{% if call_button_enabled %}\n<style>\n  .call-button {\n    position: fixed;\n    {% if call_button_position == \"bottom-right\" %}\n      bottom: 20px;\n      right: 20px;\n    {% elsif call_button_position == \"bottom-left\" %}\n      bottom: 20px;\n      left: 20px;\n    {% endif %}\n    background-color: {{ call_button_bg_color }};\n    color: {{ call_button_text_color }};\n    padding: {{ call_button_padding }};\n    border-radius: 50px;\n    font-size: {{ call_button_size }};\n    font-weight: bold;\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    z-index: 9999;\n  }\n  .call-button:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);\n  }\n  .call-button svg {\n    width: {{ call_button_size }};\n    height: {{ call_button_size }};\n    fill: {{ call_button_text_color }};\n  }\n<\/style>\n\n<a class=\"call-button\" href=\"tel:{{ call_button_number }}\">\n  <svg alt=\u201dmeetanshi click to call icon\u201d xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path d=\"M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24c1.12.37 2.33.57 3.54.57a1 1 0 011 1v3.01a1 1 0 01-1 1c-10.37 0-18.81-8.44-18.81-18.81a1 1 0 011-1H4.7a1 1 0 011 1c0 1.21.2 2.42.57 3.54a1 1 0 01-.24 1.05l-2.2 2.2z\"\/>\n  <\/svg>\n  {{ call_button_text }}\n<\/a>\n{% endif %}<\/pre>\n\n\n\n
Make sure to replace the values of the phone number, text, colours, and sizes to customize the click-to-call button as per your needs.<\/p>\n\n\n
\n
\"Add<\/figure>\n<\/div>\n\n\n
Once done, save<\/strong> the snippet file.<\/p>\n\n\n\n
Step 3: Render the Snippet File <\/h3>\n\n\n\n
Now, open the theme.liquid file and add the following code before the closing <\/body> tag:<\/p>\n\n\n\n
{% render “meetanshi-click-to-call” %}<\/p>\n\n\n
\n
\"Render<\/figure>\n<\/div>\n\n\n
Then, click Save. <\/strong>Take a preview and you will be able to see the click-to-call button in your Shopify store. <\/p>\n\n\n
\n
\"Click<\/figure>\n<\/div>\n\n\n
Instead of adding any third-party Shopify app that might take up extra space in your backend, you can use the mentioned code in your store directly. <\/p>\n\n\n\n
Make sure to edit your phone call while adding the code and using a phone number exclusively for customer support \u2014 there are chances of calls going unnoticed if you are busy with other tasks. <\/p>\n","protected":false},"excerpt":{"rendered":"
The faster your customers can reach you, the better their experience and the higher the chances of conversions.  One way to achieve this is a…<\/p>\n","protected":false},"author":5,"featured_media":6783,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-6764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/6764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=6764"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/6764\/revisions"}],"predecessor-version":[{"id":16865,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/6764\/revisions\/16865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/6783"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=6764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=6764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=6764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}