← All demos

Tech-touch dynamic tables

Liquid logic

Stensul dynamic product tables driven by Liquid SKU conditionals.

Type
Liquid logic
Status
Exploration
Tickets
DESYS-1024
Stack
Stensul Liquid, HTML
Owner
Bill Dingwall
Created
2026-07-08
Updated
2026-08-28

Context

Investigates whether dynamic product tables in Stensul emails can be driven by Liquid logic — mapping a product SKU to the right product name, family, and support/community/ academy links — so a single template renders the correct table per product without a hand-built variant for each. This is the core exploration for DESYS-1024.

Approach

code/dynamic-table.html is the runnable artifact: Liquid {% assign %} / {% if %} blocks resolve a SKU to its product metadata, then render the table rows from those variables. research/logic-block/ holds successive snapshots of the endpoint logic (SKU removal, customer-facing-name usage), content/ holds the sample data (content-values.md → json-mock-data → liquid-logic-data, plus the -parsed and -conditional Liquid variants), and research/table-patterns/ collects the table-pattern variants tested against the token constraints.

Findings

  • SKU-to-name mapping via Liquid conditionals is viable for the tech-touch set.
  • Keeping the mapping in one logic block (rather than per-row) is what makes the template
  • maintainable as the SKU list grows.

1. interactive/
  • token-denial-email.html ▶
2. code/
  • build-email.cjs
  • dynamic-table.html
  • full-email-template.html
3. content/
  • content-values.md
  • json-mock-data
  • json-mock-data-updated
  • liquid-logic-data
  • liquid-logic-data--final
  • liquid-logic-data-conditional
  • liquid-logic-data-parsed
  • xd-json-example
4. research/
  • logic-block/
    • 08-27-26-snapshot
    • full-tech-touch-JSON.json
    • hybrid-tech-touch-endpoint-example.json
    • hybrid-tech-touch-endpoint-usage.md
    • update1-using-customer-facing-name.md
    • update2-product-name-cleanup.md
    • update2-removing-the-sku-logic.md
  • table-patterns/
    • assets/
      • mobbin-alert-tables/
        • 01-sentry.webp
        • 02-aws.webp
        • 03-clay.webp
        • 04-vanta.webp
        • 05-airwallex.webp
        • 06-clickup.webp
        • 07-fresha.webp
        • 08-vapi.webp
        • 09-rox.webp
        • 10-semrush.webp
        • 11-hotjar.webp
        • 12-klaviyo.webp
        • 13-zendesk.webp
        • 14-wrike.webp
        • 15-cloaked.webp
        • 16-supabase.webp
        • 17-shopify.webp
        • 18-melio.webp
        • 19-folk.webp
        • 20-base44.webp
      • mobbin-alert-tables-mobile/
        • 01-premier-league.webp
        • 02-yuka.webp
        • 03-mercedes-benz.webp
        • 04-superpower.webp
        • 05-attio.webp
        • 06-fidelity.webp
        • 07-bloomberg.webp
        • 08-jira-cloud.webp
        • 09-craft.webp
        • 10-brave-browser.webp
        • 11-flighty.webp
        • 12-bevel.webp
        • 13-notion.webp
        • 14-turo.webp
        • 15-equinox.webp
        • 16-tradingview.webp
        • 17-mydyson.webp
        • 18-monday.webp
        • 19-bluesky.webp
        • 20-formula1.webp
    • mobbin-alert-table-patterns-mobile.md
    • mobbin-alert-table-patterns.md
  • variables-doc