> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/travio/custom-pages/membership-page.md).

# Membership Page

Live preview: <https://travio.themeupstudio.com/membership/>

This guide explains how the Membership page works, what it depends on in Ghost, and how to customize it.

### Route and Template

* URL: `/membership/`
* Route source: `routes.yaml`
* Template file: `membership.hbs`
* Page data source: `data: page.membership`

Create a Ghost page with slug `membership` so page header and optional FAQ content render correctly.

<div data-with-frame="true"><figure><img src="/files/yEh8yDoyOulN3Hsm9pZ7" alt=""><figcaption><p>Membership page content source</p></figcaption></figure></div>

***

### What the Membership Page Includes

1. Page header (from `page.membership`)
2. Membership pricing cards (free + paid tiers)
3. Optional FAQ/content section
4. Bottom CTA section

***

### Where Pricing Data Comes From

Membership cards are not hardcoded. Travio fetches tiers from Ghost:

* Source: `get "tiers"`
* Includes: monthly price, yearly price, benefits
* Filter: `visibility:public+active:true`

So only active public tiers are shown on the page.

<div data-with-frame="true"><figure><img src="/files/BS6MOl0BZYKCfTEQch6j" alt=""><figcaption><p>Membership page shows ONLY enabled/active tiers</p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/43u6YkVW3marRm7yZuMB" alt=""><figcaption><p>Add tiers in Ghost settings -> Tiers after connecting with Stripe</p></figcaption></figure></div>

***

### Ghost Configuration Requirements

For this page to work as intended:

1. Members must be enabled in Ghost
2. At least one tier should be configured
3. Paid tiers should include monthly/yearly values if needed
4. Tier benefits should be configured for clearer cards

If members are disabled:

* Page shows fallback message: membership signup unavailable.

If no active public tiers exist:

* Page shows fallback message: no tiers configured yet.

***

### Theme Behavior for Free vs Paid Tiers

Travio automatically labels free tier cards with a “Free” badge (`type = free`), while paid tiers use standard paid styling.

No manual template edits required for this distinction.

***

### FAQ

Below pricing cards, Travio optionally renders a FAQ section from the `membership` page content:

* If `page.membership` has HTML/content, section is shown
* Section title is “FAQs”
* Content is rendered in a styled rich-content container

If page content is empty, FAQ section is omitted.

<div data-with-frame="true"><figure><img src="/files/uIMatwbRNnhYvkYfK2bM" alt=""><figcaption><p>Membership FAQs are populated from toggle cards in /membership/ page</p></figcaption></figure></div>

***

### Related Membership Pages in Travio

Membership experience in Travio is distributed across:

* `/membership/` — pricing + FAQ
* `/signup/` — member signup form
* `/signin/` — member signin form
* `/subscribe/` — newsletter-focused subscription form

So `/membership/` is your main plans + info page, while auth/subscribe flows are on dedicated pages.

***

### Customization Points

#### In Ghost Admin

* Edit page `membership` title/excerpt/content
* Configure tiers, prices, and benefits
* Enable/disable members features

#### In Theme Files (developer)

* Layout logic: `membership.hbs`
* Tier card markup/styling: `partials/cards/card-membership-tier.hbs`
* FAQ styling behavior: membership content classes and JS toggles

***

### Pricing Toggle and FAQ Interaction

Travio JS includes membership helpers:

* Pricing mode toggle behavior (monthly/yearly views)
* FAQ accordion/toggle behavior inside membership content

These activate automatically when corresponding elements exist in the page.

***

### Common Issues

* No pricing cards shown: members disabled or no active public tiers.
* Only free tier shown: paid tiers not active/public or missing config.
* FAQ section missing: membership page content is empty.
* Buttons/checkout flow not working: Ghost membership/payment setup incomplete.
* Page header missing: `membership` slug page not created.

***

### Best Practices

1. Keep tier names short and benefit-focused
2. Populate tier benefits clearly (avoid generic text)
3. Add meaningful FAQ content (billing, cancellation, access rules)
4. Ensure paid tiers are public + active before launch
5. Test end-to-end: `/membership/` → `signup`/`signin` → `checkout`/`access`

***

### Quick Setup Checklist

* Page slug exists: `membership`
* Members enabled in Ghost
* Active public tiers configured
* Prices/benefits verified
* FAQ content added (optional but recommended)
* Signup/signin pages published and tested