Wait.li Installation (Online Store 2.0 Update)

Shopify has released their new Online Store 2.0 update, which allows for sections everywhere, along with a bunch of other great new features.

This update has come with a change in how the Wait.li app needs to be installed on your store, if you are trying to install the app on an OS 2.0 theme (like Dawn, or most themes released after September 1st, 2021).

The installation has a few more quirks and steps to it than the old (legacy) theme installation, but as always, the Wait.li team is here to help out and we are more than happy to do the entire code installation for you. Just let us know, and we will help out ASAP!

Ensure Wait.li Snippets Are Installed

Assuming you went through the Wait.li installation process, your main theme will already have the code snippets installed and ready to go.

If you don't have the Wait.li code snippets on your desired theme, let us know and we can send you the appropriate code and steps to put the files in place.

Install Code On Product Template

Wait.li has 3 core pieces of code that will dictate when the waiting list is shown, when it is disabled, and to verify customer accounts who are activated.

1. Wait.li Config Code

This configuration code should be pasted in near the top of your product template page (.liquid file, likely something like: main-product.liquid, or product-template.liquid, etc.).

{% comment %} Wait.li Config Snippet (Required) {% endcomment %}
{% capture 'wait_li_capture' %}{% render 'wait_li_config', product: product %}{% endcapture %}{%- assign wait_li_capture_results = wait_li_capture | split: '|' -%}{%- assign wait_li_active = wait_li_capture_results[0] | strip -%}{%- assign show_waiting_snippet = wait_li_capture_results[1] | strip -%}{%- assign is_customer = wait_li_capture_results[2] | strip -%}{%- assign customer_status = wait_li_capture_results[3] | strip -%}
{% comment %} End Wait.li Config Snippet (Required) {% endcomment %}

2. Wait.li Button Code

This next code is what actually displays your waiting list. You can place this wherever you'd like on your product template page, but likely you'd want to place it near where your typical add to cart / purchase buttons are displayed.

{% comment %} Wait.li Button Snippet (Required) {% endcomment %}
{% if wait_li_active == 'true' and show_waiting_snippet == 'true' %}{% render 'wait_li_button', product: product, is_customer: is_customer, customer_status: customer_status %}{% endif %}
{% comment %} End of Wait.li Button Snippet (Required) {% endcomment %}

3. Hide Elements Code

The last bit of code we need in place is the below, which will need to be placed around existing form elements such as your product add to cart button, quantity selector, variant selector, etc.

You can leave elements like the product price, photo, and description alone. Wait.li needs to hide the other elements in order to block customers from buying the product when they are not activated.

As mentioned, you will need to find each form element (or perhaps your theme will have one larger form element that covers all of these elements) and place this code snippet above, and then below it.

Here is an example:

{% comment %} Wait.li Hide Code 1/2 {% endcomment %}
{% if wait_li_active == 'false' or show_waiting_snippet == 'false' %}
{% comment %} End Wait.li Hide Code 1/2 {% endcomment %}

// Product Form Element Area, for example:
<div class="quantity_selector_element"></div>
// end of existing product form element

{% comment %} Wait.li Hide Code 2/2 {% endcomment %}{% endif %}
{% comment %} End Wait.li Hide Code 2/2 {% endcomment %}

Basically, the above is an if statement that needs to be wrapped around each of your important form elements. If you don't put the above code in place, your customers may get very confused!

Try out the above, ensure you've enabled a waiting list on a test product, and then load up the product page and ensure that the waiting list is displaying as intended. 

Feel free to send us an email or message, and we will be more than happy to check your installation and get it working perfectly for you!