Show member prices and greetings in cached sections

​

Understand the building blocks

​

Choose the helper

​

Show the member’s price

<p class="product-card__price">
  {{ product | member_price }}
</p>

<fluid-member-price
  data-product-id="1842"
  data-variant-id="5127"
  data-country-iso="US"
>$48.00</fluid-member-price>

​

Supply your own guest price

{%- assign formatted_product_price = product.price | money -%}

{{ product | member_price: formatted_product_price }}

• When the value is neither a product nor a variant nor a resource-collection product, the filter returns it unchanged.
• When the value carries no country context, the filter returns the plain guest price with no shell.
• When member storefront is disabled, the filter returns the plain guest price with no shell.

​

Greet the member

<p class="hero__eyebrow">
  {% member %}
    Welcome back, {% member_name %}.
  {% else %}
    Shop with the Fluid community.
  {% endmember %}
</p>

<div data-fluid-member-show="member" hidden>
  Welcome back, <fluid-member-name></fluid-member-name>.
</div>
<div data-fluid-member-show="guest">
  Shop with the Fluid community.
</div>

​

There is no member variable

​

How a section becomes member-aware

<section
  data-fluid-section="featured_products"
  data-fluid-section-type="product_grid"
  data-fluid-member-storefront="true"
>
  <!-- Cards with fluid-member-price shells render here. -->
</section>

​

What the SDK does in the browser

1. Marks the document root with data-fluid-member-token="present" and sets every marked section to data-fluid-member-state="masked".
2. Hides every shell inside a marked section until that shell is settled, so a member never sees a retail price flash before their own.
3. Reads the member’s display name from the token and fills each <fluid-member-name>. It shows member branches and hides guest branches.
4. Requests member pricing once per distinct product. For each price shell it selects the variant and country the shell names and writes the formatted price string it received. The SDK performs no arithmetic and no currency formatting of its own.
5. Marks each shell data-fluid-member-settled as it writes a value or decides to keep the fallback. A section becomes resolved once every shell inside it is settled.

​

Resolution states

​

Style on resolution states

[data-fluid-member-storefront][data-fluid-member-state="masked"] .product-card__price {
  min-width: 5ch;
  min-height: 1.5em;
}

[data-fluid-member-storefront][data-fluid-member-state="resolved"] fluid-member-price {
  color: var(--color-accent, #2464ec);
  font-weight: 600;
}

​

Make the product card member-aware

{% comment %} Before {% endcomment %}
<span class="product-card__price">{{ formatted_product_price }}</span>

{% comment %} After {% endcomment %}
<span class="product-card__price">{{ product | member_price: formatted_product_price }}</span>

​

Test your section

1. Feature disabled. Render the section and confirm the output matches the version without member helpers. There must be no shells and no section marker.
2. Guest, feature enabled. Confirm the page looks identical to the disabled render. Inspect the HTML and confirm that shells carry the correct guest price and country, that member branches carry hidden, and that the section wrapper carries the marker.
3. Signed-in member, SDK configured. Confirm that prices swap to the member’s price without a visible retail flash, that <fluid-member-name> fills, and that the member branch replaces the guest branch.

​

Troubleshoot a member-aware section

​

Implementation checklist for coding agents

• Confirm member storefront is enabled for the target company. Do not infer it from the presence of this guide.
• Use member_price, {% member_name %}, and {% member %}…{% else %}…{% endmember %} only. Do not hand-write shell elements or state attributes.
• Pass a product or variant value to member_price. Pass the template’s formatted guest price as the argument when the template already formats it.
• Put guest text in the {% else %} branch of {% member %}. Never rely on {% member_name %} for guest output.
• Do not add a member variable, a viewer check, or a schema key. The section marker is derived from output.
• Do not add the SDK script to the layout. Fluid injects it when it is configured.
• Style on data-fluid-member-state and data-fluid-member-settled. Do not override hidden on shells or branches.
• Verify the disabled render is byte-identical to the pre-change render.
• Verify the guest render with the feature enabled carries shells, the marker, and hidden member branches.
• Where the SDK is configured, verify a signed-in member sees their price without a retail flash and a customer sees the retail fallback.
• Report which files changed and which checks ran. Editing a local theme, publishing a theme, and enabling the feature are separate actions; confirm the target and authorization before each remote change.

​

Copyable task brief

Make the product card in this Fluid theme member-aware using the Member-aware sections guide.

First inspect the card component, the sections that render it, and the theme's price styles.
Confirm that member storefront is enabled for the target company.

Replace the card's formatted price with the member_price filter, passing the product or variant
the card already renders and the card's existing formatted price as the argument. Add a greeting
to the home hero using the member block with a member_name shell in the member branch and the
existing copy in the else branch.

Do not hand-write shell elements, state attributes, or a member variable.
Do not add the SDK script to the layout.
Reserve space for masked prices in the card CSS so the layout does not shift.

Verify the disabled render is unchanged and the guest render carries shells and the section
marker. Where the SDK is configured, verify a signed-in member sees their price without a
retail flash.
Do not publish or overwrite an existing theme without explicit authorization.
Report completed checks and any environment-dependent checks still needed.