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.

Membership page content source

---

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.

Membership page shows ONLY enabled/active tiers

Add tiers in Ghost settings -> Tiers after connecting with Stripe

---

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.

Membership FAQs are populated from toggle cards in /membership/ page

---

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