Blog Details

Shopify WhatsApp widget doesn't need an app. Below is real Liquid code you can paste into your theme: a floating button for theme.liquid, a product page "Ask on WhatsApp" button, and a cart-recovery snippet for main-cart-items.liquid (or the cart drawer section in Online Store 2.0 themes).

1. Floating button in theme.liquid

Open Online Store → Themes → Edit code → layout/theme.liquid and paste right before </body>:

<a id="wutt-shopify-fab"
   href="https://wa.me/966500000000?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Wutt."
   target="_blank" rel="noopener"
   aria-label="Chat on WhatsApp"
   style="position:fixed;right:20px;bottom:20px;z-index:9999;
          width:60px;height:60px;border-radius:50%;
          background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.25);
          display:flex;align-items:center;justify-content:center">
  <svg viewBox="0 0 32 32" width="34" height="34" aria-hidden="true">
    <path fill="#fff" d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm5.6 15.2c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.7.7 2.4.8 3.3.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.4z"/>
  </svg>
</a>
{%- if template == 'cart' -%}
  <style>@media(max-width:768px){#wutt-shopify-fab{bottom:90px}}</style>
{%- endif -%}

2. Product page "Ask on WhatsApp" button

Open sections/main-product.liquid and drop this near the price or below the "Add to cart" button:

{%- assign wutt_phone = '966500000000' -%}
{%- assign wutt_msg  = "Hi, I'd like to know more about " | append: product.title -%}
<a class="wutt-ask-btn"
   href="https://wa.me/{{ wutt_phone }}?text={{ wutt_msg | url_encode }}"
   target="_blank" rel="noopener">
  <svg viewBox="0 0 32 32" width="20" height="20" aria-hidden="true">
    <path fill="currentColor" d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3z"/>
  </svg>
  Ask about this product
</a>
<style>
  .wutt-ask-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    padding:12px 18px;border-radius:999px;background:#25D366;color:#fff;
    font-weight:700;text-decoration:none}
  .wutt-ask-btn:hover{background:#1ebe5d}
</style>

For variant-aware questions, append variant info:

{%- assign wutt_msg = "Hi, is " | append: product.title
   | append: " (" | append: variant.title | append: ") available?" -%}

3. Cart-recovery snippet for main-cart-items.liquid

Show a "Need help? Message us on WhatsApp" prompt inside the cart drawer and prefill the cart contents and total so a sales rep can quote or recover the order:

{%- assign wutt_recovery_msg = "Hi, I have a question about my cart at "
   | append: shop.name | append: ":" -%}
{%- for item in cart.items -%}
  {%- assign wutt_recovery_msg = wutt_recovery_msg
     | append: "\n- " | append: item.quantity | append: "x "
     | append: item.product.title -%}
  {%- if item.variant.title != 'Default Title' -%}
    {%- assign wutt_recovery_msg = wutt_recovery_msg
       | append: " (" | append: item.variant.title | append: ")" -%}
  {%- endif -%}
  {%- assign wutt_recovery_msg = wutt_recovery_msg
     | append: " = " | append: item.line_price | times: 0.01 | append: " " | append: cart.currency.iso_code -%}
{%- endfor -%}
{%- assign wutt_recovery_msg = wutt_recovery_msg
   | append: "\nTotal: " | append: cart.total_price | times: 0.01
   | append: " " | append: cart.currency.iso_code
   | append: "\nCart link: " | append: shop.url | append: "/cart" -%}

<div class="wutt-cart-help">
  <strong>Need help with this order?</strong>
  <a href="https://wa.me/966500000000?text={{ wutt_recovery_msg | url_encode }}"
     target="_blank" rel="noopener">Message us on WhatsApp</a>
</div>
<style>
  .wutt-cart-help{margin:16px 0;padding:14px;border:1px dashed #25D366;
    border-radius:12px;background:#f0fbf4}
  .wutt-cart-help a{display:inline-block;margin-top:6px;color:#25D366;font-weight:700}
</style>

Tracking tips

• Tag every click in GA4: add onclick="gtag('event','wutt_click',{page_type:'{{ template }}'})" to your <a>.
• For automated abandoned-cart recovery, schedule an hourly job in your backend that reads /admin/api/2024-04/abandoned_checkouts.json and triggers a WhatsApp template message through Wutt.
• Keep the prefilled message short; WhatsApp truncates the link preview above ~120 chars.