How to Set Up Conditional Visibility in Webflow CMS for Member-Only Pricing in 2026

The Member-Only Pricing Page That Took Me Two Hours to Build Wrong

In March 2026 a SaaS client asked me for what sounded simple. Their public pricing page should show a 20 percent member discount only to logged-in Webflow Memberships users. Anonymous visitors should see the standard price. I told the client it was a 30 minute job. I was off by a factor of four because I tried to do it with custom JavaScript first. The right answer was Webflow CMS conditional visibility paired with Memberships user groups, and I want to walk through it cleanly so you do not lose the same evening I did.

Webflow's CMS conditional visibility feature, expanded in February 2026 to include Memberships user group conditions, is the cleanest way to ship member-only pricing on a Webflow site. Per Webflow's March 2026 announcement, 62 percent of Workspace customers with Memberships enabled started using the feature within four weeks.

Here is the exact tutorial I follow now when I build a member-only pricing variation on a Webflow site, including the CMS structure, the visibility rules, and the gotchas I have hit on real client projects.

What Is Webflow CMS Conditional Visibility and Why Use It for Pricing in 2026?

Webflow CMS conditional visibility lets you hide or show CMS-bound elements based on field values or, since February 2026, on logged-in Memberships user attributes. For pricing, that means you can render one CMS item per plan and let the same element show different prices to anonymous visitors versus signed-in members, without any custom JavaScript on the client.

The reason this matters in 2026 is performance and AEO. Custom JavaScript-driven pricing toggles break Webflow's prerendered HTML, which means AI Overviews and ChatGPT Search index the wrong price. Per Cloudflare's May 2026 AI bot traffic report, AI crawlers now read the initial HTML and rarely execute JavaScript, so server-rendered conditional visibility is the only reliable way to feed them member pricing.

According to Webflow's June 2026 platform metrics, sites using native conditional visibility ship 31 percent faster first contentful paint than sites using JavaScript-based personalization. That speed shows up directly in Core Web Vitals. For a B2B SaaS pricing page, where conversion correlates with INP, this is real money.

How Do You Structure the Webflow CMS for Member-Only Pricing?

I structure pricing as a single CMS collection called Plans with five fields per item: name, standard price, member price, member discount label, and a switch field called "show member price". The switch is what gates the conditional visibility. I always include the discount label so members see context, not just a smaller number.

Each plan item is a single row. On the page, the pricing card template renders both the standard and member price elements, but each carries a different conditional visibility rule. The standard price shows when the user is not logged in. The member price shows when the user is logged in and belongs to the "paying-member" group. That is the entire mental model.

I avoid the temptation to create two separate Plans collections, one public and one member. That doubles content debt and makes the CMS painful for the client to update. According to Webflow's January 2026 best-practice guide, the recommended pattern for conditional content is one collection with field-driven visibility, not duplicate collections.

How Do You Wire Webflow Memberships User Groups to Conditional Visibility?

I create a user group in Webflow Memberships called "paying-member" and assign it to every signed-up Stripe customer through a Make.com automation. When a Stripe payment succeeds, Make adds the user to the paying-member group via the Webflow Memberships API. The whole flow runs in about 4 seconds end to end.

Inside the Webflow Designer, I select the member-price element on the pricing card, open the conditional visibility panel, and add the rule "show when user group equals paying-member". I add the inverse rule on the standard-price element so they swap correctly. Webflow handles the rest server-side at request time.

The Memberships API documentation updated in April 2026 confirms that user group assignments are evaluated at page render and cached for 60 seconds at the Cloudflare edge. That cache window is important. If a user upgrades to paying-member, they will see member pricing within 60 seconds, not instantly. Always set the expectation with clients up front.

What Are the Common Mistakes When You Set This Up the First Time?

The first mistake is forgetting that conditional visibility is server-rendered. If you preview the page in the Webflow Designer, you will not see the member price unless you preview as a logged-in user. I always test against the published site, not the Designer, when verifying conditional visibility rules.

The second mistake is binding the wrong field. If you set the rule to "show when CMS field equals X" instead of "show when user group equals paying-member", the visibility applies to every visitor based on the CMS data, not on the visitor's auth state. I have seen this turn a member-only pricing page into a public discount page during a client launch.

The third mistake is forgetting the empty state. If a logged-in user is not in any paid group, neither rule fires and the price area renders empty. I always add a fallback element with the rule "show when not logged in OR not in paying-member" so there is always a visible price. Per a Baymard Institute December 2025 study, 11 percent of B2B pricing page abandonment traces to missing price values caused by personalization bugs.

How Do You Test the Member Pricing Experience End to End?

I test in three stages. Anonymous test: open the published site in an incognito window and confirm standard pricing renders. Free member test: sign up with a throwaway email, do not pay, and confirm standard pricing still renders because the user is not in the paying-member group. Paid member test: trigger a 1 USD Stripe test charge via the Stripe test mode, wait 60 seconds, and confirm member pricing renders.

I record the test as a Loom video and store it in the client's Notion workspace. Future bug reports get checked against the Loom first. According to Loom's January 2026 usage report, async video walkthroughs reduce support ticket volume on launched features by 47 percent compared to written documentation alone.

For the Cloudflare cache step, I use Cloudflare's cache reserve feature to confirm the edge is honoring the 60 second TTL. If a tenant complains that member pricing is not appearing after 90 seconds, that is a Cloudflare cache issue, not a Webflow Memberships issue, and the fix is at the Cloudflare level.

How Does This Interact With Webflow Analytics and AEO Citations?

Webflow Analyze tracks the standard pricing page as a single URL, not as separate variants. If you want to measure member versus anonymous conversion separately, you need to push a custom event with the user's group attached. I send a "viewed-pricing" event to Google Analytics 4 with a "user_group" parameter from the Webflow data layer.

For AEO citations, ChatGPT Search and Google AI Mode read the initial HTML rendered for anonymous visitors. That means your standard price is the price that appears in AI answers. If you want AI Overviews to surface "members get 20 percent off", include that copy in the public HTML, not behind the member visibility rule. According to Princeton's March 2026 GEO-bench paper, AI models cite the visible price 4.2x more often than the alternative when both are present in markup.

I also add schema markup to the Plans collection using the Webflow Product schema field, which I cover in my Webflow product schema tutorial. The schema reflects standard pricing, with the member discount described in a separate offer section, so AI models can cite both variants accurately.

How Should You Build Your First Member-Only Pricing Variation This Week?

Pick a Webflow site you already have Memberships enabled on. Create a single Plans collection with name, standard price, and member price fields. Build the pricing card template and add conditional visibility rules to each price element. Create a paying-member user group in Memberships. Test the three states (anonymous, free member, paid member) against the published site. The whole build should take you 35 to 45 minutes once you stop fighting JavaScript.

For the Memberships setup that makes this work, my walkthrough on Webflow Memberships passkey login covers the modern auth flow. For the broader pricing page design pattern that pairs with member-only variations, my piece on Webflow pricing page conditional visibility shows how the pattern extends beyond auth. And for the schema markup you should add so AI Overviews cite the right price, my tutorial on Webflow Product schema for AI citations has the JSON-LD template.

If you want help wiring this on a live Webflow project, including the Stripe automation and the Cloudflare cache rules, I am happy to walk through it on a call. Let us chat.