Using FormBeep with Shopify#

You can add a FormBeep connected form to your Shopify store using the Custom Liquid block or by editing your theme files directly.

Step 1: Add Allowed Domain#

Add your live .myshopify.com domain OR your custom domain to your FormBeep Dashboard: ✔ example.com ✔ my-store-name.myshopify.com

Important: Provide the exact domain that users see in the address bar when visiting your store.

Step 2: Add Custom Liquid#

1. In your Shopify Admin, go to Online Store > Themes.
2. Click Customize on your current theme to open the visual editor.
3. Navigate to the page where you want the contact form.
4. Click Add section in the left sidebar and select Custom Liquid.
5. Paste your FormBeep HTML and script into the Custom Liquid text box:

<div class="contact-form-container" style="max-width: 600px; margin: 0 auto; padding: 20px;">
  <h2>Contact Us on WhatsApp</h2>
  <form id="contact-form">
    <div style="margin-bottom: 15px;">
      <input name="name" type="text" placeholder="Name" required style="width: 100%; padding: 10px;">
    </div>
    <div style="margin-bottom: 15px;">
      <input name="email" type="email" placeholder="Email" required style="width: 100%; padding: 10px;">
    </div>
    <div style="margin-bottom: 15px;">
      <textarea name="message" placeholder="Message" required style="width: 100%; padding: 10px; min-height: 100px;"></textarea>
    </div>
    <button type="submit" style="padding: 10px 20px; background: #000; color: #fff; border: none; cursor: pointer;">Send Message</button>
  </form>
</div>

<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>

6. Click Save in the top right.

Step 3: Test Your Form#

Navigate to the live URL of your Shopify store, fill out the form, and hit send to verify the WhatsApp notification triggers successfully!