Skip to main content
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: {% legacy_navbar %}.

​
Default components

​
{% subscription_profile_personal_details %}

{% subscription_profile_personal_details %}

<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 %}

{% subscription_profile_address %}

<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 %}

{% subscription_profile_payment_method %}

<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 %}

{% subscription_profile_delivery_method %}

<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>