Using Web2Phone with Shopify

Add a fully functional contact, quote, or enquiry form to your Shopify store using Web2Phone. No apps, no backend code, and no monthly plugins — just instant WhatsApp and email delivery.

1. Create Your Form in Web2Phone

  1. Log in to your Web2Phone dashboard.
  2. Go to Forms → Create Form.
  3. Add the fields you want (name, email, phone, message, etc.).
  4. Add your Shopify domain to Allowed Domains:
    • example.com (your live store domain)
    • your-store.myshopify.com (Shopify default domain)
  5. Save the form.
  6. Copy your full Web2Phone Embed Snippet.

2. Add Web2Phone to a Shopify Page

Shopify Online Store 2.0 lets you embed custom HTML on any page using the Custom Liquid or Custom HTML block. This works perfectly with the Web2Phone embed snippet.

Steps:

  1. In Shopify admin, go to Online Store → Pages.
  2. Edit the page where you want the form (e.g., Contact, Quotes, Support).
  3. Click Add section.
  4. Select either:
    • Custom Liquid (recommended), or
    • Custom HTML
  5. Paste the full Web2Phone embed snippet:
<form data-web2phone="form"
  data-public-key="YOUR_PUBLIC_KEY"
  data-endpoint="YOUR_ENDPOINT">
  <input name="name" placeholder="Your name">
  <input name="email" type="email" placeholder="you@example.com">
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
  <p data-w2p-output></p>
</form>

<script src="https://web2phone.co.uk/static/formsapp/js/embed.js"></script>

Click Save and preview your page.

3. Optional: Add the Form to Your Theme

If you want the form to appear on every page (e.g., as a floating enquiry form), you can embed it directly into your theme.

Steps:

  1. Go to Online Store → Themes.
  2. Click Edit code.
  3. Open a template such as:
    • sections/footer.liquid
    • sections/contact-form.liquid
    • snippets/custom-form.liquid
  4. Paste the same full Web2Phone embed snippet.
  5. Save the file.

The form now appears wherever you placed it.

4. Publish & Test

  1. Publish your theme or page changes.
  2. Open your Shopify site (not the theme editor preview).
  3. Submit a test form.
  4. You should receive:
    • ✔ A WhatsApp message (if enabled)
    • ✔ A backup email
    • ✔ A success message from Web2Phone

Shopify does not block Web2Phone — everything works immediately.

5. Troubleshooting

  • “Domain not allowed” error?
    Your domain must match **exactly** in Web2Phone:
    • ❌ https://example.com
    • ❌ www.example.com
    • ✔ example.com
  • Form loads in the editor but not on live site?
    Shopify sometimes delays script loading — wait a few seconds or clear cache.
  • Form looks unstyled?
    Shopify themes vary. Add styles via:
    • theme.css
    • or inline styles inside the snippet
  • Still nothing coming through?
    Check:
    • Allowed Domains formatting
    • Your public key & endpoint
    • Your phone number is in +44 / +1 format

Your Shopify Form Is Ready!

You can now collect customer enquiries, booking requests, quotes, and more — delivered instantly to WhatsApp and email.

Back to Getting Started Create Your Free Account