⚠️ Before You Begin

If your store uses an Online Store 2.0 theme (such as Dawn), we recommend using the App Block integration instead of manual code.

For Online Store 2.0 themes, you have two integration options:

• ✅ Recommended: Add the button using App Blocks.
• 📝 Alternative: Integrate the button manually using the steps in this guide.

Note: If you're using a vintage Shopify theme, continue with the instructions below.

🚀 Manual Integration Steps

1️⃣ Open Your Shopify Admin and Edit Your Theme Code

From your Shopify Admin, navigate to:

Online Store → Themes On your published theme: Select Edit code

2 Locate the Product Template

Open the following file:

Sections → main-product.liquid

Depending on your theme, the product template may be located in a different file.

4️⃣ Find the "Add to Cart" Button

Search for your theme's Add to Cart button by pressing:

• Ctrl + F (Windows)
• ⌘ + F (Mac)

Look for code similar to:

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

The exact code may vary depending on your Shopify theme. Look for a <button> or <input> element containing text such as:

• AddToCart
• add-to-cart
• Add to Cart

📌 Can't Find It?

Some Shopify themes store the product form in a different file. If you can't locate the button in product-template.liquid, check one of the following:

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

5️⃣ Add the Watchlyst Button

Immediately below the Add to Cart button, insert the following code:

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

This will display the Watch Price button directly beneath the Add to Cart button in an inline position.

6️⃣ Save Your Changes

Click Save to apply your changes.

🎉 That's It!

The Watch Price button will now appear on your product pages, allowing customers to subscribe to price drop notifications directly from your Shopify storefront.

💡 Tips

• 📍 The button is displayed inline by default.
• 🎨 You can customise the button's appearance, position, and styling anytime from the Watchlyst app dashboard.
• 🧪 After saving your changes, visit a product page to verify that the button is displayed correctly.

💬 Need Assistance?

If you're unable to locate the correct theme file or need help positioning or customising the Watchlyst button, our support team is happy to help.

📧 Email: [email protected]