EComposer design system

Components

• Service card · snippets/ec-svc-card: white card, hairline border, rounded-2xl, p-5. Group-tinted 44px icon tile (tilts -6° on hover), name (body-lg 600), one-line promise, footer rule with turnaround + pricing model and a gradient text link. Hover lifts 2px, border fades into shadow-card-hover. Featured = CTA-gradient tag.
• Featured Sidekick card · snippets/ec-svc-feature: simple mini scene on surface-muted (ink merchant prompt bubble, Sidekick reply with one ink check for the Shopify step and one gradient check for the EComposer expert step), then title + one line of copy. The whole card is the link: no inner CTA and no Featured tag (the menu row already carries it); a round ink arrow fades in on hover. In the mega menu it sits above a single full-width "See all services" button.
• Service hero · breadcrumb, group pill with service icon, H1 name, tagline (heading-sm), intro, Start your project (brand CTA) + Ask a question (secondary), and a 4-up facts strip (Pricing, Turnaround, Revisions, First reply) built as a 1px-gap grid on the border colour. Visual (snippets/ec-svc-visual): Sidekick scene (store page, chat, expert review) or the matching real app mockup; development services show a code card.
• Section nav · sticky pill row under the floating header (follows it as it hides and returns); the pill of the section in view turns ink (aria-current). Steps · 5 white step cards on a hairline rail, ink number tiles, the last one in the CTA gradient. Included list uses ink check dots; Not included sits on surface-secondary with grey crosses.
• Long-term partner band · snippets/ec-svc-partner: ink panel, CTA-gradient eyebrow, three stage cards (Launch, Settle in, Every month); each header ends in a short fading connector inside the card (never a line across cards or text), EComposer perks row, white button to the Growth partner plan. Same band on the hub and every service page.
• Project brief · snippets/ec-svc-brief: a real Shopify contact form on a white card inside a surface-secondary panel. Fields use the hairline border, rounded-xl and an ink focus border; the current service is preselected. Extra fields (Store URL, Service, Budget, Timeline, Page) arrive in the contact email.
• FAQ · details[data-ec-smooth][name=svc-faq] rows in one bordered card; the round plus turns 45° to a cross when open and back as soon as closing starts (.svc-faq.is-closing).

• Calculator card <ec-aff-calc>: rounded-3xl white card, shadow-xl. Range slider (accent-on-surface), plan pills (rounded-xl hairline, checked = ink border + inset ring), Monthly/Yearly segmented toggle (ink thumb). Results on surface-secondary, rates row underneath, estimate note in 12px secondary.
• Math: monthly = N x price x 25.8 for year one (50% once + 30% recurring per cohort), month-12 run rate N x price x 3.8; yearly = N x 12 x yearly bill x 30%. Prices from ec_pr.plan (25/49/129 monthly, 228/468/1,236 yearly). Always show the estimate note.
• Commission ladder bars: month 1 = CTA gradient bar, later months = ink bars at 60% height, data-anim grow. Never chart numbers the program does not promise.
• Terms band: ink rounded-3xl with the two CTA-gradient radial glows (same as pricing partner card), 2x2 hairline grid of plain-language rules.
• Apply CTAs = brand gradient CTA to intoelite.com (UTM-tagged, data-utm affiliate-*). No open-store link here: it belongs under install CTAs only. Final CTA = shared ec-final card.

• Editor replica: the real Add elements panel (rail, group counts, Element Preset column) in white cards with #E3E5E8 hairlines, ink active states and a blue drop line for the dragged element. Library <ec-el-lib>: one white card, 3 panes on lg: group radio list (surface-secondary active row, counts) · search + scrollable 2-col element rows (ink icon chip when hovered/current, link to /pages/docs/<handle>) · preview pane with a dotted #F1F2F4 canvas showing the element mock (snippets/ec-el-preview, one per kind, swaps with .tl-in) plus group, group description and guide link. Under lg: chip row, list scrolls in the card, no preview. Selling demos bento: shadow-card cards, each a small working demo (live countdown, draggable Image Comparison, Hotspot, Spin Wheel, Free Shipping Bar fill, click-to-copy Coupon Codes). Small tags use the brand gradient.

• Order: hero (H1 + Become our partner gradient CTA + Explore partners, 3-cell stats dl counted from the data, 5×3 logo mosaic with the ink EComposer mark in the centre, corner tiles at 60%) → deals on surface-secondary → directory → why bento → programs → quotes → shared final CTA.
• Deal banner keeps its native 608:800 ratio (never cropped; sticky beside the cards on desktop). Deal card: white rounded-card + shadow-card, 56px borderless logo tile, redeem / who can apply in a surface-secondary dl, coupon chip = dashed ink hairline pill in mono that turns solid ink with a check for 1.6s after copy (ec-copy-code element, aria-live). Deal and affiliate links are rel sponsored and data-utm off.
• Directory (ec-partners element): sticky sidebar (44px pill search, category radios with icon tile + count; ink chip row on mobile, surface-secondary row on desktop; no Integrated switch, merchant removed it) + 3-column card grid, 12 per batch, Load more uses .tl-in, filter changes use View Transition / .tl-swap, empty state and Clear filters enter/leave via ecMotion. Hash #cat=&q=.
• Partner card: hairline border card (whole card clickable via a stretched name link), borderless logo tile, optional coupon chip (dashed mono pill, copies on click, sits above the link), Integrated tag = CTA gradient (top right; inline after the name on phones), 3-line description, footer with category + arrow chip that turns ink on hover; hover lifts 2px to shadow-card-hover. Phones: compact row card, 2-line description, no footer.
• Why bento: every benefit shows a small honest scene of what the partner gets (newsletter email, guest post card, coupon chip, Recommended apps list, ecomposer.io browser, social post, official 50%→30% commission bars). The partner is always a dashed Your app placeholder tile, never a fake brand; real partner logos only as faded neighbours. Ink lead card (newsletter scene + 30k big number) spans 2×2, six white cards, the last two span 2 columns with the scene beside the title. Hover lifts the scene 4px. Programs: 3 cards, Affiliate is the recommended one (ink ring, gradient icon + gradient CTA), others secondary buttons to the contact page.

