This guide will walk you through the simple process of integrating The Watchlyst app for displaying the button in inline position.


Note:

If you are using the Online Store 2.0 themes (like Dawn Theme) then you have 2 options for getting the button displayed on product pages:

  1. via app blocks. Installation guide available here.  OR
  2. by adding integration code to the theme. Guide available here.


For older vintage themes continue with the instructions below.


Steps:


1. Open your Shopify admin.

2. Click Online Store.

3. Click Themes.

4. Click Actions for your published theme.


5. Click Edit code.



6. Click the file product-template.liquid which appears under Sections.


   

7. The product-template.liquid file will open in the online code editor. In the online code editor window, locate the HTML for your add-to-cart button (you can do this by searching with CTRL-f or COMMAND-f). The HTML for your add to cart button will look something like this:


 <button type="submit" name="add" id="AddToCart" class="btn">
   <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
 </button>


The actual code may appear slightly different between themes. The trick is to find an <input> or <button> tag that includes something like 'Add to Cart', 'AddToCart' or 'add-to-cart' etc.


NOTE: If the above code is not found in the product-template.liquid file, it could be found in any one of the following files (it is theme dependent):

  • Templates / product.liquid
  • Snippets / product-form.liquid
  • Sections / product.liquid
  • Snippets/product-options.liquid


(If you are having problems or want to customize the button please contact support@thewatchlyst.freshdesk.com. We will do the integration for you.)


8. On the very next line, add the following code.


<div id="thewatchlystalertButton" class="twlbutton twlinline"> </div>


 

9. Hit Save.


(If you are having problems or want to customize the button please contact support@thewatchlyst.freshdesk.com. We will do the integration for you.)