Docs • Platform Guide

Using Web2Phone with Shopify

Add a fully functional contact, quote, or enquiry form to your Shopify store using Web2Phone — no apps and no backend code. Get instant WhatsApp delivery (if enabled) with email fallback.

If you’re setting up Web2Phone for the first time, start with the Getting Started guide.

Start Free Jump to Step 1
Step 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. Set Allowed Domains (see Step 2).
  5. Save the form.
  6. Copy your Web2Phone Embed Snippet from the form settings.
Step 2

Set Allowed Domains for Shopify

Web2Phone only accepts submissions from hostnames you authorise. In Allowed Domains, enter only the hostname (no protocol, no paths).

⚠️

Allowed Domains rules

  • ✅ Hostname only (example: example.com)
  • ✅ example.com and www.example.com are treated as equivalent
  • ❌ No https://
  • ❌ No paths like /pages/contact
  • ❌ No wildcards like *.example.com

Common Shopify hostnames

  • your-store.myshopify.com (Shopify default domain)
  • example.com (your custom domain)

Examples

✅ Correct:

your-store.myshopify.com
example.com

❌ Don’t do this:

https://example.com
example.com/pages/contact
*.example.com

If customers can reach your store on both your-store.myshopify.com and example.com, add both hostnames (each on a new line) so neither gets blocked.

Step 3

Add Web2Phone to a Shopify Page

Shopify Online Store 2.0 lets you embed code using Custom Liquid (recommended) or Custom HTML.

Steps

  1. Shopify admin → Online Store → Pages.
  2. Edit (or create) the page where you want the form (Contact, Quotes, Support).
  3. Click Add section.
  4. Select Custom Liquid (recommended) or Custom HTML.
  5. Paste the full Web2Phone embed snippet from your dashboard.
  6. Click Save and preview the page.

Important

  • Don’t nest forms: don’t paste the Web2Phone form inside Shopify’s built-in <form> blocks.
  • Copy from the dashboard: your snippet already includes the correct public key and endpoint.

Example (your dashboard snippet will contain your real values): 

<form data-web2phone="form"
  data-public-key="YOUR_PUBLIC_KEY"
  data-endpoint="https://web2phone.co.uk/api/v1/submit/">

  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="[email protected]" required>
  <textarea name="message" placeholder="Message" required></textarea>

  <button type="submit">Send</button>
  <p data-w2p-output></p>
</form>

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

Optional: Add the Form to Your Theme

If you want the form to appear in a theme section (e.g., footer enquiry form), paste the same snippet into your theme code.

Steps

  1. Online Store → Themes → Edit code.
  2. Open a file such as:
    • sections/footer.liquid
    • sections/contact-form.liquid
    • snippets/custom-form.liquid
  3. Paste the Web2Phone form HTML where you want it.
  4. If you add multiple Web2Phone forms, include the embed.js script tag only once on the page.
  5. Save.

Tip: put the script tag once in layout/theme.liquid, and keep individual form markup in sections/snippets.

Step 5

Publish & Test

  1. Publish your changes.
  2. Open your Shopify site on the live URL (not just the editor preview).
  3. Submit a test enquiry.
  4. You should see:
    • ✔ A WhatsApp message (if enabled)
    • ✔ A backup email
    • ✔ A success message in the data-w2p-output element

If anything fails, use the Troubleshooting guide.

Troubleshooting

Common Shopify Issues

🧯

“Domain not allowed” error?

Check Allowed Domains first. Use hostname only, and remember: example.com and www.example.com are treated as equivalent.

  • ❌ https://example.com
  • ❌ example.com/pages/contact
  • ❌ *.example.com
  • ✅ example.com
  • ✅ your-store.myshopify.com

Works in editor, not on live site?

Always test on the real published page URL. Some themes/apps cache or defer scripts in preview mode.

Form looks unstyled?

Shopify themes vary. Style the form via your theme CSS (e.g. assets/base.css, theme.css) or add your own classes.

Still nothing coming through?

  • Confirm Allowed Domains formatting (hostname only)
  • Confirm you copied the snippet from the correct form (public key matches)
  • Confirm the <script src=".../embed.js"> tag is present

Use the full checklist in Troubleshooting.

Your Shopify Form Is Ready

You can now collect customer enquiries, booking requests and quotes — delivered to WhatsApp and email, without installing another third-party app.

Back to Getting Started Use Web2Phone with Webflow Use Web2Phone with WordPress
Create Your Free Account