Inline Notification Install Code for Product and Collection Pages

Inline notifications sit inside your page, next to the product, instead of floating in a corner. Before you can show them, add one small code snippet to your theme: one for product detail pages and one for collection pages.

This guide covers both. Shopify, WooCommerce, Magento and BigCommerce each get their own snippet in the dashboard; other platforms use the generic one.

1Step 1: Create an Inline Notification Setup

• Log in to your WiserNotify dashboard.
• Navigate to the Inline Notification section.
• Choose where to show inline notifications: product detail pages or collection pages (e.g., recent sales, product visits, or stock counters).
• Click the Add new website button and enter your website name.
• Click the Install Now button to get the integration code.

 

2Step 2: Generate the Code

1. Select the platform you are using:
   • Shopify
   • WooCommerce
   • Magento
   • BigCommerce
   • Others
2. WiserNotify generates a platform-specific code. The product page and collection page snippets are different:
   • Product detail page (Shopify): <div data-id="{{ product.id }}" class="wn_ecomm_embed_pdp_{{ product.id }} wn_ecomm_snippet pdp"></div>
   • Collection page (Shopify): <div data-id="{{ product.id }}" class="wn_ecomm_embed_{{ product.id }} wn_ecomm_snippet catalog"></div>
3. Copy the code by clicking on the green “Copy code” button. Always copy it from the dashboard, since each platform uses its own product ID variable.

3Step 3: Add the Code to Your Product Detail Page

1. Go to your website’s admin panel or file editor:
   • Shopify: Access the product-template.liquid file in your theme editor.
   • WooCommerce: Go to the single-product.php file or use a custom code editor.
   • Magento/BigCommerce: Access the product page template via your theme files.
2. Paste the Code into the appropriate location:
   • Place the inline code where you want the notification to appear, for example near the Add to Cart button, below the product image, or above or below the product title.

4Step 4: Add the Code to Your Collection Page

1. Copy the collection page snippet from the dashboard.
2. Open the template that renders each product card in your collection or category grid, and paste the snippet inside the product loop, so every product card gets its own snippet.
3. Place it where you want the message to appear on each card, for example under the product name or price.

5Step 5: Verify the Inline Notification

1. Open a product detail page and a collection page on your live website.
2. Check for the inline notification. It should display messages like:
   • “John S. from New York bought this item 30 minutes ago.”
   • “5 people viewed this item in the last hour.”
3. Ensure the notification updates dynamically based on real-time data.