Integration for Inline Position

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>HTML

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
  

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 at [email protected]  We will do the integration for you.)