Members-only section with upsell

A section pair: members see the gated content; everyone else sees a locked card with an upsell to the plans. Gated content is removed on the server, so it never reaches a visitor who isn't a member.

membershipspaywallmembers-onlygatedupselllockcourse

About this block

The pattern to copy for any members-only content on a public page: one container shows only to members, its sibling shows only to everyone else.

When to use it

  • To tease members-only material on a public page.
  • Any time part of a page should be paid content.

What's inside

  • Members Content: gated auth me.isMember equals true. Put anything here; it's left out of the page for everyone else, not just hidden.
  • Upsell: gated auth me.isMember not-equals true, so signed-out visitors and signed-in non-members both see it.

How to customize it

  • Gate on one plan instead of any membership: change both conditions to me.plans.<slug> exists / not-exists.
  • Point See plans at your pricing section (#pricing) and Sign in at your account page.

Questions

Can someone read the members content from the page source?
No. The server removes it before the page is sent unless the visitor is a signed-in member.

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library

Course lesson list (free + locked lessons)

A numbered list of lessons from a collection. Free lessons link straight in; paid lessons show a padlock, a Pro chip and their teaser, and still link to the lesson page, which shows the upsell.

Member account (sign-in, memberships, billing)

One account page for a membership site: signed-out visitors get the email sign-in form; members see their plans with end dates, a Manage billing button and sign out.

Members-only video lesson

A lesson detail section: a video only plan holders can play (a members-only download streamed inline), the lesson notes from the collection, and a resources card. Non-members see an upsell where the video would be.

Membership pricing (free + paid plan)

Two membership plan cards: a free plan that signs visitors up with an email link, and a paid plan priced live from Stripe that goes straight to checkout. Members see a link to the course instead of a buy button.

Section gated by membership plan

A section with three states chosen on the server: a pro member sees the lessons (the second one dripped open after seven days), a signed-in member on another plan sees an upgrade card, a visitor sees a sign-in card.

Hero split

Two-column hero with eyebrow, heading, description, and CTAs on the left. Image on the right.

Features three columns

Centered heading with three columns, each showing an icon, title, body text, and link.

Simple CTA

Centered call-to-action on an accent background with heading, description, and buttons.

Footer multi-column

Grid footer with brand blurb and multiple link columns. Copyright and social links at the bottom.

Navigation bar

Standard header with logo, nav links, primary CTA, and a mobile hamburger menu.

Testimonial cards

Two-column grid of testimonial cards with quote, photo avatar, name, and role.

“

Hero centered

Clean centered hero with eyebrow, large heading, description, and two CTA buttons.