Shared page components

These tags are reused across multiple page templates.

`{% component 'component_key' %}`

Renders a reusable component. Every customer sees it. The component must exist in the same project as the template. Used in: Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Other pages, Cancellation reasons, Cancellation follow-up, and Subscription profile

{% component 'cancellation_reassurance' %}

Manage components under Customer Portal → Components.

`{% placement 'placement_key' %}`

Renders the first component in a placement whose conditions match the current subscription. Placements are created in the visual editor with + Component, which also adds the tag to the page. When no component matches, the tag renders nothing outside the visual editor. Used in: Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Other pages, Cancellation reasons, Cancellation follow-up, and Subscription profile

{% placement 'dashboard_hero' %}

`{% workflow id: 44 %}`

Loads a Workflow Builder workflow into a Liquid variable without rendering markup. The variable is available only when the workflow has a published version; in the visual editor, the current draft is available for preview. Use its configured inputs to show products or other workflow details without copying them into the template. Used in: Navigation, Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Other pages, Cancellation reasons, Cancellation follow-up, and Subscription profile

Parameter	Type	Default
`id`	Integer	None
`as`	String	`"workflow"`

{% workflow id: 44 %}
{% if workflow %}
  {% for input in workflow.inputs %}
    {% if input.product %}
      <span>{{ input.product.title }}</span>
    {% endif %}
  {% endfor %}
{% endif %}

Renders the shared Navigation template (navbar.liquid). Edit its HTML, Liquid, and Tailwind classes once to style the navigation on every page that uses this tag. Used in: Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Subscription profile, Other pages, Cancellation reasons, and Cancellation follow-up

{% navbar %}

Standard Customer Portal V2 page templates continue to use {% legacy_navbar %}. To opt into the shared navigation, replace that tag with {% navbar %} on each page where you want to use it. The legacy tag remains supported. The new tag takes no parameters; configure the navigation in navbar.liquid. The default has a light background, merchant branding, an active-page underline, and an account menu with logout. On mobile, the page links sit below the brand and account controls; a back link appears when the page provides one. It does not include an invoices link. To add one, include an anchor using navigation.invoices_url in the Navigation template. On the subscription selection page, navigation shows merchant branding, support when enabled, and logout. It hides subscription-specific links and the account menu. On small screens, support and logout sit below the branding.

Liquid field	Description
`navigation.links`	Dashboard, orders, and support links. Each has `key`, `url`, `label_key`, and `visible`.
`navigation.active_tab`	Current page key, such as `dashboard`, `orders`, `invoices`, or `support`.
`navigation.back_url`	Mobile back link, when the current page provides one.
`navigation.dashboard_url`, `navigation.orders_url`, `navigation.invoices_url`, `navigation.support_url`	Portal links for the current project and locale.
`navigation.account_details_url`, `navigation.switch_subscription_url`	Account details and subscription selection links.
`navigation.show_support`, `navigation.show_account_details`	Whether those links apply to the current project or subscription.
`navigation.subscription_selection`	Whether the customer is on the subscription selection screen.
`navigation.initials`, `navigation.id_label_key`, `navigation.switch_label_key`	Avatar initials and translation keys for account/subscription labels.
`project.company_name`, `project.company_logo_url`	Brand name and logo.
`subscription`, `multi_subscription_ssc`, `locale`	The current subscription, whether subscription switching is available, and current locale.

Translate label keys with | t and escape dynamic HTML attributes with | escape. Navigation has its own versions, translations, and publishing controls. Portal previews use the selected navbar version; live pages use its published content. The Navigation template cannot contain {% navbar %}, {% component %}, or {% placement %}.

`{% logout_button %}`

Renders a logout button with the form, DELETE method, and CSRF protection handled by Firmhouse. The label and confirmation message use the portal’s translations by default. Used in: Navigation, Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Subscription profile, Other pages, Cancellation reasons, and Cancellation follow-up

{% logout_button button_classes: 'text-white hover:underline', form_classes: 'lg:hidden', data_controller: 'tracking', data_action: 'click->tracking#logout' %}

Parameter	Description
`button_classes`, `form_classes`	CSS classes for the button and its form.
`label`	Custom button text. Defaults to the translated logout label.
`aria_label`	Optional accessible label for the button.
`confirmation`	Custom confirmation message; `false` removes it. Defaults to the translated logout confirmation.
`data_*`	Button data attributes, such as `data_controller`, `data_action`, or `data_tracking_id`. Underscores become hyphens in HTML.
`form_data_*`	Form data attributes. The form defaults to `data-turbo="false"`.

`{% legacy_navbar %}`

Shared top navigation. Used in: Navigation, Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Subscription profile, Other pages, Cancellation reasons, and Cancellation follow-up

Parameter	Type	Default
`navbar_classes`	String	`"bg-gray-900 border-b border-gray-700"`
`link_classes`	String	`"text-white"`
`link_hover_classes`	String	`"hover:text-white hover:opacity-100"`
`show_invoices`	Boolean	`false`

{% legacy_navbar link_classes: "text-gray-900 text-sm font-medium" %}

The invoices overview is hidden by default. Set show_invoices to include it in the navigation:

{% legacy_navbar show_invoices: true %}

<div class="bg-gray-900 text-white text-sm">
  <nav class="flex items-center justify-between p-4">
    <a href="/self-service" class="font-semibold">Subscription</a>
    <div class="flex gap-4">
      <a href="/self-service/orders">Orders</a>
      <a href="/self-service/invoices">Invoices</a>
      <button type="button">Logout</button>
    </div>
  </nav>
</div>

`{% shopify_storefront_access_token %}`