• Earnings card (ec-agency-calc element): rounded-3xl white card, shadow-xl. Clients slider (accent-on-surface) + plan pills (same as affiliate). Results on surface-secondary. 12-bar chart: month bars grow to their value (m_bars), the month 1 slice is the CTA gradient, recurring slices are ink. Estimate note always visible.
• Math: each month N new clients pay 100% once, earlier clients pay 20%. Month m = N x price x (1 + 0.2 x (m-1)); year one = N x price x 25.2; month 12 = N x price x 3.2. Monthly prices only (25/49/129), the official page gives no yearly rule.
• Partner type comparison: hairline table in a rounded-3xl card, two columns with ink check / grey dash, sticky column header on desktop. Segmented control (Agency / Freelancer) highlights a column with a surface-secondary wash and sets the apply form type. Requirements row under the table.
• Featured partner cards: white card, 56px logo tile (rounded-xl hairline, real partner logo or initials), name, one-line description, Visit website link (.ec-link). Hover: 2px lift + shadow-card-hover. Outbound partner links keep their own UTM; the ec-utm hosts list does not tag them.
• Testimonial switcher: big quote (heading-md) + avatar tabs (role=tablist). Ink band card; active tab = white ring + glass wash; quotes crossfade in one grid cell (m_quote). Arrow keys move between tabs.
• Apply form: in-page Shopify contact form (Topic = Agency Partner apply), ct-* floating label inputs, partner type radio pills, team size select, gradient submit. All Apply CTAs on the page scroll to #apply; Apply as agency / freelancer preselect the type.

Theme Partner PlanSave $150 $0for 6 months$150 All themes 20Fully compatible 2

UnsenOn ThemeForestBuy theme

