Shopify
To add a waitlist widget to your Shopify online store, please follow the guide below.
Integration Guide
-
Go to your Shopify Store. Navigate to Products and select the product where you want to add a waitlist.
-
In the description, click on the code bracket (the rightmost option in the menu).
-
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>
-
Go to your Waitlist Widget Builder and click on "Show Hosted Page".
-
Once you're on the hosted page, copy the URL of this hosted page.
-
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 washttps://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.
-
Click save on the banner at the top of the page.
-
Hit Publish. Congratulations, you're done! You can now click preview and your example product should have the waitlist.
-
Adjust the waitlist color, logo, text, titles and height/width as you need. It may be advisable to get code help as well.
-
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".