Build member page templates and layouts

Coming soon: member storefront is in a limited pilot and is not yet generally available. This page describes the pilot release for companies that have it enabled, and details can change before general availability. Contact Fluid support to ask about enabling it for your company.

Member pages render on every request for the signed-in member. They are the one place in a theme where Liquid may read who is looking. This page covers the templates that make up a member area, the layout that frames them, and the values they receive. For authentication links, see Sign in and sign out. For the complete field reference, see Member Liquid variables. For who can open which page, see Member sites. For member values on cached storefront pages, see Member-aware sections.

No root theme ships member page templates or a member layout. Until a site has a published page with the / slug, the account subdomain root returns a not-found response for its members.

Understand the template types

Template type	Served at	Purpose
`members_page`	`/{slug}`, or `/` for the home page	One template per member page you add to a site. The page with the `/` slug is the site’s home page
`layouts` template named `member`	—	The frame a site’s pages render inside

A theme export lays them out beside the storefront templates:

layouts/
  theme.liquid
  member.liquid
members_page/
  home/
    index.liquid
  rewards/
    index.liquid
members_sites.json

Member page templates are created with their pages in the theme editor, including the home page. Authentication uses Fluid’s hosted sign-in screen.

Create the member layout

A site’s pages render inside the layout the site names. A layouts template named member is what a new site chooses when the theme has one, so start there. The layout owns the signed-in chrome: the greeting, the site’s navigation, and sign-out. Create layouts/member.liquid:

<!DOCTYPE html>
<html lang="{{ localization.language.iso_code | default: 'en' }}">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ page_title }} — {{ company.name }}</title>
    {{ content_for_header }}
    {{ 'member.css' | asset_url | stylesheet_tag }}
  </head>
  <body class="member-area">
    <header class="member-header">
      <a class="member-header__brand" href="{{ member_routes.root }}">
        <img src="{{ company.logo_url }}" alt="{{ company.name }}" />
      </a>

      <p class="member-header__greeting">
        Signed in as {{ member.full_name | default: member.email }}
      </p>

      <a href="{{ member_routes.sign_out | escape }}" class="member-header__sign-out">Sign out</a>
    </header>

    <div class="member-area__body">
      <nav class="member-nav" aria-label="{{ settings.menu.title }}">
        <ul>
          {% for item in settings.menu.menu_items %}
            <li>
              <a
                href="{{ item.url }}"
                {% if item.url == request.path %}aria-current="page"{% endif %}
              >{{ item.title }}</a>

              {% if item.sub_menu_items.size > 0 %}
                <ul>
                  {% for child in item.sub_menu_items %}
                    <li><a href="{{ child.url }}">{{ child.title }}</a></li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </nav>

      <main class="member-main">
        {{ content_for_layout }}
      </main>
    </div>
  </body>
</html>

Three parts of this layout are load-bearing:

{{ content_for_header }} carries the normal theme header output and account screens runtime. Keep it for system screens and other theme features.
The sign-out anchor follows member_routes.sign_out. It needs no form or CSRF-token variable. Confirm the updated authentication release is deployed before migrating an older theme.
The navigation reads settings.menu, which is the site’s menu in the same shape as a link_list setting. A navigation component you wrote for the storefront works here unchanged.

Do not load the storefront’s cart or affiliate scripts in this layout unless the member area needs them. Do not use member_price, {% member_name %}, or {% member %} on member pages. Those helpers emit shells for the cached storefront. Here the render knows the member, so read member directly.

Build the home page

Add a page with the / slug to the site. It is served at the site root, so it is the first page a member sees after signing in. Compose its members_page template, for example members_page/home/index.liquid:

<section class="member-home">
  <h1>Welcome back, {{ member.first_name | default: member.full_name }}</h1>

  {% if member.status == "active" %}
    <p>Your account is in good standing.</p>
  {% endif %}

  <div class="member-home__links">
    {% for item in settings.menu.menu_items %}
      <a class="member-home__card" href="{{ item.url }}">{{ item.title }}</a>
    {% endfor %}
  </div>
</section>

{% section 'member_announcements' %}

{% schema %}
{
  "name": "Member home",
  "settings": []
}
{% endschema %}

The home page renders inside whatever layout the member’s site names. Do not add a {% layout %} tag to it or to any other member template. The site decides the frame, and a tag in the template is ignored. Use an ordinary link wherever your theme offers sign-in:

<a href="{{ member_routes.sign_in | escape }}" class="member-sign-in">Sign in</a>

Fluid hosts authentication. Both hosts use /auth/sign_in to redirect to the auth app without rendering a theme template. Do not create a members_login template or a password form. See Sign in and sign out for the full flow and rollout requirements.

Compose custom pages

Each page you add to a site gets a members_page template, created with the page and named after it. Open the page in the theme editor and drag sections onto it as you would on a storefront page. The template can also be edited in Code Mode. Every member page, including the home page, receives the same values: member, member_content, member_routes, and settings.menu. It renders inside its site’s layout. Its slug and its site decide where it is served and who can open it, both of which are set on the page rather than in the template. See Add pages to a site.

Read member page values

Every authorized member page receives these values on top of the theme’s usual variables.

Profile and content

Read member for approved profile fields and member_content for lazy media, content pages, and playlists. Collections load only when consumed. See Member Liquid variables for every field, visibility rules, pagination, and examples.

Member routes

Field	Value
`member_routes.root`	`/` on the current host
`member_routes.sign_in`	Hosted sign-in flow with a return destination
`member_routes.sign_out`	`/auth/sign_out`; follow it with a normal link

The route values are independent of login state. There is no member_routes.csrf_token variable. On cached storefront pages, include stable links rather than choosing between them using private member data. settings.menu is the resolved menu of the member’s site, deep-merged into the theme’s settings so everything else under settings survives.

