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. Shopify interface step 1

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

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

Iframe Code

  <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>
  1. Go to your Waitlist Widget Builder and click on "Show Hosted Page". Shopify interface step 4

  2. Once you're on the hosted page, copy the URL of this hosted page. Shopify interface step 5

  3. 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.
  1. Click save on the banner at the top of the page. Shopify interface step 7

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

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

  4. 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: Shopify interface step 10

Customization

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