Wait.li Installation (Old)
Wait.li tries to auto-install on your current active theme, but if that doesn't work follow the instructions below to get Wait.li up and running quickly!
1. Open your Shopify theme code editor.
While logged into your Shopify admin, click "Online Store" and you will be shown the "Themes" screen below. Click "Actions" on your active theme and then select the "Edit Code" option to open the code editor of your Shopify theme.
2. Ensure that the auto-created Wait.li snippets are in place.
On the left hand of the code editor you will see all the theme's files. Scroll down to the "Snippets" folder and ensure that the files "wait_li_config.liquid" and "wait_li_button.liquid" are there.
If those files do not exist, please follow the Manual Snippet Installation document, and then return here.
3. Open your product page template and insert the Wait.li config code
This step will vary depending on the theme you have installed on your Shopify store.
The goal of this step is to find the template file that corresponds to your product page and insert a small snippet of code at the very top of this page.
The product template file should be named like one of the following:
- product-template.liquid
- product.liquid
If you are using one of the following themes, the file should be named 'product-template.liquid' within the "Sections" folder:
- Debut
- Pop
- Minimal
- Supply
- Brooklyn
- Simple
- Boundless
- Venture
- Narrative
- Jumpstart
4. Locate your product "Add To Cart" form and insert the required code
Next you need to scroll down through the product template file and try to find a line that says something about a "form".
TIP: Try to search (CTRL + F) through the template for the word "form".
Once you locate the product form, we need to add two simple code snippets before and after the product form.
Our example product form looks like this:
{% form 'product', product, id:form_id %} // Add To Cart code will be here {% endform %}
Once you locate your product form, you need to copy the following code and paste it just above the product form code:
{% comment %} Wait.li Button 1/4 {% 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 -%}{% if wait_li_active == 'true' and show_waiting_snippet == 'true' %}{% render 'wait_li_button', product: product, is_customer: is_customer, customer_status: customer_status %}{% else %}{% comment %} Wait.li Button 2/4 {% endcomment %}
The final step is to paste in one more small snippet of code just below the end of the product form code:
{% comment %} Wait.li Button 3/4 {% endcomment %}{% endif %}{% comment %} Wait.li End 4/4 {% endcomment %}
Here is a basic example using our product form code from above.
{% comment %} Wait.li Button 1/4 {% endcomment %}{% capture 'wait_li_capture' %}{% render 'wait_li_config' %}{% 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 -%}{% if wait_li_active == 'true' and show_waiting_snippet == 'true' %}{% render 'wait_li_button', is_customer: is_customer, customer_status: customer_status %}{% else %}{% comment %} Wait.li Button 2/4 {% endcomment %} {% form 'product', product, id:form_id %} //Add To Cart code will be here {% endform %} {% comment %} Wait.li Button 3/4 {% endcomment %}{% endif %}{% comment %} Wait.li End 4/4 {% endcomment %}
Once this is in place, click "Save" in the top right corner and you are complete!
That's all! After saving the file, load a product page on your Shopify store and make sure that there are no errors that pop up. If everything looks good, you can continue on to create a product waiting list!