Build with native member widgets

Native widgets use your company’s existing member storefront availability and require deployed, synced native Liquid templates. Confirm availability and supported live actions for your company before publishing a page that depends on them.

Native widgets are supplied globally by Fluid and require no Droplet installation. Droplet widgets come from an installed Droplet; their catalog entries identify that supplier. Theme sections remain a separate category for theme-authored content. The enabled builder separates Native widgets and Droplet widgets in Widgets, and provides Theme sections, Native widgets, and Droplet widgets in the add picker. Droplet embeds retain their enable/disable controls; placeable widgets are added to a page. Choose a compatible member-page template, open Widgets, and drag a native widget onto the page, or select it in the add picker and click Add section. Each placement has its own settings, including size, title, destination, link label, image, image description, product ID, and additional JSON configuration. Not every widget uses every shared setting; configure only fields that apply to its behavior. The four size values are small, medium, large, and extra-large; they are variants of one widget identity. A native placement uses a stable URI and a matching schema entry:

{% section 'fluid://native/widgets/member', id: 'welcome_member' %}

{% schema %}
{
  "sections": {
    "welcome_member": {
      "id": "welcome_member",
      "type": "fluid://native/widgets/member",
      "settings": { "size": "large", "title": "Welcome back" }
    }
  }
}
{% endschema %}

Merge the placement into the existing schema; keep the tag ID, schema key, and entry ID aligned. Use the global native reference rather than copying its implementation into a theme or replacing it with a same-named theme section.

Automatic catalog updates

In environments with automatic catalog sync enabled, a successful application deployment queues a background sync of the global native Liquid templates and their settings schemas into the catalog database. The sync accepts only the currently intended template contents from a matching deployed worker, serializes updates, skips unchanged templates, and retries failures. It updates global templates without overwriting company template copies or existing placement settings. It does not delete catalog templates simply because their source files disappear. If a sync needs recovery, an operator can re-enqueue it from the currently intended deployed release. The global catalog sync stores complete Liquid markup, styles, and settings schemas in the database; it does not enable the member storefront for a company.

Liquid rendering and preview

Native sections render their HTML and CSS on the server from the synced Liquid templates, using each placement’s settings. The native section applies the theme’s colors, fonts, spacing, and card shape; place the existing section to reuse that styling. Builder previews render fictional sample data without reading private member records or enabling live actions. Native rendering uses ordinary HTML and CSS; small inline JavaScript handles supported task actions, attributed sharing, copying links, event countdowns, and calendar exports. Live rendering checks member storefront availability and authenticated member authorization before reading member-scoped data on the server. Do not place member credentials, access tokens, private records, or fabricated live results in widget settings. Additional configuration accepts a JSON object; explicit top-level settings take precedence over overlapping fields in that object. Use ordinary HTTP or HTTPS destinations for links; unsafe navigation protocols are rejected.

Follow the original design rules

The original widget kit is a design specification with fictional data, not evidence that a live workflow or integration exists. Use its rules as acceptance criteria when extending a native section:

Use an 8px grid for dimensions, spacing, and line heights. Keep content aligned to the leading edge and inside the theme inset.
Across all four variants of one widget, use at most two font families, three text sizes, and three font weights. The original type scale is font size/line height in pixels: 12/16, 14/16, 20/24, 28/32, 40/40, and 64/64.
Take colors and heading/body fonts from theme tokens. The original design contract specifies a widget radius from 0–40px in 8px steps, falling back to the theme card radius; inset is 16, 24, or 32px, falling back to theme card padding. Its concentric nested radius is min(outer radius, max(outer radius − inset, 8px)). These are design requirements to verify, not a claim that every deployed theme enforces them.
Preserve the four cell footprints: Small 1×1, Medium 2×1, Large 2×2, and Extra large 4×2. The reference uses 176px cells with 16px gaps; these are reference dimensions, not a fixed width for every device.
Adapt content to the available width and height without clipping or crossing the inset. Follow each widget’s Adapt notes; dropping secondary rows is preferable to hiding the primary action or value.
Use the original focus treatment: a 2px accent ring with a 2px offset. Test keyboard operation, reduced motion, narrow screens, long labels, and light and dark themes.
Check every size with different theme insets and radii. The original audit uses layers for grid, inset and areas, structure/loading, type, and final appearance; a screenshot of one size does not establish compliance.