• Order: hero (eyebrow pill with theme icon, H1, gradient Browse partner themes → #themes + secondary Get EComposer free (install affiliate link), open-store link + proof strip) → how to claim (3 steps on surface-secondary) → theme gallery → plan features → after-6-months timeline → ink theme-owner band → FAQ (+FAQPage JSON-LD) → shared ec-final.
• Hero visual: the featured partner theme banner (Athora by The4, official 1000:508 banner, rounded-2xl, shadow-xl) with an overlapping white offer card at the end edge (rounded-3xl, shadow-overlay; never covers the banner headline): $0 big + struck $150, CTA-gradient SAVE tag, 3 ink check rows. Ink chat bubble = the real claim message (Theme name + EComposer). Step scenes are honest mini UI on surface-muted: purchase code chip, App Store row with the real 4.9 · 3,400+ rating, live chat request + reply.
• Gallery (ec-tp-themes element): radio filter chips (All / Fully compatible / ThemeForest / Shopify Theme Store / Other) with counts, checked = ink; swaps use View Transition / .tl-swap, hash #themes=value, result count announced via aria-live. Explainer pair above: Compatible (hairline card) vs Fully compatible (ink border + gradient Kalles · Unsen tag).
• Theme card: hairline rounded-card, 59:32 preview (object-top), logo tile inline beside the name (44px, hairline ring, never overlapping the image edge), name + store, Buy theme pill that turns ink on hover; whole card is one stretched link, rel sponsored, data-utm off (partner links keep their own tracking). Fully compatible = CTA-gradient tag top right. Hover lifts 2px to shadow-card-hover.
• Plan: sticky offer card (ring-2 ink, $0 / struck $150, full-width gradient install CTA, pricing text link) beside 14 official features as icon rows. After timeline: 4 stops on a hairline track whose first 3/4 is the CTA gradient; the last stop is a white clock dot. Owner band: ink rounded-3xl with the two CTA-colour glows, 7 benefits in a hairline grid.
• Featured theme spotlight (#athora, above the filter chips): ink rounded-3xl card, official banner 7/12 + content 5/12 (white logo tile, CTA-gradient Featured partner theme tag, H3, 3 white check rows from the banner, surface/10 EComposer bonus row, gradient Get Athora CTA to the Shopify Theme Store + More themes by The4 text link). The same theme is first in the grid with an ink Featured tag. One featured theme at a time.

• Hero · centered eyebrow pill, H1 heading-xl, body-lg, brand CTA + secondary. Team photo in a rounded-3xl media frame (shadow-xl) that zooms from 0.92 to 1 as it scrolls in (m_zoom), with a white glass chip (logo mark + line) on it.
• Stats card · white card with a 1px-gap hairline grid (4 up, 2 on mobile) overlapping the bottom of the photo; numbers heading-lg tabular, count up with .ec-num when in view, suffix (+ / K+) in on-surface-secondary.
• Manifesto · heading-lg statement split into words; words go from 18% to full ink as the paragraph crosses the middle of the screen (m_words).
• Journey · 4 milestones on a hairline rail; the rail fills with the CTA gradient as you scroll (m_journey) and passed markers turn ink. Horizontal on desktop, vertical on mobile.
• Founder card · white card, hairline, rounded-3xl. Portrait keeps its original blob; the quote badge is an ink circle with a white quote mark; m_tilt on hover. Quote body-lg, name 600 + role on-surface-secondary.
• Community = ink rounded-3xl band with the soft CTA-gradient glow (an absolute blurred gradient disc behind the grid, never a grid child): three reasons to join (glass icon tiles), a white button + Notion-style member avatars (ec-avatar seed 1–5, ring-2 ring-on-surface, −8px overlap), and a coded group card (.ab-group, no screenshots: brand cover lit by the CTA glow, name + private · members, tabs, post rows with avatars and topic chips) that tilts with the pointer and rises in part by part. The old Why choose us cards were removed (the hero stats and footer proof already cover trust).
• Built with EComposer marquee · 12 real template thumbnails (ec-tpl-ID files, 770×872, rounded-xl, shadow-card) on a 70s ec-marquee with soft side masks; pauses on hover/focus, the hovered card lifts 6px into shadow-card-hover. Wraps into a scroll row with reduced motion.
• Founder editorial row · 5/7 grid alternating sides; blob portrait on a surface-secondary disc with the ink quote badge and m_tilt; pull-quote heading-md, rest of the quote body-lg secondary, name after a 40px ink rule.
• Our story milestone card v2 · each card opens with a 128px surface-muted graphic (.ab-g): theme windows, the EComposer mark with its year chip and a dragged block, Notion-style member faces + 40,000+ · 150+ chip, and auto-updated rows with gradient checks. Parts ([data-g], stagger --d) rise 6px when the rail reaches the step. Avatars: the shared Notion-style ec-avatar (seed), decorative only.

4 4

• Hero · oversized 4 0 4 (Instrument Sans 600, clamp 7.5–19rem, tracking −0.06em, ink). The 0 is a real EComposer page (ec-demo-matchazen) inside a pill with a 2.2% cta-from→cta-to gradient ring (.ec-nf-zero), decorative and aria-hidden; the H1 is the sentence below it. Soft CTA-gradient glow behind.
• Search · 56px pill (border hairline + shadow-card, ink focus ring) with an ink Search button inside, searches articles + pages; Popular chips reuse ec_search.popular_terms and the search page link chip. Buttons: Brand CTA Browse templates + Secondary Back to homepage.
• Template fan · the homepage library fan (.ec-fan*, m_fan) with 5 real demos, each linking to its page type on /pages/templates; the outer two hide on phones.
• Popular destinations · 4 link cards (.ec-nf-link): white, border hairline, rounded-2xl, shadow-card → shadow-card-hover with a 3px lift, gradient-stroke icon tile (ec-grad-icon) on surface-secondary, arrow glides 4px.

← A/B Testing Pro Feature Create Campaign

Black Friday ● Running Choose the best layout for Black Friday Test TypePage Test Traffic Allocation100% of visitors Redirect BehaviorOne time

C OriginalControl 50% traffic split Visitors4,812 Conversions163 Conv. Rate3.39% Revenue$9,780

Matcha Powder Add to cart Winner V Variant TestVariant 50% traffic split Visitors4,796 Conversions212 Conv. Rate4.42%+30% Revenue$12,720

Performance Summary

Metric	Original	Variant Test
Page Views	6,240	6,198
Add to Cart	610	787
ATC Rate (%)	12.7%	16.4%

• Hero · split layout: copy + gradient CTA + open-store pill on the start, ec-mock-ab results screen (real app labels: Original / Control vs Variant Test, traffic split bar, Visitors, Conversions, Conv. Rate, Revenue, Performance Summary) on the end; illustrative numbers must stay consistent (conversions ÷ visitors).
• Test type cards · white, border hairline, rounded-card, coded mini wireframe on surface-secondary; Page Test carries the app’s Recommended tag (ink outline pill).
• Campaign wizard (ec-abt-steps) · step list = tabs (ink number dot when active, 2px CTA-gradient progress rail), panel = app-style card that swaps with ecMotion.enter; Traffic & variants has a real range slider driving the Control/Test split and the Balanced chip.
• Results bento · 4 report cards (funnel, timeline, element clicks, device donuts) in Original = ink vs Variant Test = cta-to green (#6FE67A; numbers stay ink for contrast); best-practice tips + plan card on an ink band; FAQ (packed q
• a keys) + shared ec-final.

EComposer builder×

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

FreeformDesign with complete freedom – drag and drop elements anywhere on the canvas.✔︎Best for: Hero sections, banners, landing pages.✔︎Full creative control.Insert freeform layout

FlexboxBuild with a flexbox layouts.✔︎Best for: Product pages, blogs, content-heavy sections.*Click a layout to insert it directly.

Explore LibraryPaste from Clipboard⤓ Import *.ecom file Trending templatesSelect demo and get started in no time! FreeCollection Fashion Insert now◉ Footwear Store Insert now◉ Speaker Landing Insert now◉ Drone Insert now◉ Skincare & Wellness Insert now◉ Lumismooth Insert now◉ FreeBeauty Store Insert now◉ Home Decor Insert now◉ ✦ Ask AI to build or edit this page...⌘ I −◫↑

Add SectionDrag and drop a section to your page ⌕ Search Hero Products Collections Content Marketing Other▦ All design sections ♡ My Favorites

HeroChoose a sections to build faster Free ♛ ♛ Free ♛ ♛ Free ♛ Free ♛

First time explore EComposer Editor? Watch details here. EComposer Editor
WalkthroughEComposer Walkthrough▶︎ Learn moreGive feedback Theme partner deal Buy the theme.
Get the rest free.15% off Athora & VelroFree homepage setup6 months free apps The4 BFCM - Your New Theme, With FREE Homepage Setup Pair your EComposer pages with Athora or Velro.

EComposer builder×

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

≡Icon List⊡✣✦⧉↑↓⌫⋮✦ Ask AI to change Icon List...⌘ I −◫↑

Editing Icon List ContentDesignAdvanced ✦ Choose a preset to build faster›Improve the looks of skin firmness›Enhancing the youthful complexion›Promoting radiance and luminance⊕ Add item Icon position ⇤⤒⤓⇥ ✎HTML tag for labelP ▦LayoutHorizontal Items per row↺ ▭ 1 Space Between↺ ▭ 24px ⧉▤⌫

⚠︎ Unsaved changesDiscardSave

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

Template inserted. Want AI to fill in your real content?Fill in my contentNot now

BFCM is live! Save up to 30% on EComposer · Explore deals EComposerFeaturesTemplatesPricingBFCM 2026ServicesBlogResourcesInstall free ✦ Ask AI to build or edit this page...⌘ I −◫↑

⚠︎ Unsaved changesDiscardSave

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

Navigator⊼ ⇲ ⌕ Search...⇔› Section 1⌄ Section 2 Text(4) Heading(1) Text(3) Features(4)› Section 3⌄ Section 4 Heading(1) Text(3)› Flex Container⌄ Section 5 Text(4) Heading(1) Text(3) Product Grid› Section 6

✦ Ask AI to build or edit this page...⌘ I −◫↑

⚠︎ Unsaved changesDiscardSave

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

Manual SaveAuto SaveSales Page in Page Auto saved at 10/28/2026, 9:11:31 AMUntitled in Page Auto saved at 10/21/2026, 5:01:28 PMUntitled in Page Auto saved at 10/21/2026, 4:57:18 PMUntitled in Page Auto saved at 10/21/2026, 4:52:17 PMUntitled in Page Auto saved at 10/21/2026, 4:47:17 PMUntitled in Page Auto saved at 10/21/2026, 4:42:17 PMUntitled in Page Auto saved at 10/21/2026, 4:37:17 PM

✦ Ask AI to build or edit this page...⌘ I −◫↑

EComposer builder×

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

✦ Ask AI to build or edit this page...⌘ I −◫↑

Create a new page× ⚙GeneralThe general settings for current page </>Custom CSS/JSCustom CSS/JS code for current page Page titleSales PagePage slug or human urlsales-pageThe page URL will be: https://your-store.myshopify.com/pages/sales-page Template slug (10/30)sales-page The template will be saved on your theme at templates/page.ecom-the-template-name.json Page visibilityVisible⇕ Use google rich snippetLayoutDefault⇕ SaveSave & publish

ec-mock-live · Updated 28 Oct 2026: shared ec-ed-topbar (hooks: true), #E3E3E3 editor background, full-height rail; story steps unchanged.

1. 1/6Drag and drop any element
2. 2/6Click any text and just type
3. 3/6Fine-tune every device
4. 4/6Find and reorder with the Navigator
5. 5/6Undo anything / restore any version
6. 6/6Publish when you’re ready

Drag & drop Edit Devices Navigator History Publish

<ec-le-stage data-autoplay="3600"> · autoplay mode of the scroll stage: one step per 3.6s while on screen, hover/focus pauses, parts jump, loops; reduced motion = no timer. Without data-autoplay it is the scroll-linked 600svh stage on the Live Editor page.

• Hero · centered: Live Editor pill, display H1, gradient CTA + See it in action (#stage), open-store pill, 3 check notes, proof strip.
• Editor stage (ec-le-stage) · centered heading, then a 600svh section whose sticky frame shows the editor large and centered (width min(100%, 76rem, (100svh − 14.5rem) × 12/7)); scroll progress sets data-le-step 1–6 on the ec-mock-live editor (MatchaZen page): drag a Countdown, inline edit + Ask AI bar, Mobile mode + responsive icon, Navigator tree, History + Undo, Save template → Page published. Per-step groups (.le-l) crossfade with a 6px rise; chrome highlights (device switch, rail icon, Publish ring) are CSS only; editor selection blue #3478D8 stays inside the mockup.
• Under the editor: a 6-part progress bar (ink fill per step, labels, each part scrolls to its step) with a Scroll cue (mouse, looping wheel dot, hidden on step 6), then a small caption (n/6, title, one line) that crossfades.
• Tools bento · 2×2 white cards (ring #E3E5E8, shadow-card) with a coded scene on surface-secondary: Editor configs toggles, Global colors + Typography, Flex Container, Save As Template / Paste from Clipboard / .ecom export. Then FAQ + shared ec-final.

• Route · templates/page.ecom-extensions.liquid renders page Extensions (/pages/extensions) through its existing ecom-extensions suffix. Menu, footer and homepage links point here.
• Hero · split: CRO Extension Hub pill, display H1, gradient CTA + Browse extensions, open-store pill, proof strip; ec-mock cro on the end (redrawn from the doc screenshots: banners, Extension Status, EComposer / Third-party tabs, cards with Free / Basic / Pro badge, Installed, Details / Settings; Ask A Question installs in the animation). Numbers strip · 4 bordered cards, gradient figures.
• Hero · ec-mock cro_hub illustration (many extensions on one page), stats in CTA gradient text.
• Library cards · built-in: snippets/ec-ext-mini scene that replays on hover; third-party: the app's App Store icon.
• Revenue bento · 6 offer-widget cards from shared snippets/ec-ext-visual, identical to the homepage Optimize & Monetize bento.
• Live demo · ink card reusing snippets/ec-ext-stage + .ec-ext-pill (pills open /pages/docs). Library · ec-cro-lib element: segmented tabs .cro-tab (selected ink), chips .cro-chip (pressed ink), search, cards .cro-card (lift 2px, shadow-card-hover, arrow glides 4px), View Transition / .tl-swap swaps, Show all via .tl-in, empty state via ecMotion.
• One app vs many · bordered stack of single-app price pills (.cro-stack, staggered fade-in) vs ink Pro card. How it works · 4 doc steps with mini app scenes. Plans band · ink table from ec_pr.compare (built-in / third-party per plan). FAQ (6, JSON-LD) + ec-final.

⚠︎ Unsaved changesDiscardSave

☰LiveEComposer Canvas by Henry Pages › PageDrop ⌄ Publish

Page Audit⊼

Optimize Page HealthPage Optimization tool by EComposer

14/22 Page Health Score8 criteria need attention

● 2 criteria failed4 issues ›

● 6 criteria need review9 issues ›

✩ Fix 1 meta description issue — highest impact on your SEO score. ✧Fix

Need improve 8

Meta description1SEO⌃

Needs improvement Without a meta description, Google will auto-generate one which may not represent your page well.

Meta Description✩AI Generation

Enter a compelling meta description...

Passed 14

• ✓Page titleSEO
• ✓Page handle URLSEO
• ✓URL formatSEO
• ✓Heading contentSEO
• ✓Content depthSEO
• ✓ImagesSEO
• ✓Duplicate IDSEO
• ✓Base64 imagesSEO
• ✓Heavy inline SVGSEO
• ✓Pasted HTML artefactsSEO
• ✓Call to ActionCRO
• ✓Newsletter SignupCRO

◷Last checked 09:25 AM ↻Re-scan

Section ✦ Ask AI to build or edit this page...⌘ I −◫↑

• Hero · centered: Page Audit pill, display H1, gradient CTA + See what it checks, open-store pill, 3 check notes.
• Demo · snippets/ec-pa-demo on the standard editor chrome (ec-ed-topbar Unsaved changes, ec-ed-rail audit active with live badge, #E3E3E3, Collagen demo canvas), 1200×700 box scaled by ec-mock-fit, framed by one light 1px border (no grey backdrop, no shadow). Panel from ec-ref-ed2-page-audit.png: Page Health Score 14/22, failed / need review rows, AI tip + Fix, Meta description open with AI Generation, Passed list, Re-scan. Autoplays in view (cursor .pa-cursor: Fix → AI writes → re-check 800 ms → 15/22 → Replay); stops on first click or key.
• What it checks · 3 status cards (failed / needs review / passed, app colours) + criteria chips from the app (CRO chip = brand gradient).
• How it works · 3 cards with mini app scenes. Ink band · Typical SEO tools vs Page Audit + plan card (Standard / Pro / Premium). FAQ (5, JSON-LD) + ec-final.

• Hero · split: copy + gradient CTA + open-store pill; end = ec-ais-answer, the app's real Why optimize for AI Search? comparison as a chat (ink segmented switch Without / With AI Optimization, grey vs green AI answer with a MatchaZen product card, red/green outcome line); auto-switches to With once in view.
• Setup guide · ec-ais-steps vertical tabs (same rail as #ds-abt) for the 6 real steps; panels redraw the app (llms.txt, Bot Blocking, Bing IndexNow, LLM Outreach, AI SEO Health table, Best Practices); progress bar + N / 6 completed follow the tab.
• Insights · ec-mock ai_search beside a dl of the 4 doc metrics.
• AEO · Product Templates table + analysis card: ec-ring score, 4 criteria as smooth details (.ais-crit, chevron .ais-chev), Looks good = #ECFDF3 / Needs fix = #FEF0C7 pills.
• Ink band + Pro/Premium card, FAQ (6, JSON-LD), ec-final.

EComposer builder×

☰LiveEComposer Canvas by Henry Pages › MatchaZen Page ⌄ Publish

Builder Assistant What can I help you with?Build a page, generate images, match your brand, or ask how EComposer works.You stay in control: review before applying, and undo anytime. Build a landing page for MatchaZen’s ceremonial matcha. Calm and minimal, for women 25–40 new to matcha. Add best sellers, reviews and a 15% first-order offer. Estimated cost: from 1 creditAI credits (used/limit) 43 / 800⌁↑ Send Build me a landing page for my best-selling productGenerate a minimal hero image for this pageMatch this page to my brand colors and fontsBuild a page from my site: https://example.comHow do I make a section sticky on scroll?Audit the page for SEO issues

ShopRitualsAboutMATCHA ZENUSD ▾ · ⌕ · ◯ A new page, still emptyDescribe it in the chat and EComposer AI plans it with you.

EComposer builder×

☰LiveEComposer Canvas by Henry Pages › MatchaZen Page ⌄ Publish

Builder Assistant Step 3 · Build ✓Structure: 6 sections✓Designs applied✓Copy written from your brief Your page is ready. Images are placeholders, so swap in your own when you’re set. 5 placeholder images need replacing Replace them to make this page ready to publish. Replace images Audit the page for SEO issuesMatch this page to my brand colors and fonts Ask anything about your page… Estimated cost: from 1 creditAI credits (used/limit) 43 / 800⌁↑ Send

ShopRitualsAboutMATCHA ZENUSD ▾ · ⌕ · ◯ Ritual in every whiskCalm, stone-ground ceremonial matcha for your first daily ritual.Shop Matcha → Best sellers Ceremonial Matcha$32 Bamboo Whisk$18 Daily Matcha$24 Latte Kit$39 How to whisk, in 3 steps1 Sift2 Pour3 Whisk

ec-mock-ecai · Updated 28 Oct 2026: shared ec-ed-topbar (page MatchaZen Page), #E3E3E3 editor background, full-height rail; AI flow steps unchanged.

• Mockup ec-mock-ecai (ec-mock name ecai, 1200×700 wide box) · the EComposer Builder with the Builder Assistant sidebar, redrawn from the ai-builder-assistant doc screenshots: top bar, ec-ed-rail with the Assistant tile open (ink ring), header via ec-mock-ecai-head (Chat history, Memory, New chat, Open in popup, Close), the app’s own suggestions and Estimated cost: from 1 credit. Four screens follow the doc’s AI Layout Flow in the chat: ask (brief types in, Send presses) → page structure (drag dots, trash, Add section, Choose designs) → section designs (hero variant switches, canvas hero swaps split → full-bleed, Build) → built MatchaZen page rising in. App violet drawn in ink + brand gradient.
• Motion ec-ecai-flow · 4 tabs over the stage with a gradient progress bar (ecai-bar, --dur per step); autoplay while 35% in view, holds out of view, stops on the first pick; buttons press once (ecai-press, --pd); timed swaps via data-ecai-swap=ms → data-on. Static with reduced motion.
• Just ask (ec-ecai-ask) · 8 doc capabilities as vertical tabs; the pick sends its request in a mini chat, outlines its scope on a mini MatchaZen page (brand-blue outline + label) and shows the result: headings grow, hero rewrites, image swaps, a section expands in, or an audit / CRO / help card rises. Prompt anatomy (ec-ecai-prompt, .ecai-mk marks), Brand Kit Memory replica, 4 bordered control cards, ink credits band, FAQ (6, JSON-LD), ec-final.

Ink band trust

Ink band trust (snippets/ec-ink-trust) · filler only for the empty bottom of the start column in the feature-page ink band; the ec-ink-trust element measures it and shows the full block, drops the review card if only the smaller rows fit, or hides when the columns are already balanced and on mobile (A/B Testing, EComposer AI, AI Search, Page Analytics, Upsell Funnels), pinned with lg:mt-auto above a white/15 divider: 1 real Shopify App Store review in a glass card (white/6, ring white/10, gold stars, giant faint quote mark, ec-avatar + name + source), the 40,000+ avatar stack + 4.9 · 3,400+ reviews linking to the App Store reviews, then the gradient install CTA (affiliate link) beside Free plan + 24/7 live chat checks. Rises in after the list (--d 6–8). Copy reuses approved keys only; pick a different review per page.

• Mockup ec-mock-pa · redrawn from the real Analytics screen (doc page-analytics screenshots): app palette #F1F1F1 page, white cards, Sessions/Orders cyan #3AB7EA, Visitors violet #6A4BDB, Conv. Rate orange #F5A524, up #1A7F4B / down #D72C0D. part = full (1200×700 wide box) or one card (kpis, sessions, overview, conv_time, breakdown, revenue, ai, device, location, sources, landing, products, tracking). Figures are illustrative and consistent (477 / 10,297 = 4.63%).
• Hero · centered pill + display H1 + gradient CTA + Tour the dashboard, then the full dashboard in a wide frame (rise).
• Metrics · 4 white cards: figure + delta, metric name, doc definition.
• Report tour (ec-pa-tour) · ink pill tabs (Traffic, Conversion, Revenue, Audience, Entry pages) over a #F1F1F1 stage; panels enter via ecMotion.enter and replay their charts.
• Motion pan-live (ec-pan-live, full dashboard) · KPIs + Overview count up once, then a loop while on screen: cursor scrubs Sessions over time (crosshair, cyan + violet dots, date tooltip), clicks Refresh (icon spins, KPI cards glow cyan, new visits tick in), fades out, repeats; pulsing live dot at the line end. Static with reduced motion.
• Motion pa-wipe · charts reveal with clip-path left to right, 1.4s ease-ui, under .ec-anim.is-active; skipped with reduced motion.
• Tracking try-it (ec-pa-track) · mini MatchaZen page with the editor selection ring + Editing Button panel (Tracking ID input); typing renames the live row, clicks add Hits, Rate = hits / visitors, +1 fades up 6px, row flashes #EAF4FF.
• Setup · 3 bordered cards with app scenes (Enable card, Pages & Templates menu, sidebar overview), ink band with questions + Standard/Pro/Premium plans + link to A/B Testing, FAQ, shared ec-final.

← Smart related products offer Active Preview More Action ▾ Save

Hover a step or branch to preview it CanvasOverview

✓ Order completed Order Trigger Condition Show for all orders Use condition Upsell 1 10% off30s timer GlobalCustom Uses global stylesEdit PreviewEdit offer Accept Decline Upsell 2× 10% off30s PreviewEdit offer Upsell 2× 15% off30s PreviewEdit offer ✓ Thank You Page

Preview · Upsell 1Live

MatchaZenCheckout Matcha Starter Kit$48.00 Total$48.00 Payment All transactions are secure and encrypted. Credit card Card number ✓ Rule matched: Show for all orders → Upsell 1 is next Pay now

✓You've paid for your order · View order confirmation It's not too late to add this to your order Add the product to your order and save 10% now. Your one-time discount expires soon00:30 Bamboo Matcha Whisk Set $21.60$24.00 Subtotal$21.60 Shipping$0.00 Taxes$0.00 Total$21.60 Buy now Decline offer

✓You've paid for your order · View order confirmation It's not too late to add this to your order Add the product to your order and save 10% now. Your one-time discount expires soon00:30 Ceremonial Matcha Powder $28.80$32.00 Subtotal$28.80 Shipping$0.00 Taxes$0.00 Total$28.80 Buy now Decline offer

✓You've paid for your order · View order confirmation It's not too late to add this to your order Add the product to your order and save 15% now. Your one-time discount expires soon00:30 Better deal Bamboo Matcha Whisk Set $20.40$24.00 Subtotal$20.40 Shipping$0.00 Taxes$0.00 Total$20.40 Buy now Decline offer

✓Confirmation #MZ1042Thank you, Mai! You have a discount code MATCHA10Copy Matcha Starter Kit$48.00 Bamboo Matcha Whisk Set · upsell$20.40 Total$68.40

✓You've paid for your order · View order confirmation It's not too late to add this to your order Add the product to your order and save 10% now. Your one-time discount expires soon00:30 Bamboo Matcha Whisk Set $21.60$24.00 Subtotal$21.60 Shipping$0.00 Taxes$0.00 Total$21.60 Buy now Decline offer

Native analytics Analytics data is collected by EComposer Pixel and can be viewed by individual rule or across all rules.

Post-Purchase Rules ▾All rules ▾Last 7 days

Revenue $1,284.70

Oct 21Oct 22Oct 23Oct 24Oct 25Oct 26Oct 27

Upsell Conversion Rate (%) 12.4%

21222324252627

AOV Uplift (%) 8.6%

21222324252627

Upsell Items Added 58

Rule Activations 612

Rule Impressions 468

Median Accept Time (s) 6s

• Mockup ec-mock-uf (name uf in ec-mock, wide 1200×700) · redrawn from the Upsell Funnels doc screenshots: app palette #F1F1F1 page, white cards, Order completed / Thank You Page nodes green #E3F9EC + #0C5132, Accept chip #CDFEE1, Decline chip #FFF1E3, offer urgency bar #FEE9E8 + #C70A24, checkout Buy now #1773B0, analytics lines #3AB7EA. part = full
• offer
• analytics. Figures illustrative and consistent (whisk $24 → $21.60 at 10%, $20.40 at 15%; 58 / 468 = 12.4%).
• Motion m_uf (ec-uf-live, hero) · while on screen the active funnel node gets an ink ring (2px #303030 + soft shadow), the offer countdown ticks, a cursor glides to Decline then Buy now, the preview swaps 10% → 15% with a 6px fade-up, then Thank You Page lights; loops. Static with reduced motion. Live dot pulses green (.uf-dot). Hover (or pointer) on any node or Accept / Decline branch pauses the loop: that step gets the ink ring, steps on its path a 1.5px #8A8A8A ring, its connectors turn #303030, and the matching preview (Checkout, Upsell 1, add-on, downsell, Thank You Page with totals for the chosen branch) fades up 6px (.uf-pv); loop resumes 1.6s after the pointer leaves. App nav: Build / Optimize / Grow / Settings (Upsell Funnels sits under Grow).
• Try the funnel (ec-uf-sim) · buyer-side checkout window with real offer layout; Accept adds the item to the ink order card (total, +extra gradient tag, accepted x / 3), Decline from Upsell 1 goes to the second-chance downsell; screens swap with ecMotion.leave / enter; funnel map rows ring when active, skipped branch fades to 45%.
• Sections · hero (centered pill, display H1, gradient CTA + Try the funnel, wide builder in #F1F1F1 stage) → two offer types (New funnel dialog diagrams) → try it → Quick start tabs (ec-uf-tabs: AI Pilot + 4 templates / 3 Thank you templates) → control bento (Edit Condition, Edit Upsell, editor components) + 4 setting cards → analytics with sticky definitions → ink band (3 setup steps + rules per plan) → FAQ → shared ec-final.

• VS lockup (snippets/ec-vs-lockup, pass the rival logo as rival; heroes of the PageFly, GemPages, Shogun and Sidekick pages) · soft panel (surface-secondary, 1px #E3E5E8 ring, faint blue radial glow, dashed hairline) with two equal white logo tiles (h-20 → sm h-24, shadow-card; ~120px wide on a 360px phone, so mobile logos stay ≤100px; contain:inline-size keeps it from widening the page) and a round ink VS badge (size-10 → 12, 4px panel ring) between; tiles rise, badge pops. Rival logos keep their official colours (PageFly #535AF7 via snippets/ec-logo-pagefly, symbol: true for square tiles; GemPages full-colour svg; Shogun as is); EComposer = gradient mark + official wordmark crop.
• Fit cards (all three comparison pages, section #fit right after the hero) · eyebrow Who each one is for, H2 EComposer or {rival}: which one fits you?, two equal white cards (rounded-card, shadow-card, 1px #E3E5E8 ring, no winner styling): logo tile + Choose EComposer if you Template page.ecom-gempages-alternative (keeps the page suffix, renders at /pages/ecomposer-vs-gempages). Reuse this recipe for PageFly / Shogun (suffix ecom-pagefly-alternative / ecom-shogun-alternative). Shogun page (/pages/ecomposer-vs-shogun): hero + at-a-glance card (counts features only EComposer has from the row data) → 4-tier pricing cards (EComposer top, competitor muted bottom) → grouped feature table (one table per group with caption, sticky top-20 header) → Only in EComposer bento (ec-ext-visual volume, EComposer AI chat, History panel Manual Save / Auto Save, editor ⋮ menu Save to library / Import file / Export as file) → reviews → FAQ → ec-final.
• Facts rule · EComposer values only from the official pricing table + help docs; competitor values only from the competitor’s public pricing page, Help Center or App Store listing, with a dated source line under the table. A row appears only when both sides are sourced. Never mark a competitor “No” without a source.
• Brand marks · EComposer = ec-logo-mark gradient; competitor = neutral initial tile (surface-secondary, ring-border, secondary text), never their logo colors. Exception approved by the merchant (Oct 28): the Shogun page shows both real logos, EComposer = gradient mark + official wordmark crop of logo-black-png.png (right 78%), Shogun = shogun-logo.svg from Files, unrecolored, on white or surface-secondary chips. EComposer column tinted surface-secondary/60 with ink check; competitor text in on-surface-secondary.
• Sections · breadcrumb → hero (verdict H1 + gradient CTA + secondary #compare + open-store + proof strip
• at-a-glance scorecard card, shadow-card) → 3 difference cards (ink icon tile + ec-link) → real app tour (ec-vs-tour: tabs + ec-mock panels, lazy <template>, ecMotion.enter) → semantic comparison table (caption, rowgroup headers in gradient text, sticky thead) → built-in extensions groups (chips) → ink switch band (3 numbered steps) → 3 reviews (ec-avatar) → FAQ (data-ec-smooth, h3 in summary) → ec-final.
• SEO · one H1 with both brand names, meta description fallback by handle in meta-tags, FAQPage + BreadcrumbList + WebPage (about both SoftwareApplications) JSON-LD, visible breadcrumb, internal links to every feature page, competitor source link rel nofollow.
• PageFly page · templates/page.ecom-pagefly-alternative (/pages/ecomposer-vs-pagefly, sources checked 27 Oct 2026: both pricing pages, App Store listings, help centers; a row only when both sides are sourced). Feature tabs: tablist pt-1 pb-2 so pill rings are not clipped by overflow-x; scene frames sized to content (list scenes flow with p-4, absolute scenes 680/544 mobile → sm 680/400; shared ec-mock scenes keep their design box). Hero scoreboard: one bar pair per sourced number, EComposer bar = CTA gradient full width, competitor bar = on-surface/25 at its share (data-anim fill). Pricing at a glance: 4 plan-level cards, ink ring on paid levels. Table switch Only show differences (ec-vs-table, aria-pressed pill switch: on-surface/20 → ink, knob slides 16px): equal rows leave with ecMotion.leave, return with ecMotion.enter; rows the competitor lacks get the gradient Only in EComposer tag. Only in EComposer tabs (ec-vs-tabs): ink selected pill, In the app path chip (surface-secondary) + doc ec-link, scenes redrawn from doc screenshots (Pages & Templates list, Global Block on 3 pages, Quick View popup, Paste from clipboard) + ec-mock cro / ecai.

• Owner pills (new component) · tool tags used on comparison pages: Sidekick = ink 5% tint + ink text, EComposer = solid ink + white text, Both = blue → green tag gradient (the same as small SAVE / + % tags). 12px / 600, rounded-full, optional 14px mm-icon (sidekick, editor). Use them for every "who owns this job" label; never invent other colors for competitor or partner tools.
• Who does what table · grouped rows inside a rounded-card with ring-1 border; group header row bg-surface-secondary 600 type-body-sm; columns Job 3fr / Sidekick 4fr / EComposer 4fr / Best pick 7rem; header row sticky top-16 with frosted surface/95; on mobile rows stack and each cell gets a small 12px column label.
• Chat mock (Sidekick side) · neutral admin chat: white card in the #F1F1F1 stage, header with ink round icon + "Sidekick", user bubble #F1F1F1 on the end side, answer card with #E3E5E8 hairline, inner review row #F7F7F7 with an ink Start review button. No Shopify logo artwork. The EComposer lookup answer mirrors the real EComposer Builder tools in Sidekick (sessions, visitors, conversion; 7 / 30 / 90 days; read-only, opens the page in the editor). Store data illustrative (MatchaZen).
• Sections · hero (pill, display H1, gradient CTA + See who does what, two role cards: chat mock
• ec-mock editor) → short answer (3 cards) → who does what (#jobs) → Ask Sidekick about your EComposer pages → better together (4 numbered steps with owner pills) → what each does best (Sidekick links to Shopify Help Center, ink card with EComposer feature page links) → done-for-you band (Store build with Sidekick service) → FAQ + JSON-LD → shared ec-final. Claims about Sidekick must come from Shopify Help Center; never say what Sidekick costs.

• editor
• templates
• elements
• ai
• popup
• ab
• analytics
• search
• audit
• cro
• upsell
• stories
• community
• support
• blog
• video
• doc
• calculator
• percent
• partner
• theme
• agency
• clock
• form
• copy
• image
• button
• tabs
• heading
• el_text
• el_video
• el_counter
• slider
• el_testimonial
• el_banner
• el_progress
• el_qr
• el_accordion
• el_marquee
• heart
• arrow_up
• box
• move
• trash
• desktop
• tablet
• mobile
• sidekick
• rocket
• migrate
• speed
• code
• bug
• wrench
• handshake