> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firmhouse.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Subscription profile template

> Reference for Liquid tags supported in the Customer Portal subscription profile template (subscription_profile.liquid), grouped by default and optional usage.

`subscription_profile.liquid` tags are grouped by default vs optional usage.

* Default components are already present in the shipped `subscription_profile.liquid` template.
* Optional components can be added or used to replace parts of the default layout.

Common tags are documented on [Common tags](./common): `{% legacy_navbar %}`.

## Default components

## `{% subscription_profile_personal_details %}`

```liquid theme={null}
{% subscription_profile_personal_details %}
```

```html theme={null}
<turbo-frame id="edit_details_form">
  <form action="/self-service/subscription" method="post">
    <h2>Personal details</h2>
    <label>First name <input type="text" value="Mia" /></label>
    <label>Last name <input type="text" value="Johnson" /></label>
    <button type="submit">Update</button>
  </form>
</turbo-frame>
```

## `{% subscription_profile_address %}`

```liquid theme={null}
{% subscription_profile_address %}
```

```html theme={null}
<turbo-frame id="edit_addresses_form">
  <form action="/self-service/subscription/address" method="post">
    <h2>Address</h2>
    <label>Street <input type="text" value="Main Street 1" /></label>
    <label>City <input type="text" value="Amsterdam" /></label>
    <label>ZIP <input type="text" value="1011AB" /></label>
    <button type="submit">Save address</button>
  </form>
</turbo-frame>
```

## `{% subscription_profile_payment_method %}`

```liquid theme={null}
{% subscription_profile_payment_method %}
```

```html theme={null}
<div class="bg-white border rounded-xl p-6">
  <h2>Payment method</h2>
  <div class="flex items-center justify-between border rounded-xl p-3 mt-3">
    <span>Visa ****4242</span>
    <a href="/self-service/payment-method/edit" target="_blank" rel="noopener noreferrer">Change</a>
  </div>
</div>
```

## Optional components

## `{% subscription_profile_delivery_method %}`

```liquid theme={null}
{% subscription_profile_delivery_method %}
```

```html theme={null}
<div class="bg-white border rounded-xl p-6">
  <h2>Delivery method</h2>
  <p class="text-sm text-gray-600">Current: Pickup point - Albert Heijn, Centrum</p>
  <a href="/self-service/subscription/delivery_method/edit" class="button">Edit</a>
</div>
```