Catalog identities

The catalog defines 67 distinct widgets. Each supports the same four size choices; size variants do not increase the identity count. Use the identifier below as the final segment of fluid://native/widgets/<name>.

Identifier	Widget	Family
`member`	Member card	commerce
`next`	Next delivery	commerce
`points`	Points	commerce
`order`	Order status	commerce
`again`	Buy it again	commerce
`orders`	Order history	commerce
`onway`	On its way	commerce
`subs`	Subscriptions	commerce
`carenext`	Up next	clinical
`journey`	Care journey	clinical
`careteam`	Care team	clinical
`labs`	Lab results	clinical
`meds`	Medications	clinical
`wallet`	Points wallet	commerce
`status`	Status	commerce
`benefits`	Tier benefits	commerce
`links`	Link cards	commerce
`givget`	Give & get	commerce
`refs`	Your referrals	commerce
`goals`	Give more, get more	commerce
`resume`	Continue learning	content
`course`	Course progress	content
`courses`	Courses	content
`certs`	Achievements	content
`signals`	Buying signals	crm
`funnel`	Your funnel	crm
`pulse`	Customer pulse	crm
`live`	Live now	crm
`nextsend`	Next best send	crm
`today`	Today	crm
`acct`	Account brief	crm
`sign`	Out for signature	business
`owed`	Money owed	business
`chsales`	Sales	business
`chgoal`	Month goal	business
`chbest`	Best time to share	business
`chmix`	Sales by product	business
`plink`	Image link	content
`pcar`	Image carousel	content
`nextstep`	Next step	crm
`brief`	This week’s brief	crm
`asked`	Someone asked	crm
`working`	What’s working	crm
`streak`	Share streak	crm
`earnings`	Earnings	business
`sponsor`	Your sponsor	crm
`contacts`	Contacts	crm
`tasks`	Tasks	crm
`messages`	Messages	crm
`groups`	Contact groups	crm
`repcard`	Rep profile	business
`snapshot`	Business snapshot	business
`social`	Follow us	business
`team`	Team sunburst	business
`egoal`	Earnings goal	business
`ntitle`	Next title	business
`circle`	Your circle	business
`teamfeed`	Team activity	business
`site`	My site	content
`link`	Your link	content
`video`	Share a video	content
`photos`	Share photos	content
`product`	Share a product	content
`countdown`	Event countdown	business
`qualify`	Trip qualification	business
`board`	Trip leaderboard	business
`pass`	Event pass	business

Connected behavior and limitations

The native data projections cover 22 catalog keys: sponsor, streak, nextstep, signals, live, working, funnel, team, tasks, today, countdown, pass, chbest, chmix, chgoal, chsales, site, pulse, refs, resume, course, and courses. Other widgets can reuse existing account data or company configuration; this count is not a promise that every catalog workflow has a live source. Buy it again shows previously purchased items from recent owned orders and links to order history. It does not create a new purchase or check current prices and availability. Next delivery and Subscriptions show the next billing date, not an arrival estimate. The released behavior links to subscription management. In-card skip and undo are pending release and verification; do not promise them for an existing installation. Sales charts show attributed daily sales in USD with UTC dates; the month-goal projection uses a linear daily pace and is an estimate. Those sales charts report unavailable data while their statistics await reconciliation. The sharing heatmap groups tracked visits into UTC weekdays and four-hour blocks over eight weeks; it does not schedule a share or establish an ideal send time. Product mix shows units on paid attributed orders over 30 UTC days and does not deduct refunds. The team sunburst renders a bounded portion of the authorized member genealogy on the server, with expandable details for visible branches. Task widgets request confirmation before completing or reopening an owned task, show errors when a write fails, and refresh after a successful change. Task mutations and attributed sharing remain disabled in previews. Clinical, compensation, carrier ETA, signature, and reward-fulfillment presentations need a corresponding authorized provider or additional capability before they can show live results. A provider-dependent widget can show an unavailable state even though its preview and all four visual sizes exist.