Outputs the project’s Shopify Storefront API public access token. Use this to make client-side requests to the Shopify Storefront GraphQL API, for example to fetch product data or build custom product browsing experiences. Returns an empty string when the Shopify subscriptions app is not configured for the project. The token is cached for 1 hour to avoid repeated Shopify Admin API calls. Used in: Navigation, Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Subscription profile, Other pages, Cancellation reasons, Cancellation follow-up, and Shared head

<script>
  window.shopifyStorefrontToken = "{% shopify_storefront_access_token %}";
</script>

`{% shopify_store_domain %}`

Outputs the Shopify store domain (for example my-store.myshopify.com) configured for the Shopify app. Use this to build Shopify Storefront API endpoints or other store-specific URLs directly in your templates. Returns an empty string when the Shopify app is not configured for the project. Used in: Navigation, Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Subscription profile, Other pages, Cancellation reasons, Cancellation follow-up, and Shared head

<script>
  const shopifyDomain = "{% shopify_store_domain %}";
  const storefrontToken = "{% shopify_storefront_access_token %}";
  const storefrontEndpoint = `https://${shopifyDomain}/api/2026-01/graphql.json`;

  fetch(storefrontEndpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Storefront-Access-Token": storefrontToken
    },
    body: JSON.stringify({
      query: `{
        products(first: 10) {
          edges {
            node {
              id
              title
              handle
            }
          }
        }
      }`
    })
  })
    .then(res => res.json())
    .then(data => console.log(data));
</script>

`{% slide_out_pane %} ... {% endslide_out_pane %}`

Reusable slide-out pane for custom overlays across Customer Portal templates. Used in: Navigation, Dashboard, Orders, Order details, Catalog, Offer, Offer confirmation, Subscription profile, Other pages, Cancellation reasons, and Cancellation follow-up

Parameter	Type	Default
`slide_from`	String (`"right"`/`"bottom"`)	`"right"`
`pane_id`	String	`"slide-out-pane"`
`slide_out_percentage`	String (`"10"` … `"90"`)	`"40"`

{% slide_out_pane slide_from: "right", slide_out_percentage: "40", pane_id: "product-info-pane" %}
  <div id="product-info-content">Select a product to see details.</div>
{% endslide_out_pane %}

Manual API (no custom events required):

<script>
  window.sscSlideOutPane.open("product-info-pane", { productId: "123" });
  window.sscSlideOutPane.close("product-info-pane");
  window.sscSlideOutPane.toggle("product-info-pane");
  const isOpen = window.sscSlideOutPane.isOpen("product-info-pane");
</script>

pane_id maps to the pane DOM id.
If omitted in API calls, the first registered slide-out pane is used.

`{% subscription_files %}`

Lists files attached to the subscription that are visible to the customer. The component renders nothing when there are no customer-visible files. Used in: Dashboard and Subscription profile This component has no parameters.

{% subscription_files %}

<div class="bg-white border border-gray-200 rounded-xl p-6">
  <h2 class="text-xl font-semibold text-gray-900 mb-4">Files</h2>
  <ul class="divide-y divide-gray-200">
    <li class="py-3">
      <a href="/self-service/subscription_files/123">Rental agreement.pdf</a>
      <p class="mt-1 text-sm text-gray-500">128 KB</p>
    </li>
  </ul>
</div>

Translation Filter: `| t`

Use | t to translate strings from the self_service_center i18n namespace.

{{ 'dashboard.cancel_subscription' | t }}
{{ 'churn_requests.skip_next_order.skip_orders' | t: count: 2 }}
{{ 'dashboard.cancel_subscription' | t: locale: 'nl' }}
{{ 'dashboard.missing_key' | t: default: 'Cancel subscription' }}

Keys are resolved under self_service_center (for example, dashboard.cancel_subscription maps to self_service_center.dashboard.cancel_subscription).
locale is optional; when omitted, the current request locale is used.
default is optional; when present, it is used as fallback for missing translations.
If a translation key is missing and no default is provided, the original key string is returned.
If required interpolation data is missing, the filter returns the original key with the missing argument name (for example, churn_requests.skip_next_order.skip_orders (missing interpolation: count)).

Interpolation requirement example:

{{ 'churn_requests.skip_next_order.skip_orders' | t }}
{{ 'churn_requests.skip_next_order.skip_orders' | t: count: 2 }}

Get Started

Get Started on Shopify

Continue your project setup

Customer Portal v2

Self Service Center v1

Manage

Reporting & Metrics

Configure

Integrations & API

Billing and Account

Explained

Troubleshooting

Enterprise

`{% component 'component_key' %}`

`{% placement 'placement_key' %}`

`{% workflow id: 44 %}`

`{% navbar %}`

`{% logout_button %}`

`{% legacy_navbar %}`

`{% shopify_storefront_access_token %}`

`{% shopify_store_domain %}`

`{% slide_out_pane %} ... {% endslide_out_pane %}`

`{% subscription_files %}`

Translation Filter: `| t`

​{% component 'component_key' %}

​{% placement 'placement_key' %}

​{% workflow id: 44 %}

​{% navbar %}

​{% logout_button %}

​{% legacy_navbar %}

​{% shopify_storefront_access_token %}

​{% shopify_store_domain %}

​{% slide_out_pane %} ... {% endslide_out_pane %}

​{% subscription_files %}

​Translation Filter: | t

`{% component 'component_key' %}`

`{% placement 'placement_key' %}`

`{% workflow id: 44 %}`

`{% navbar %}`

`{% logout_button %}`

`{% legacy_navbar %}`

`{% shopify_storefront_access_token %}`

`{% shopify_store_domain %}`

`{% slide_out_pane %} ... {% endslide_out_pane %}`

`{% subscription_files %}`

Translation Filter: `| t`