Skip to content
tt-blocks Docs

Display tab

The “Display” tab uses 9 independent dimensions to decide whether the widget renders. All dimensions are AND: every dimension must match for the widget to appear.

Subtitle: “Display rules” / “Show this widget when all conditions match.”

Image: Display tab overall (left SubNav 9 modules + middle detail panel + right Simulator sidebar)

Top StickyBar

Section titled “Top StickyBar”

Shows current Simulator summary + match status + “Runtime diagnostics” button.

Diagnostic note: “Based on Simulator preview, not actual storefront data.”

Collect-all trace

Section titled “Collect-all trace”

The new version supports collect-all trace — lists all failing dimensions at once, so merchants fix them in one pass. The verdict area:

  • Single dimension fail → shows the corresponding reason (e.g. “Page rule no match”)
  • Multiple dimensions fail → list view with each fail detail (dimension name + reason code)
  • All pass → “Visible”

8 diagnostic reason details: see Troubleshooting.

Image: StickyBar + diagnostic modal

9 dimensions (left SubNav)

Section titled “9 dimensions (left SubNav)”

In order:

1. Placement

Section titled “1. Placement”
  • Subtitle: “Choose where the widget shows on the storefront.”
  • Main dropdown: “Show on?” (Storefront / Checkout)
  • “Mount mode?” (Auto / Manual (theme block))
  • “Position” select (varies by mode) — 7 cards, see Placement modes
  • Custom position mode: shows widget ID + embed code + “Add to theme” jump
  • Checkout tip: “Add the widget in the Shopify checkout editor; Shopify limits each store to one checkout block.”

2. Pages

Section titled “2. Pages”
  • Subtitle: “Limit to specific page types.”
  • All / Custom toggle
  • Custom: checkboxes
    • Home (/), Product (/products/…), Collection (/collections/…), Blog (/blogs/…), Article (/blogs/…/…), Cart (/cart), Search (/search), Page (/pages/…), Password (/password), 404

3. Products

Section titled “3. Products”
  • Subtitle: “Filter by products, collections, tags, vendors, or types.”
  • All / Custom toggle
  • Products: “Include products” / “Exclude products”
  • Collections: “Include collections” / “Exclude collections”
  • Type / Vendor / Tags: tag input
  • Free tier: max 1 product / 1 collection (demo quota)

4. Customers

Section titled “4. Customers”

UI redesigned in recent versions (commits f5bbea6 / 04ea38a):

  • Login state (authState SegmentControl): All visitors / Guests only / Logged-in customers only
    • When “Guests only” is selected, customer fields below auto-grey-out
  • Customer tags: tag input (“Add tag…”)
  • Total spent: amount range
  • Order count: number range (suffix “orders”)

5. Geo

Section titled “5. Geo”
  • All / Custom toggle
  • Country picker — replaced old ISO text input
    • Search by ISO-2, displays flags + country names

6. Device

Section titled “6. Device”

UI redesigned:

  • All / Custom toggle
  • Device type (SegmentControl): Mobile / Desktop
  • ❌ OS subset UI removed (iOS / Android / Windows / macOS sub-options no longer exposed); evaluator still supports, UI deferred
  • ctx field: deviceOs added, aligned with evaluator contract

7. Schedule

Section titled “7. Schedule”
  • Start: Now / Specific time (12-hour time picker)
  • End: Never / Specific time
  • Timezone hint
  • schedule.enabled derived (no manual toggle needed)

8. UTM (Pro, traffic)

Section titled “8. UTM (Pro, traffic)”
  • All / Custom toggle
  • Bulk input area (“Browse common” popup: utm_source / utm_medium common values checkboxes)
  • Standard UTM rows: source / medium / campaign / term / content (each row Include / Exclude)
  • Custom UTM rows: appear after fill, × to delete
  • Session persistence: landing page UTM is stored in sessionStorage; subsequent pages read from sessionStorage as fallback (see UTM targeting)

9. Hide theme elements (Pro)

Section titled “9. Hide theme elements (Pro)”
  • “Hide page elements”: multi-line CSS selector input (one per line, e.g. .announcement-bar / #popup-overlay)

Image: each dimension’s local screenshot (9 images)

Numeric input tolerance

Section titled “Numeric input tolerance”

Range / number inputs across dimensions have unified tolerance:

  • min > max auto-swap — reversed input is auto-corrected
  • Reject negatives — values can’t be < 0
  • step 1 — integer input step

Right Simulator sidebar

Section titled “Right Simulator sidebar”

Fill virtual customer profile to preview rule matches. Recently redesigned (commit f5bbea6):

  • Title: “Simulator”
  • Subtitle: “Toggle below values to see live rule responses; doesn’t affect saving.”
  • “URL” (“Paste a real link to auto-parse page type + UTM params (utm_source / medium / campaign etc.).”, placeholder https://shop.com/products/foo?utm_source=tiktok)
  • “Device” (SegmentControl)
  • “Login state” (authState SegmentControl, customer fields below grey out in Guest mode)
  • “Country” (country picker, same as Geo dimension)
  • “Customer tags” (“Add tag…”)
  • “Total spent ({currency})” / “Order count” (suffix “orders”)

Image: Simulator sidebar closeup