Action release status

The per-widget reference below records original design intent. It does not assert that each proposed action, data source, filter, or adaptation is implemented in the deployed widget. CRM extra-large inline replies, content sharing/copying captions and attributed links, subscription skip/undo, and sharing-heatmap scheduling have follow-up work pending release and verification. Keep publication of those promises coordinated with the corresponding release; use the released navigation or unavailable state until then. Do not infer that a displayed button completes a booking, payment, purchase, message, prescription log, signature, reward, or compensation workflow. Confirm the authorized source, eligible action, successful result, and error handling independently.

Give agents accurate build instructions

Start from the native catalog entry and the widget’s supported settings; reuse the existing native section instead of creating a Droplet just to make it globally available. Keep the four size variants within one Liquid section and preserve empty, error, and unavailable states. Use the design rules and the per-widget Data, Tap, and Adapt reference as a checklist. Distinguish original intent, released support, and pending work in the implementation plan; never turn a design-only action into a fabricated success message. Use authenticated member-scoped data for live widgets and inert sample data for previews. Treat a rendered card as a presentation implementation, not proof that the complete workflow is connected. Clinical results, medication adherence, compensation, carrier arrival estimates, e-signature workflows, and reward fulfillment require their corresponding integrations or product capabilities. When a source is unavailable, show the unavailable state or a clearly configured reduced scope; never substitute preview numbers for live records. For a custom integration supplied by a Droplet, follow Droplet widgets and Droplet data. For member-page context, read Member Liquid variables.

Original Data, Tap, and Adapt reference

Read Purpose as the intended job, Data as the source the design requires, Tap as its proposed interaction, and Adapt as its proposed size behavior. These are design acceptance notes, not an API contract or a current-support matrix. The connected-behavior limitations and action release status above take precedence for deployed behavior. Missing providers and capabilities stay unavailable; fictional preview records never become live data.

