Manual Snippet Installation

Wait.li automatically creates and installs a few different code snippets on your active Shopify theme. If for some reason this doesn't automatically happen, or if you just want to install everything by hand, the following instructions will help you.

After completing this tutorial, we suggest you to go to our Wait.li Installation Tutorial next, which will help you with the final steps of the Wait.li installation.

Let's get started!

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. Create a new snippet called wait_li_button.liquid

Within the code editor, scroll down on the left sidebar until you see the folder named Snippets.

Click the Snippets folder and you will see a group of files display beneath the folder name.

You will also see a link that says "Add a new snippet". Click this link and a popup will display asking you to name your new file.

Name this new file exactly as follows:

wait_li_button.liquid

Once you have named the file, click the "Create snippet" button.

3. Paste in the required code

Once the snippet has been created, you will see an empty code editor.

Please paste in the entire following section of code, highlighted with the grey background colour in your browser.

<code>{{< highlight html >}}

<div id="wait_li_form" class="wla_form">
  {% if is_customer == true %}
    {% if customer_waiting %}
     <p class="wla_text">{{ full_currently_waiting_text }}</p>  
    {% else %}
      <p class="wla_text">{{ full_sign_in_text }}</p>
      {{ join_text }}
      <p id="wla_text"></p>
    {% endif %}
  {% else %}
    <p class="wla_text">{{ full_sign_in_text }}</p>
    {{ join_text }}
    <a href="#" id="wait_li_login_trigger" class="wla_login_text">or Sign In To Check Status</a>
  {% endif %}
</div>
<div id="wait_li_success">
  <p id="join_success_text">{{ success_text }}</p>
</div>

{{< /highlight >}}

After you have pasted the code in, make sure you click "Save" in the top right corner of the page.

4. Create another new snippet called wait_li_config.liquid

Once again, click "Add a new snippet" and this time name the snippet exactly as follows:

wait_li_config.liquid

Once created, please paste in the following code:

{{< highlight html >}}

<code>{% comment %}
    Wait.li Config File + Variables
    DO NOT TOUCH THIS FILE.
{% endcomment %}

{% assign wait_li_product_metafield = product.metafields.wait_li.list_data %}
{% assign list_count = wait_li_product_metafield.list_count %}

{% if wait_li_product_metafield.status == 'active' %}
    {% assign wait_li_active = true %}
  {% assign atc_status = 'hide' %}
{% else %}
    {% assign wait_li_active = false %}
  {% assign atc_status = 'show' %}
{% endif %}

{% assign wait_li_product_id = product.id | downcase %}
{% assign wait_li_customer_metafield = customer.metafields.wait_li[wait_li_product_id] %}

{% assign customer_status = wait_li_customer_metafield.customer_status %}
{% assign customer_position = wait_li_customer_metafield.customer_position %}

{% comment %}
    Display Settings 
{% endcomment %}

{% assign wait_li_settings = shop.metafields.wait_li.settings %}

{% if wait_li_settings.sign_in_text != blank %}
    {% assign sign_in_text = wait_li_settings.sign_in_text %}
    {% assign full_sign_in_text = sign_in_text | replace: "list_count", list_count %}
    {% if list_count == 1 %}
       {% assign full_sign_in_text = sign_in_text | replace: "list_count", list_count | replace: "people", "person" | replace: "are", "is" %}
    {% endif %}
{% else %}
    {% assign sign_in_text = "There are currently list_count people on the waiting list. Click the button below to join!" %}
    {% assign full_sign_in_text = sign_in_text | replace: "list_count", list_count %}
    {% if list_count == 1 %}
       {% assign full_sign_in_text = sign_in_text | replace: "list_count", list_count | replace: "people", "person" | replace: "are", "is" %}
    {% endif %}
{% endif %}

{% if wait_li_settings.currently_waiting_text != blank %}
    {% assign currently_waiting_text = wait_li_settings.currently_waiting_text %}
    {% assign full_currently_waiting_text = currently_waiting_text | replace: "current_position", customer_position %}
{% else %}
    {% assign currently_waiting_text = "You are currently #current_position on the waiting list. Please keep an eye on your inbox." %}
    {% assign full_currently_waiting_text = currently_waiting_text | replace: "current_position", customer_position %}
{% endif %}

{% if wait_li_settings.join_text != blank %}
    {% assign join_text = wait_li_settings.join_text %}
{% else %}
    {% assign join_text = "Join Waiting List" %}
{% endif %}

{% if wait_li_settings.success_text != blank %}
    {% assign success_text = wait_li_settings.success_text %}
{% else %}
    {% assign success_text = "Congratulations! You are now on the waiting list, please check your inbox for our confirmation email!" %}
{% endif %}

{% if wait_li_settings.button_colour != blank %}
    {% assign button_colour = wait_li_settings.button_colour %}
{% else %}
    {% assign button_colour = "#3d85c6" %}
{% endif %}

{% if wait_li_settings.button_text_colour != blank %}
    {% assign button_text_colour = wait_li_settings.button_text_colour %}
{% else %}
    {% assign button_text_colour = "white" %}
{% endif %}

{% if wait_li_active %} 

  {% if customer %}

      {% assign is_customer = true %}

      {% if customer_status == 'waiting' %}

        {% assign show_waiting_snippet = true %}

        {% assign customer_waiting = true %}

      {% elsif customer_status == 'active' %}

        {% assign show_waiting_snippet = false %}
        {% assign atc_status = 'show' %}

      {% else %}

        {% assign show_waiting_snippet = true %}

      {% endif %}

  {% else %}

      {% assign is_customer = false %}

      {% assign show_waiting_snippet = true %}

  {% endif %}

{% endif %}

<div id="wait_li_modal" class="wait_li_modal">
  <div class="wait_li_modal_content">
    <div class="tabs">
      <div class="tab">
        Register
        <div class="tab-content">
          <div id="tab_success">
            <br /><p>{{ success_text }}</p>
          </div>
          <div id="register_form">
            <div class="section-header section-header--large">
                <h1 class="section-header__title">Register Account</h1>
            </div>
            <div id="CustomerRegisterForm" class="wait_li_form">
              <div class="wla_input wla_first_name">
                <span id="wl_customer_first_name_error"></span>
              </div>
              <div class="wla_input wla_last_name">
                <span id="wl_customer_last_name_error"></span>
              </div>
              <div class="wla_input wla_email">
                <span id="wl_customer_email_error"></span>
              </div>
              <div class="wla_input wla_password">
                <span id="wl_customer_password_error"></span>
              </div>
              Register &amp; Join Waiting List
              <span id="error_field"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="tab">
        Sign In
        <div class="tab-content">
            <div id="CustomerLoginForm" class="wait_li_form">
              {% form 'customer_login' %}

                <div class="section-header section-header--large">
                  <h1 class="section-header__title">Sign In</h1>
                </div>

                {{ form.errors | default_errors }}

                Sign In
              {% endform %}
            </div>
        </div>
      </div>
    </div>
  </div>
</div>



{% comment %}
    End of Wait.li Config Snippet 
{% endcomment %}
{{< /highlight >}}

Once again, please make sure to click "Save" in the top right hand corner of the page to ensure the snippet is created properly.

That is all! If you'd like to continue with the manual Wait.li installation method, please click here to go to the Wait.li Installation Tutorial.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us