Viewer Username

How to enable Customer Messages

In order for Stream Alerts to include your customer’s messages, we need to add a custom text box to your Shopify Cart Page.

This requires editing your themes cart.liquid template.

Do it yourself:

Step 1: Click Online Store

Step 2: Click Actions

Step 3: Click Edit Code

Step 4: Search for cart.liquid, and possibly cart-template.liquid

Step 5: Insert the code below for the Customer Message and/or Viewer Username input boxes. This code should go somewhere before the checkout button and can be styled however you want if your coding skills allow it. For Debut themes or 1.0 use this code. 2.0 Themes code is listed further down.

<!----Viewer Username Input---->
  <p class="cart-attribute__field">
    <label for="viewer_username">Viewer Username:</label>
    <input id="viewer_username" type="text" name="attributes[viewer_username]" value="{{ cart.attributes["viewer_username"] }}">
  </p>

  <!-- Customer Message Input -->
  <p class="cart-attribute__field">
    <label for="viewer_message">Message to appear on stream:</label>
    <input id="viewer_message" type="text" name="attributes[viewer_message]" value="{{ cart.attributes["viewer_message"] }}">
  </p>

Step 6: Save changes.

Step 7: Let the viewers get their recognition.

For 2.0 Shopify themes

Similar instructions as before besides you will look for “main-cart-footer.liquid” 

Use this code listed below. 

Remember MAKE A COPY of your store, before you do any changes to your code. 

 

<!----Viewer Username Input---->
  <p class="cart-attribute__field">
    <label for="viewer_username">Viewer Username:</label>
    <input form="cart" id="viewer_username" type="text" name="attributes[viewer_username]" value="{{ cart.attributes["viewer_username"] }}">
  </p>

  <!-- Customer Message Input -->
  <p class="cart-attribute__field">
    <label for="viewer_message">Message to appear on stream:</label>
    <input form= "cart" id="viewer_message" type="text" name="attributes[viewer_message]" value="{{ cart.attributes["viewer_message"] }}">
  </p>