Widget	Purpose intent	Data required by design	Tap intent	Adapt intent
`member` — Member card	Original design intent only: Greets the customer by name and puts their account one tap away.	Member profile and account counts	Proposed interaction: Opens the profile screen. Rows open their screens.	Medium drops its shortcuts when very short.
`next` — Next delivery	Original design intent only: Shows when the next subscription ships, how far through the cycle it is, and lets the customer skip or manage it.	Subscription billing cycle, product, and total	Proposed interaction: Opens subscription details. Skip calls the eligible skip action. In-card skip is pending release and verification.	The date scales one step to fit narrow cells.
`points` — Points	Original design intent only: Shows the points balance, where it has been, and the latest changes.	Points balance and ledger history	Proposed interaction: Opens points in the profile screen. Hidden when the company has points off.	Large drops its third row when short.
`order` — Order status	Original design intent only: Tracks the latest order from placed to shipped.	Latest owned order, fulfillment, items, and address	Proposed interaction: Opens order details and shows placed, packing, or shipped progress.	Medium hides thumbnails when narrow and step names when very short.
`again` — Buy it again	Original design intent only: Puts products the customer already buys one tap from the cart, most-ordered first.	Products grouped from prior orders	Proposed interaction: Opens the product. Adding a prior item to the cart is a design goal, not a currently available widget action; current behavior links to order history.	Large shrinks its featured image on narrow cells.
`orders` — Order history	Original design intent only: Lists past orders with status and total, newest first.	Owned order history, status, totals, and items	Proposed interaction: Headers sort; tap again to reverse. Rows open order details.	Tables drop rows before they drop columns. Medium keeps two rows when short.
`onway` — On its way	Original design intent only: The arrival day as the headline, the package moving on a map, and one tap to track it.	Order tracking; arrival estimates require carrier data	Proposed interaction: Track opens the carrier. The package opens the order.	Medium pairs the map with the day; large adds progress and the package; extra large lays out every step.
`subs` — Subscriptions	Original design intent only: The next box with what is in it, one tap to skip it, and every subscription beside it.	Subscriptions, billing dates, products, and prices	Proposed interaction: Skip acts in place and can be undone. Tiles open the product. Add to box opens the shop with the box as the target. In-card skip/undo is pending release and verification.	Medium is the date and the box; large shows what is in it; extra large lists every subscription and what they saved.
`carenext` — Up next	Original design intent only: The one thing the patient has to do next, how to get ready for it, and what follows.	Clinic integration for lab orders and appointments	Proposed interaction: Book my lab opens lab booking. Time chips pick a slot; Book confirms it.	Medium lists the next two; large prepares the lab; extra large adds the visit with open times.
`journey` — Care journey	Original design intent only: Where the patient is on their plan: what happened, what is next, and what has changed since they started.	Clinic milestones, Fluid refills, and patient check-ins	Proposed interaction: The filter narrows the list. Rows open their lab, visit or prescription.	Small is the day of the plan; medium is the ribbon; large is the list; extra large puts both beside what changed.
`careteam` — Care team	Original design intent only: The people behind the care, how fast they answer, and one tap to reach them.	Clinic physicians and schedules; authorized messaging	Proposed interaction: Message opens a conversation. Video and Book open scheduling.	Small and medium show who is there; large leads with the physician; extra large is a contact card for each.
`labs` — Lab results	Original design intent only: The marker that matters most against its optimal range, how it has moved, and what is worth a look.	Lab partner results and clinic-defined ranges	Proposed interaction: Opens the full report. Flags open their marker.	Small is how many are in range; medium is the key marker; large adds flags; extra large adds every draw and each body system.
`meds` — Medications	Original design intent only: Today’s doses with one tap to log them, the week at a glance, and when the next refill ships.	Clinic prescriptions, subscription refills, and a required adherence log	Proposed interaction: Log marks a dose taken. The refill row opens the subscription.	Medium is today; large adds the week; extra large adds supply and the refill.
`wallet` — Points wallet	Original design intent only: The points balance as a card in a wallet, with earning, redeeming and history one tap away.	Points ledger and configured rewards; gift cards require additional capability	Proposed interaction: Tap a card behind to bring it to the front. Earn opens ways to earn, Redeem opens rewards, History opens the points ledger.	Small and medium are the points card itself, in the member’s tier metal, or the company accent when there are no tiers. Large shortens the cards and lays the actions flat when short.
`status` — Status	Original design intent only: Where the member stands: their tier, how close the next one is, and what it unlocks.	Configured tiers and qualifying account activity	Proposed interaction: Opens account activity. The next-tier row opens that tier’s benefits.	The dial’s number fits down to 40 at medium. Small keeps the badge, the bar and one line.
`benefits` — Tier benefits	Original design intent only: What every tier gives, opened to the member’s own, so the next one is always one tap away.	Configured tier thresholds and benefits	Proposed interaction: Tap a tier to see what it gives. Each benefit says what changed from the tier below, so perks visibly build. Tiers not reached yet show their benefits outlined. The footer opens the full benefits page.	Extra large turns the tier into a metal card; the coins on it turn it to another tier. Large switches tiers with a segmented control. Medium shows the member’s own tier.
`links` — Link cards	Original design intent only: Points members to the few things worth doing next, each with one clear action.	Company-configured cards and destinations	Proposed interaction: Each card opens its link. View all opens a page the company picks.	Medium shows two cards, large lists four as rows and drops the last when short, extra large lays them out as a grid.
`givget` — Give & get	Original design intent only: The offer as a ticket in two halves: one for the friend, one for the member. Sharing hands over the friend’s half.	Configured friend/member offers and attributed links	Proposed interaction: Share opens the share menu and tips the friend’s half away. Tapping the code copies it; copy confirms only when it succeeds.	Medium is the ticket alone; large adds the link and share targets; extra large adds the code. The amount fits down to 40 on short cells.
`refs` — Your referrals	Original design intent only: What sharing has earned so far, and which friends are still on their way.	Attributed referrals; reward fulfillment needs a corresponding capability	Proposed interaction: Opens the referral page. Pending rewards turn green when the friend’s order ships.	Medium shows the three numbers behind the total; extra large draws them as a journey next to every friend.
`goals` — Give more, get more	Original design intent only: Turns referring into a path: each friend moves the member toward the next gift, and gifts stack.	Configured referral milestones and rewards	Proposed interaction: Opens the rewards. Earned gifts sit open; the next one bobs gently, never when reduced motion is on.	Small shows only the next gift; large is a ladder; extra large is a shelf of gifts with progress running along its base.
`resume` — Continue learning	Original design intent only: Picks up the lesson exactly where the member left off.	Member learning progress and visible training	Proposed interaction: Opens the lesson at its saved position. All lessons opens the course.	The poster takes whatever height is left; its bar shows how far into the lesson the member is.
`course` — Course progress	Original design intent only: Where the member is in one course: done, now, and next.	Course content and member learning progress	Proposed interaction: Rows open that lesson. Resume opens the current one at its saved position.	One segment per lesson; the current segment fills to the saved position. Large shows the lessons around the current one, extra large all of them.
`courses` — Courses	Original design intent only: Every course at a glance: in progress, finished, or waiting to unlock.	Available courses and member progress	Proposed interaction: Opens the course. Locked courses open what it takes to unlock them.	Covers take the height that is left; large is a 2×2 shelf, extra large a row of four posters.
`certs` — Achievements	Original design intent only: Finished courses become medals, and the latest one a certificate worth sharing.	Completed lesson progress; sharing requires a corresponding certificate page	Proposed interaction: Medals open their course. Share sends the certificate.	Medium is the medal shelf; large adds the latest medal; extra large turns it into a certificate.
`signals` — Buying signals	Original design intent only: Who is close to buying right now, how far along they are, and a note ready to send.	Authorized contact activity and purchase signals	Proposed interaction: The chat button opens a prefilled note. Rows open the person in Contacts. The dots show how far along each person is.	Small is the hottest signal; large lists them; extra large opens the hottest with their full path and note.
`funnel` — Your funnel	Original design intent only: Where people drop between the link and the order this week, and what to try at that step.	Member activity, shares, and attributed orders	Proposed interaction: Opens the full funnel. Follow up opens the people who stopped at the leak.	Medium is six bars; large adds the leak; extra large adds what to try.
`pulse` — Customer pulse	Original design intent only: The member’s customers by rhythm, so the ones due to reorder get a note this week instead of drifting away.	Authorized customer and contact activity	Proposed interaction: Groups open the matching contacts. Message all prepares one note per person to review before sending.	Small and medium lead with who is due; large shows every group; extra large names the people due.
`live` — Live now	Original design intent only: Who from the rep’s links is on the site right now, what they are looking at, and a note ready to say hi.	Recent authorized activity and referral context	Proposed interaction: Say hi opens a prefilled note. Rows open the person.	Small is the person browsing now; extra large shows what they are looking at, the path they took, and where they came from.
`nextsend` — Next best send	Original design intent only: One person, one piece of content, one reason, and the note already written. Send, save for later, or skip to the next.	Contact signals, company content, and editable company notes	Proposed interaction: Drag the card like a deck: throw it right to send, left to skip. Send opens the share menu with the note already in the message; the card only counts as sent once a destination is picked. The buttons and arrow keys do the same.	Small and medium show today’s first pairing; large is the deck; extra large adds what is up next and how many were sent.
`today` — Today	Original design intent only: The day’s moves in the order that matters, with a time budget and a ring that closes as they get done.	Replies, tasks, checkout signals, and estimated effort	Proposed interaction: Check off a move and the ring fills. Start focus walks through them one at a time.	Medium is the ring and the next two moves; large adds the summary; extra large lists the day in order.
`acct` — Account brief	Original design intent only: Everything to know before reaching out: how warm they are, what they care about, what you noted, and the next move.	One authorized contact’s activity, interests, notes, and conversation	Proposed interaction: The main button does the next move. The timeline opens the full contact.	Medium pairs the person with their last 14 days; large adds interests and your note; extra large adds the timeline.
`sign` — Out for signature	Original design intent only: Every agreement still out, who has signed and who hasn’t, and a reminder one tap away.	Click-to-accept agreements; multi-signer contracts require an integration	Proposed interaction: Remind sends the signer a nudge. Copy link copies the signing link. Rows open the agreement.	Small counts what is out; medium is the most urgent; large adds the rest; extra large shows the page and each signer.
`owed` — Money owed	Original design intent only: What customers still owe, how late it is, and who to nudge first.	Payment-request data; rep-to-customer invoicing requires additional capability	Proposed interaction: Remind sends a pay link. Rows open the invoice.	Small is the total; medium adds the most overdue; large adds aging and the list; extra large adds reminders and a new invoice.
`chsales` — Sales	Original design intent only: How sales are moving, day by day, with the totals as the switch between sales, orders and new customers.	Attributed orders and customer totals	Proposed interaction: Tap a total to chart it. Drag across the bars to read a day.	Small is the total over two weeks; medium adds the bars; large switches between totals; extra large puts the totals in the header.
`chgoal` — Month goal	Original design intent only: Where the month stands against the goal, where it is headed at this pace, and what would close the gap.	Attributed sales and a configured goal; pace is an estimate	Proposed interaction: Opens sales. Moves open the contact.	Small is the total and a bar; medium adds the line; large adds the numbers; extra large adds what would close the gap.
`chbest` — Best time to share	Original design intent only: When the member’s links actually get opened, so the next share lands at the right hour.	Tracked shared-link visits grouped by time	Proposed interaction: Cells show their counts. Schedule queues the share for the best slot. Scheduling is pending release and verification.	Small is the best slot; medium adds the map; large labels it; extra large adds a share ready to schedule.
`chmix` — Sales by product	Original design intent only: What the sales are made of, one product at a time.	Order items grouped by product	Proposed interaction: Tap a product to isolate it; the center shows its total.	Small is the ring; medium adds the top three; large lists all five; extra large adds amounts and products.
`plink` — Image link	Original design intent only: One destination, told by its picture: the photo fills the widget and the words sit where the light is darkest.	Configured image, title, subtitle, and destination	Proposed interaction: The whole widget is the link.	Small is the title alone, like a row of tiles; medium adds a subtitle; large adds a label; extra large adds a button.
`pcar` — Image carousel	Original design intent only: A few stories, full bleed, one at a time: each gets six seconds, and swiping moves on.	Configured images, labels, titles, subtitles, and destinations	Proposed interaction: Swipe or tap the bars to move. Hovering pauses. With reduced motion it waits for a swipe.	Small and medium are the picture and title; large adds a button; extra large lists every story beside it.
`nextstep` — Next step	Original design intent only: The one most useful thing to do right now, why it matters, and where it sits on the path to a first sale.	Member shares, visits, orders, and company-configured next steps	Proposed interaction: The main button does the step. Not for me offers a smaller or different step; extra large links straight to the sponsor.	Medium keeps the step and a five-part path; large adds why; extra large lists the whole first month.
`brief` — This week’s brief	Original design intent only: What to make this week, with hooks, format, what to say and avoid, and the link already attached.	Company-authored brief, hooks, disclosure, and attributed destination	Proposed interaction: Arrows flip through hooks; Copy hook copies the one showing. Use this brief opens it in full.	Small and medium name the brief; large adds hooks; extra large adds what to say, what to avoid, and the link.
`asked` — Someone asked	Original design intent only: Answer a real question in a minute with the right page, an honest note and the disclosure, without writing from scratch.	Company-authored questions and answers with an attributed destination	Proposed interaction: Tap their question to swap the answer. Send opens the share menu, or the system share sheet on phones.	Medium lists questions; large previews the answer; extra large shows the exact conversation they will see.
`working` — What’s working	Original design intent only: The content winning across the field this week, and why, so members make their own version instead of guessing.	Company content ranked by attributed share outcomes	Proposed interaction: Make yours opens a brief built from that piece. Tapping a reel plays it.	Medium is the top three; large features number one; extra large adds the rest.
`streak` — Share streak	Original design intent only: A weekly sharing rhythm the member can see and keep, like closing a ring.	Member sharing history and a configured weekly goal	Proposed interaction: Opens something ready to share. Today’s dot is outlined until they share.	Small is the ring and streak; medium adds the week; extra large adds twelve weeks at a glance.
`earnings` — Earnings	Original design intent only: Where every dollar is, pending, approved, payable or paid, and when it lands, in plain language.	Compensation connector, including reversals and payout status	Proposed interaction: Opens the earnings page. Each row explains why an amount is where it is.	Medium shows the next payout beside what is on its way; large adds the pipeline; extra large adds recent activity.
`sponsor` — Your sponsor	Original design intent only: A real person one tap away: who helps, how fast they reply, and when to work together.	Authorized sponsor profile and configured support context	Proposed interaction: Message opens the conversation. Send a draft attaches work for feedback.	Medium is the person and their last note; large adds actions; extra large adds the working session and topics.
`contacts` — Contacts	Original design intent only: Shows the newest contacts and how the list is growing.	Authorized contact profiles and groups	Proposed interaction: Headers sort the fetched page, up to 100. Rows open the contact.	Tables drop rows before they drop columns. Medium keeps two rows when short.
`tasks` — Tasks	Original design intent only: Keeps follow-ups from slipping: what is overdue, what is due today, and the week ahead.	Owned tasks and due dates	Proposed interaction: Checking a task calls the task update. Rows open the contact.	Medium drops its third task when short.
`messages` — Messages	Original design intent only: Shows who is waiting on a reply, and at extra large lets the member answer in place.	Authorized conversations, messages, and unread state	Proposed interaction: Opens messaging on the conversation. Extra-large reply in place is pending release and verification.	Medium drops its second conversation when very short.
`groups` — Contact groups	Original design intent only: Shows how contacts split across the member’s groups, like a lightweight pipeline.	Authorized contact groups and counts	Proposed interaction: Opens contacts filtered to the group.	Large drops its summary line when short.
`repcard` — Rep profile	Original design intent only: Who the member is in the business, at a glance: name, rank, status and member number, like a membership card.	Member profile; compensation titles require a connector	Proposed interaction: Opens the profile. Contact rows open mail, phone and maps. Empty fields hide; a missing title shows a dash.	Medium is the membership card itself; extra large adds the full contact list.
`snapshot` — Business snapshot	Original design intent only: The number that matters, pay volume, against last period, with sales, affiliates and potential grouped behind it.	Compensation connector for current and previous periods	Proposed interaction: Large and extra large switch between this period and last. Zeros stay visible but quiet.	Large shows the six most-used metrics and drops two when short; extra large shows all ten.
`social` — Follow us	Original design intent only: Every company channel one tap away, split into what everyone can follow and what is for affiliates only.	Configured channels, links, and audience restrictions	Proposed interaction: Each channel opens in its app. Affiliate-only channels carry a badge.	Medium shows the channels as tiles; large and above group them by audience.
`team` — Team sunburst	Original design intent only: The whole team in one picture: every level a ring, every leg its own color, so the member sees where the team is strong and where to help.	Authorized genealogy; compensation ranks require a connector	Proposed interaction: Hover a wedge to see who it is. Tap it to go into their team: the chart grows out of that wedge, a back button with the parent’s name appears in the title bar, and the center turns into an up button. Escape also goes back up. Inactive members stay faint.	Small and medium are for glancing and open the full team; large and extra large can go in and out. Extra large shows each level split by leg, and its legend highlights or opens a leg.
`egoal` — Earnings goal	Original design intent only: The month a member is working toward: how far along the commission goal is, how each income stream is doing, and the pace, always framed as an estimate.	Compensation connector and member goal	Proposed interaction: Revise goal opens the goal setting. Streams open their details.	Small is the amount and a bar; medium adds the ring; large greets the member and splits the streams; extra large gives each stream its own card.
`ntitle` — Next title	Original design intent only: What the member is, what comes next, what it is worth each month, and the real moves that would get them there.	Compensation plan and qualifying volume rules	Proposed interaction: Moves open the contact. How it’s calculated opens the commission schedule.	Small is the next title and the bar; medium adds what it is worth; large compares titles and lists moves; extra large adds milestones.
`circle` — Your circle	Original design intent only: What the member’s circle volume is made of, who is behind it, and who has not ordered yet this month.	Eligible order volume and company plan rules	Proposed interaction: What counts explains the volume in plain words. Nudge sends a message.	Small is the total; medium splits it; large names who has not ordered; extra large lists everyone with what they bought.
`teamfeed` — Team activity	Original design intent only: What happened across the member’s team this week, with a one-tap hello or congrats where it matters.	Authorized team joins, orders, renewals, and connected rank changes	Proposed interaction: The filter narrows the feed. Say hi and Congrats open a message with a starter note.	Small is who joined; medium is the latest two; large filters the feed; extra large adds the week and a ready welcome.
`site` — My site	Original design intent only: Shows the member’s own site the way visitors see it, and how it is doing.	Member site profile, links, favorites, and metrics	Proposed interaction: Opens the site. Edit site opens the My Site screen.	Medium drops leads when very short; extra large drops its third link when short.
`link` — Your link	Original design intent only: Hands out the member’s personal link: scan the code, copy it, or send it anywhere in one tap.	Member-attributed destination and locally drawn QR code	Proposed interaction: Share opens the share menu; on phones, the system share sheet. Copy confirms only when the copy succeeds. Expanded sharing/copy behavior is pending release and verification.	Small keeps the code and one button; extra large shrinks the code when short.
`video` — Share a video	Original design intent only: Puts a ready-to-post video one tap from Messages, with the caption already written.	Visible company video and attributed destination	Proposed interaction: Tap plays. Share and Copy link work in place; extra large copies the caption too. In-place sharing/link and caption copying are pending release and verification.	The poster takes whatever height is left.
`photos` — Share photos	Original design intent only: Lets members pick one photo or several and share them together.	Visible company images and attributed library destination	Proposed interaction: Tap a photo to select it. Share stays disabled until something is picked, then shows the count. Expanded selection/share behavior is pending release and verification.	Grids keep their columns and let rows shrink.
`product` — Share a product	Original design intent only: Makes a favorite product the easiest thing in the store to recommend.	Shareable product destination and current product data	Proposed interaction: Share opens the share menu. The link icon copies the member’s link. In-place sharing and link copying are pending release and verification.	Extra large shows three products; phones show the large layout.
`countdown` — Event countdown	Original design intent only: One number that builds anticipation, set over the place it happens.	Configured event details and start time	Proposed interaction: Opens the event. Shows days, then hours in the final two days, then minutes. Never seconds.	The number fits down to 40 on narrow cells; medium drops its details when short.
`qualify` — Trip qualification	Original design intent only: Turns qualifying into a journey to a place: an emblem for the trip, with one ring segment for each tranche.	Configured trip windows, targets, and qualifying points	Proposed interaction: Opens the trip page. Segments read clockwise, one per tranche; the ring takes the trip’s own color, so every trip earns its own emblem.	The emblem steps down 144 → 128 → 112 as height tightens.
`board` — Trip leaderboard	Original design intent only: Shows the member’s place and the people just around them, the ones they can actually pass.	Authorized company leaderboard; trip-specific ranking needs additional capability	Proposed interaction: Opens the full leaderboard. The list centers on the member; extra large says what it takes to move up.	The list drops its first neighbor when short.
`pass` — Event pass	Original design intent only: Everything needed to get there: date, time, venue, directions, and a spot on the calendar.	Event details, venue, and calendar export; no implied ticket or check-in capability	Proposed interaction: Opens the event. Extra large lists more upcoming events.	The scene takes whatever height is left.

Start here

Building blocks

Storefront features

Advanced

Member storefront

Build with native member widgets

Choose the widget source

Place and configure a native widget

Automatic catalog updates

Liquid rendering and preview

Follow the original design rules

Catalog identities

Connected behavior and limitations

Action release status

Give agents accurate build instructions

Original Data, Tap, and Adapt reference

​Choose the widget source

​Place and configure a native widget

​Automatic catalog updates

​Liquid rendering and preview

​Follow the original design rules

​Catalog identities

​Connected behavior and limitations

​Action release status

​Give agents accurate build instructions

​Original Data, Tap, and Adapt reference

Choose the widget source

Place and configure a native widget

Automatic catalog updates

Liquid rendering and preview

Follow the original design rules

Catalog identities

Connected behavior and limitations

Action release status

Give agents accurate build instructions

Original Data, Tap, and Adapt reference