Skip to main content
Components let you show different messages to different customers using the same portal layout. Each component contains variants with conditions. Only the first matching variant appears.

​
Enable the preview

This feature is currently a staff-enabled preview. Ask Firmhouse to enable Conditional Customer Portal Content under New Features for your project. You also need Customer Portal v2.

​
Create a component

  1. Open Customer Portal → Components and choose Create component. Choose Create with Oppy on the creation page if you want Oppy to generate the content from a description.
  2. Enter a name and a template key, such as cancellation_reassurance. The key stays fixed after creation so existing placements keep working.
  3. Add a variant, or edit the draft variant created by Oppy.
  4. Add conditions for the customer’s products, plan, segment, subscription status, deliveries, revenue, Shopify order tags, or selected cancellation reason. Every condition must match.
  5. Set the priority. Lower numbers are checked first. If priorities tie, the variant created first wins.
  6. Switch between Preview and Code to review and edit the content. After saving a variant, choose Edit with Oppy to iterate on its content and layout. You can also select the placed component in the template editor to edit it with Oppy.
  7. Save, preview, and enable the variant when ready. Variants start disabled; components appear where you place their tag.
To create a fallback, leave a variant without conditions. Fallbacks are always checked after conditional variants. If nothing matches and there is no enabled fallback, customers see nothing.

​
Place content in a template

Copy the tag from the component and insert it anywhere in a Customer Portal page template:
The same component can appear on multiple pages. Saving a variant updates its enabled placements immediately. Components cannot contain other component tags. Component content supports the usual subscription, project, locale, and churn_request Liquid context. Use unique translation keys with the t filter; translations for referenced variants appear in the surrounding page’s translation editor.

​
Preview the result

The inline preview shows the saved content of the selected variant, including disabled variants. Switch between Desktop and Mobile to inspect its responsive layout. The complete component scales to fit the preview area. It does not evaluate eligibility. Open Customer Portal → Templates and edit a template containing your component. Use the template editor’s subscription picker to preview the matching content in its page layout. The cancellation follow-up template also lets you choose a reason. Enable the variants to preview their eligibility; no matching content produces an editor placeholder. Remove the component tag to stop showing it on a page.

​
Customize cancellation pages

The template library includes Cancellation reasons (cancellation.liquid) and Cancellation follow-up (cancellation_follow_up.liquid). Keep the corresponding control component in each layout:
Place conditional content before, after, or alongside these controls. Cancellation reasons remain available to customers independently of content conditions. A selected-reason condition only matches after the customer chooses a reason and presses Continue. Selecting a radio button alone does not refresh the content. The initial reasons page has no selected reason. Existing cancellation pages keep using the current Other pages layout until you publish the corresponding cancellation template. Disabling the preview feature restores that layout and hides components. Cancellation permissions, offers, and completion actions continue to use the existing flow.