Skip to main content

Dynamic Content Monitor - User Guide

Updated

What is the Dynamic Content Monitor?

The Dynamic Content Monitor is an advanced feature designed for Shopify stores with dynamic product pages that change content without full page reloads (common in modern themes with AJAX/variant selectors). It ensures your size chart button stays visible even when the page content updates dynamically.

When Do You Need This Feature?

You should enable the Dynamic Content Monitor if:

  • Your size chart button disappears when customers select different product variants (color, size options)
  • Your theme uses AJAX variant selectors that reload portions of the page
  • Your product form is dynamically regenerated when customers interact with it
  • You're using a modern Shopify theme with reactive product forms

How to Enable It

  1. Go to Settings in your SmartSize dashboard
  2. Under Button Display Options, select "Inline" display mode
  3. Choose "CSS Selector (Advanced)" as your insertion method
  4. Configure your CSS selector (where the button should appear)
  5. Scroll to "Button Injection Options"
  6. Check the box: "Enable Dynamic Content Monitor"
  7. A new field appears: "Selector to Observe"

Choosing the Right Selector to Observe

The "Selector to Observe" is the parent container that gets updated dynamically on your product page. Here's how to find it:

Step-by-Step Guide:

1. Open Your Product Page

  • Go to your live Shopify store
  • Open any product page in your browser

2. Open Browser Developer Tools

  • Right-click anywhere and select "Inspect" (or press F12)
  • This opens the browser's developer tools

3. Find the Dynamic Parent Container

  • Look for a container that wraps BOTH:
    • Your variant selectors (size/color options)
    • Your Add to Cart button
    • The area where your size chart button appears

4. Common Selectors to Try:

.product-form
.product-form__input
#product-form
.product-single__form
[data-product-form]
.shopify-product-form

5. Test Your Selector:

  • In the developer tools Console tab, type:

    document.querySelector('.product-form')
  • If it highlights the correct container, that's your selector!
  • If it returns null, try a different selector

What Makes a Good Selector?

✓ Good Selector Characteristics:

  • Wraps the entire product form area
  • Stays in the DOM (doesn't get removed/recreated)
  • Contains all variant selectors and buttons
  • Has a unique class or ID

✗ Avoid These:

  • Selectors that change on every page (#product-123456)
  • Elements that get completely removed/recreated
  • Too broad (like body or .container)
  • Too specific (targets only one small element)

Real-World Examples:

Example 1: Dawn Theme (Shopify's default)

CSS Selector: .product-form__input
Selector to Observe: .product-form

Example 2: Custom Theme with Data Attributes

CSS Selector: .variant-selector
Selector to Observe: [data-product-form]

Example 3: Theme with Unique ID

CSS Selector: .size-selector
Selector to Observe: #product-form-main

 

Not sure you selected a good selector? 

Test it by following these instructions: How to test if a CSS selector is stable during variant changes

 

How It Works

Once configured, the Dynamic Content Monitor:

  1. Watches the parent container you specified
  2. Detects when content inside changes (variant selections, AJAX updates)
  3. Automatically repositions your size chart button to stay visible
  4. Prevents duplicate buttons from appearing
  5. Reacts instantly to page changes (0ms delay for smooth UX)

Troubleshooting

Problem: Button still disappears

  • Try selecting a higher-level parent container (go one level up in the HTML structure)
  • Verify your "Selector to Observe" actually contains your "CSS Selector" target

Problem: Multiple buttons appear

  • Your selector might be too broad
  • Try a more specific parent container
  • Ensure you're observing a static container (one that doesn't get recreated)

Problem: Button appears and disappears rapidly

  • The container might be getting recreated entirely
  • Try observing the parent of that container instead

Advanced Tips

Testing Your Configuration:

  1. Set up both selectors
  2. Save your changes
  3. Go to your product page
  4. Change variants several times (color, size options)
  5. Verify the button stays in place and doesn't duplicate

Finding Selectors Without Developer Tools:

Some themes document their structure. Check:

  • Your theme's documentation
  • Theme support articles
  • Contact your theme developer

When Dynamic Monitor Isn't Needed:

You can skip this feature if:

  • Your button uses App Block insertion method (it's already dynamic-aware)
  • Your button uses Code Snippet insertion method
  • Your theme does full page reloads when variants change
  • Your button never disappears with the basic setup

Quick Reference Card

Setting What to Enter Example
Display Mode Inline (Select from options)
Insertion Method CSS Selector (Select from options)
CSS Selector Where button appears .product-form__input
Enable Monitor ✓ Checked (Checkbox)
Selector to Observe Parent container .product-form

Need Help? If you're having trouble finding the right selectors, contact SmartSize support with:

  • Your Shopify store URL
  • Your theme name
  • A screenshot of your product page with developer tools open

Related articles

Powered by Zendesk