Shopify

To add a waitlist widget to your Shopify online store, please follow the guide below.

Integration Guide

1. Go to your Shopify Store. Navigate to Products and select the product where you want to add a waitlist.

2. In the description, click on the code bracket (the rightmost option in the menu).

3. Paste in the iframe script below. Don't save quite yet.

  <div height="[YOUR HEIGHT HERE]" width="[YOUR WIDTH HERE]">
    <iframe
        allowtransparency="true"
        id="waitlist_iframe"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        width="[YOUR WIDTH HERE]"
        height="[YOUR HEIGHT HERE]"
        src="[YOUR URL HERE]"
        style="border-radius: 8px;"
    >
    </iframe>
  </div>
  <script>
    const url = new URL(window.location.href);
    const ref_id = url.searchParams.get('ref_id');
    if (ref_id) {
        document.getElementById("waitlist_iframe").src += `?ref_id=${ref_id}`;
    }
  </script>

4. Go to your Waitlist Widget Builder and click on "Show Hosted Page".

5. Once you're on the hosted page, copy the URL of this hosted page.

6. Go back to the Shopify Product page. Now, you swap out the following.

• [YOUR URL HERE] for the URL of your Waitlist, which you copied earlier in step 4. In our example, that was https://getwaitlist.com/waitlist/5036.
• [YOUR HEIGHT HERE] for the height of your Widget. 350px is a good starting value. You can adjust this as needed.
• [YOUR WIDTH HERE] for the width of your Widget. 500px is a good starting value. You can adjust this as needed.

7. Click save on the banner at the top of the page.

8. Hit Publish. Congratulations, you're done! You can now click preview and your example product should have the waitlist.

9. Adjust the waitlist color, logo, text, titles and height/width as you need. It may be advisable to get code help as well.

10. NOTE: Please make sure that the waitlist URL corresponds to the URL of your product -- otherwise the referrals won't work. Add the URL of your product where the red box is:

Customization

Please note that unlike other integration methods, the iframe does not allow for further customization using the "Widget Embed Options".