Theme Triggers

Overview

Flair theme triggers refresh Flair when dynamic content changes in your Shopify theme, such as variant changes, cart updates, or content from apps and custom integrations. This keeps your badges and banners accurate as shoppers interact with your store.

• Presets - ready-made triggers for popular Shopify themes.
• Event - refresh Flair when your theme fires a JavaScript event, such as variant:update.
• Content - refresh Flair when content on the page changes, such as the cart count.

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

Frequently Asked Questions