Field	Value
`settings.menu.title`	The menu’s title, such as `Reps navigation`
`settings.menu.handle`	The menu’s slug, or empty for a derived menu
`settings.menu.menu_items`	An ordered list of items. Each has `title`, `url`, and `sub_menu_items`

Item URLs are already resolved for the account subdomain. Render them as given. Nothing marks the current page, so compare item.url with request.path when you need an active state.

Follow the rendering rules

Member pages render on every request for the signed-in member. They are never cached and never served by the CDN.
Every member page is sent with headers that forbid caching and indexing. Authentication redirects also forbid caching and indexing.
A member who matches no site, an unpublished page, and a page in another member’s site all return a not-found response. A site without a published / page returns a not-found response at the root.
The site chooses the layout. A template’s own {% layout %} tag is ignored.
Variants of a member template are chosen by default or region, never by member. Branch on member inside one template instead of adding a variant per audience.
System screens render as members_page templates that Fluid supplies. Your layout frames them; you do not author their body.

Test your templates

Sign in as a member and open the home page. Confirm the layout, greeting, and menu render, and that no storefront header appears.
Follow every menu item. Confirm each opens inside the same layout.
Open a custom page and confirm it renders its sections and member values.
Follow the sign-out link. Confirm your session ends on the current host, and that opening a member page sends you to sign in.
Follow the account host sign-in link as a guest and confirm it redirects directly to hosted authentication.
Open a system screen and confirm it renders inside your layout.

Troubleshoot a member template

Symptom	What to check
The home page returns not found	Confirm the member’s site has a published page with the `/` slug, the member matches an active site, and member storefront is enabled.
`{{ member.first_name }}` renders empty	Confirm you are on a member page, not a storefront page or a builder preview. Check the field name in the member variables reference.
The page wears the storefront header	The site is framed in `theme`. Create `layouts/member.liquid` and pick it in the site’s settings. A `{% layout %}` tag in the template does nothing.
Sign-out does nothing or fails	Confirm the updated authentication release is deployed and your anchor uses `member_routes.sign_out`. If sign-out reports a failure, retry it.
The menu is empty	Confirm the site has a menu with items, or that the theme has published pages for the derived menu. Confirm you read `settings.menu.menu_items`.
A system screen renders an empty area	Confirm `{{ content_for_header }}` is in the layout and that the account screens runtime is enabled for the company.
`member_price` or `{% member %}` on a member page renders oddly	Do not use storefront member helpers here. Read `member` directly.

Implementation checklist for coding agents

Treat this page as the member template contract. Read the target theme before editing it, and preserve its existing conventions and content.

Confirm member storefront is enabled for the target company. Do not infer it from the presence of this guide.
Create layouts/member.liquid with {{ content_for_header }}, {{ content_for_layout }}, a navigation loop over settings.menu.menu_items, and a normal link to member_routes.sign_out.
Add a published page with the / slug to each site and compose its members_page template as the home page. Use member_routes.sign_in for sign-in links; authentication does not render a theme page.
Read only the fields documented in Member Liquid variables. Load content collections only where the page needs them.
Do not add {% layout %} tags to member templates. The site owns the frame.
Do not use member_price, {% member_name %}, or {% member %} on member pages.
Do not hand-write system screen markup. Fluid renders the screens.
Do not write member values into shared assets, cached pages, or storefront templates.
Verify the home page, a custom page, a system screen, sign-out, and the guest sign-in flow.
Report which files changed and which checks ran. Editing a theme, publishing it, and enabling the feature are separate actions; confirm the target and authorization before each remote change.

Copyable task brief

Build the member area templates for this Fluid theme using the Member page templates guide.

First inspect the theme's existing layout, styling tokens, and navigation component.
Confirm that member storefront is enabled for the target company.

Create layouts/member.liquid with the signed-in header, a navigation built from
settings.menu.menu_items, a link to member_routes.sign_out, content_for_header,
and content_for_layout.
Add a published home page with the / slug to each site, and give its members_page template
a greeting from member.first_name and a section slot.
Use member_routes.sign_in for sign-in links. Do not create a themed login page.

Do not add layout tags to member templates.
Do not use member_price, member_name, or the member block on member pages.
Reuse the theme's tokens and its existing navigation component where possible.

Verify the home page, a custom page, a system screen, sign-out, and the guest sign-in redirect.
Do not publish or overwrite an existing theme without explicit authorization.
Report completed checks and any environment-dependent checks still needed.

For the values every storefront template receives, see Theme variables. For layouts in general, see the Developer guide.

Style system screens

System screens use standard theme settings for colors and font families. See System screen styles for the setting IDs, the upcoming CSS override contract, and how to verify presets in the builder preview.

Start here

Building blocks

Storefront features

Advanced

Member storefront

Build member page templates and layouts

Understand the template types

Create the member layout

Build the home page

Compose custom pages

Read member page values

Profile and content

Member routes

The site’s menu

Follow the rendering rules

Test your templates

Troubleshoot a member template

Implementation checklist for coding agents

Copyable task brief

Style system screens

​Understand the template types

​Create the member layout

​Build the home page

​Add sign-in links

​Compose custom pages

​Read member page values

​Profile and content

​Member routes

​The site’s menu

​Follow the rendering rules

​Test your templates

​Troubleshoot a member template

​Implementation checklist for coding agents

​Copyable task brief

​Style system screens

Understand the template types

Create the member layout

Build the home page

Add sign-in links

Compose custom pages

Read member page values

Profile and content

Member routes

The site’s menu

Follow the rendering rules

Test your templates

Troubleshoot a member template

Implementation checklist for coding agents

Copyable task brief

Style system screens