Skip to main content
Components are reusable pieces of content for your Customer Portal. Add a component to a page, then choose which customers see it.

​
Enable the preview

This feature is currently a staff-enabled preview. Ask Firmhouse to enable Customer Portal Flow & Components under New Features for your project. You also need Customer Portal v2. The same switch makes the cancellation flow builder available; customers use that flow only after you publish it.

​
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. Firmhouse generates the template key from it, for example cancellation_reassurance. The key stays fixed after creation.
  3. Switch between Preview and Code to review and edit the content. Choose Edit with Oppy to iterate on its content and layout.
  4. Save the component. The components overview shows a live preview of each component and where it is used. You can delete a component from there.
Component content supports the usual subscription, project, locale, and churn_request Liquid context. Use unique translation keys with the t filter; translations for referenced components appear in the surrounding page’s translation editor. Components cannot contain other component tags.

​
Add a component to a page

Open Customer Portal → Templates and edit a page in the visual editor. Hover or select any part of the page and choose + Component above or below it. Pick a component, and Firmhouse saves a new draft of the page with the component in place. Publish the draft to show it to customers. Select an added component to choose who sees what at that spot:
  • Add more than one component to show different customers different content.
  • Add conditions to each component for the customer’s products, plan, segment, subscription status, deliveries, revenue, Shopify order tags, or selected cancellation reason. Every condition must match.
  • Components are checked from top to bottom, and the first match is shown. A component without conditions is shown to everyone who did not match an earlier one.
  • If nothing matches, customers see nothing.
Choose Remove from page to take the component out of the draft. The panel shows which component the preview subscription currently sees, and you can switch the preview subscription in the editor toolbar to check other customers. You can also select a component in the editor to edit it with Oppy. Editing a component updates every page that shows it, so review where it is used before changing a component that is already live. You can also paste a component tag into a template yourself:

​
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 components before, after, or alongside these controls. Cancellation reasons remain available to customers independently of component 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, hides components, and returns cancellation attempts to the existing journey. Cancellation permissions, offers, and completion actions continue to use the existing flow.