Theme Triggers

Use Theme Triggers to refresh Flair promotions automatically when the cart or variant changes.

How to create a theme trigger

• Visit Settings and click Theme Triggers.
• Click Add trigger.

Then choose a trigger type:

• Presets
• Event
• Content

Presets

Use trigger presets based on popular themes.

• Choose a Theme name.
• Then choose one or more presets.
• And click Save.

Event

Listen for JavaScript events on the page.

• Enter a Description.
• Enter the Event name. This supports built-in events (e.g., change, click) and custom events (e.g., cart:update, variant:update).
• Choose the Target:
  • Document - listen to events on the entire document.
  • Element - listen to events on specific elements.
• If the target is Element:
  • Specify the CSS selector for the Target elements, separated by commas.
  • Optionally specify the CSS selector for the Attach to element. This defaults to document if not specified.
  • Enter a delay in milliseconds to wait before refreshing Flair. Set to 0 to refresh immediately.
• Click Save.

Content

Observe content changes (mutations) on the page.

• Enter a Description.
• Specify the CSS selector for the Target elements, separated by commas.
• Optionally select Observe child elements (subtree) to also watch for content changes for all children.

Example triggers

Dawn cart update trigger

• Type: Content
• Event name: change
• Target elements: ".cart-icon-bubble"

Dawn variant update trigger

• Type: Event
• Event name: change
• Target: Element
  • Target elements: ".product-variant-id"

Horizon cart update trigger

• Type: Event
• Event name: cart:update
• Target: Document

Horizon variant update trigger

• Type: Event
• Event name: variant:update
• Target: Document