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 Configuration Code On Product Template
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 %}
Hide Elements Code
The last bit of code editing you need to do 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!
Install App Block On Product Template
- Open your theme editor (not the code editor, but the drag-and-drop one by clicking the "Customize Theme" button.
Navigate to your product template.
Click the "Add Block" button, and then find the "Wait.li Waiting List" block - click on that to add it to your product page, and then drag it to wherever you'd like (usually near the product title / pricing).
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!