Dashboard template

{% assign delivery_offset_seconds = project.delivery_days_after_shipment_date | times: 86400 %}

{% promotional_offer %}

{% for offer in subscription.eligible_promotional_offers %}
  <h2>{{ offer.title }}</h2>
  <p>{{ offer.description }}</p>
  <a href="{{ offer.accept_url }}">View offer</a>
{% endfor %}

{% assign displayed_offer = subscription.eligible_promotional_offers.first %}
{% unless displayed_offer.reactivates_subscription %}
  {% subscription_reactivation_banner %}
{% endunless %}

{% if project.self_service_center_subscription_pausing_enabled and subscription.allowed_to_pause? %}
  <a href="{{ subscription.pause_subscription_url }}">
    {{ "dashboard.pause_subscription" | t: default: "Pause subscription" }}
  </a>
{% endif %}

{% if project.self_service_center_subscription_pausing_enabled and subscription.allowed_to_resume? %}
  <a href="{{ subscription.resume_subscription_url }}">
    {{ "dashboard.resume_subscription" | t: default: "Resume subscription" }}
  </a>
{% endif %}

{% subscription_pause_resume_banner %}

{% subscription_pause_resume_banner pause_title: "Need a break?" pause_message: "Pause deliveries until you are ready again." %}

{% if subscription.status == "cancelled" %}
  {% subscription_reactivation_banner %}
{% endif %}

{% subscription_reactivation_banner title: "Welcome back" button_text: "Restart deliveries" button_classes: "rounded-lg bg-green-700 px-5 py-3 text-white" %}

{% assign referral_candy_url = subscription.referral_candy.url %}
{% if referral_candy_url %}
  {% assign reward_discount = subscription.referral_candy.advocate_reward_discount %}

  {% if reward_discount %}
    {{ "dashboard.referral_candy_banner.message_with_discount" | t: discount: reward_discount }}
  {% else %}
    {{ "dashboard.referral_candy_banner.message" | t }}
  {% endif %}
{% endif %}

{% prepaid_renewal %}

<div id="sscv2_prepaid_renewal">
  <h3>Prepaid renewal coming up</h3>
  <p>Your prepaid subscription will renew on March 12, 2026</p>
  <a href="/self-service/subscription/prepaid_renewal/new">Choose renewal option</a>
</div>

{% simple_next_billing_date_with_confirm show_label: true %}

<span id="subscription_123_simple_next_billing_date_with_confirm">
  <span class="text-sm">Next order date</span>
  <span class="font-semibold">March 12, 2026</span>
</span>

{% simple_plan_switch_with_confirm label_format: "plan_name" %}

<div id="subscription_123_simple_plan_switch_with_confirm">
  <select name="plan_switch[plan_id]">
    <option value="12" selected>Basic Plan</option>
    <option value="13">Premium Plan</option>
  </select>
</div>

<option value="12" selected>Basic Plan - Every 2 weeks</option>

{% manage_products size: "small" %}

<div data-role="manage_products">
  <a id="sscv2_manage_products" href="/self-service/additions/edit" class="button">
    Manage products
  </a>
</div>

{% product_quantity_progress %}

{% product_quantity_progress rail_background_color: "#F3F4F6", ready_fill_color: "#16A34A", pending_fill_color: "#F59E0B", over_limit_fill_color: "#EF4444" %}

{% product_quantity_progress rail_background_color: "#E2E8F0", rail_fill_color: "#0EA5E9" %}

<div id="sscv2_product_quantity_progress" class="bg-white border rounded-xl p-6">
  <h2>Add 2 more items to receive your upcoming order</h2>
  <p>3 / 5+</p>
  <div class="h-4 rounded-full" style="background-color: #E5E7EB;">
    <div style="width: 60%; background-color: #F59E0B;"></div>
  </div>
</div>

{% product_listing price_display: "savings" %}

{% product_listing price_display: "savings", savings_text: "You save %{amount} per delivery" %}

{% product_listing show_quantity_selector: false %}

<div id="sscv2_product_listing" class="divide-y">
  <div id="ordered_product_501_sscv2" class="py-6">
    <h3 class="font-medium">Protein Bar Box</h3>
    <p class="text-sm">Quantity: 2</p>
    <button type="button">Delete</button>
  </div>
</div>

{% product_listing_filtered shipment_schedule: "recurring", title: "Subscription products" %}
{% product_listing_filtered shipment_schedule: "one_time_purchase", title: "One-time products" %}

{% product_listing_filtered shipment_schedule: "recurring", filter_by: "group", filter_value: "Meals", title: "Recurring meals" %}

{% product_listing_filtered shipment_schedule: "recurring", title: "Subscription products", show_replacement_button: true, hide_replacement_price: true %}

<section class="bg-white border rounded-xl p-4">
  <header class="flex justify-between items-center mb-4">
    <h2 class="text-lg font-semibold text-gray-900">Subscription products</h2>
  </header>
  <div class="divide-y">
    <div class="py-4">1x Tomato Soup</div>
    <div class="py-4">2x Wholegrain Bread</div>
  </div>
</section>

{% assign groups = "123:456:789,101:102" | split: "," %}
{% product_alternatives groups: groups %}
{% for swap in product_alternatives %}
  <a href="{{ swap.confirmation_url | escape }}" data-turbo-frame="_top">
    Switch {{ swap.ordered_product.localized_title | escape }}
    to {{ swap.replacement_product.localized_title | escape }}
  </a>
{% endfor %}

{% product_alternatives groups: groups %}
{% for swap in product_alternatives %}
  <form action="{{ swap.replacement_url | escape }}" method="post" data-turbo="true" data-turbo-frame="_top">
    <input type="hidden" name="replacement_product[product_id]" value="{{ swap.replacement_product.id | escape }}">
    <button type="submit">Switch to {{ swap.replacement_product.localized_title | escape }}</button>
  </form>
{% endfor %}

{% recommended_products collection_id: 123, limit: 4 %}
{% for recommendation in recommended_products %}
  <h3>{{ recommendation.product.localized_title | escape }}</h3>
  {% if recommendation.in_subscription %}
    <p>Already in your subscription</p>
  {% else %}
    {% for option in recommendation.options %}
      <form action="{{ recommendation.add_url | escape }}" method="post" data-turbo-frame="_top">
        <input type="hidden" name="ordered_products[][product_id]" value="{{ recommendation.product.id }}">
        <input type="hidden" name="ordered_products[][quantity]" value="1">
        {% if option.one_time %}
          <input type="hidden" name="one_off_add_on" value="true">
        {% endif %}
        <button type="submit">
          {% if option.one_time %}Add once{% else %}Subscribe{% endif %} — {{ option.price | escape }}
        </button>
      </form>
    {% endfor %}
  {% endif %}
{% endfor %}

{% next_order_price_overview auto_refresh: true, auto_refresh_delay: 5 %}

<div
  id="subscription_123_next_order_price_overview"
  data-order-price-overview-subtotal-amount-cents="2900"
  data-order-price-overview-discount-amount-cents="300"
  data-order-price-overview-subtotal-after-discount-amount-cents="2600"
  data-order-price-overview-shipping-amount-cents="499"
  data-order-price-overview-final-amount-cents="3099"
>
  <!-- Order summary -->
</div>

{% next_order_price_overview items: "recurring_subtotal,shipping,total" show_discount_code_entry: false %}

<div id="subscription_123_next_order_price_overview" class="border rounded-xl p-6">
  <h3>Order summary</h3>
  <div class="flex justify-between"><span>Recurring subtotal</span><span>EUR 29.00</span></div>
  <div class="flex justify-between"><span>Shipping</span><span>Free</span></div>
  <div class="flex justify-between font-semibold"><span>Total</span><span>EUR 29.00</span></div>
</div>

{% next_order_price_overview show_discount_code_entry: true %}

{% minimum_order_amount_warning %}

<div id="minimum_order_amount_warning_subscription_123">
  <div class="rounded-xl border border-amber-300 bg-amber-50 p-4">
    <p>The minimum order amount is EUR 35.00</p>
    <p>Your next expected order's subtotal before shipping and discounts is EUR 29.00 and is lower than the required minimum order amount.</p>
  </div>
</div>

{% add_product size: "small" button_text: "Add meal" %}

<div data-role="add_product">
  <a id="sscv2_add_product" href="/self-service/additions/new" class="button">
    Add meal
  </a>
</div>

{% asset_purchase_offers %}

<div id="sscv2_asset_purchase_offers_subscription_123" class="space-y-3">
  <form action="/self-service/asset-ownerships/456/offers" method="post">
    <button id="sscv2_asset_purchase_offer_asset_ownership_456" type="submit">
      <span>Buy your Coffee Machine</span>
      <span>Buy now</span>
    </button>
  </form>
</div>

{% for asset_ownership in subscription.asset_ownerships %}
  {% asset_purchase_offer asset_ownership: asset_ownership, blocked_by_outstanding_invoices: false %}
{% endfor %}

<form action="/self-service/asset-ownerships/456/offers" method="post">
  <button id="sscv2_asset_purchase_offer_asset_ownership_456" type="submit">
    <span>Buy your Coffee Machine</span>
    <span>Buy now</span>
  </button>
</form>

{% non_paying_banner title: "Payment needed" render_icon: true %}

<div id="sscv2_non_paying_banner" class="rounded-xl border border-red-200 bg-red-50 px-5 py-4">
  <p class="text-sm font-semibold text-red-900">Payment needed</p>
  <p class="mt-1 text-sm text-red-800">Please resolve the outstanding payment.</p>
  <a href="/self-service/invoices">View invoices</a>
</div>

{% latest_orders limit: 2 %}

<div id="sscv2_latest_orders">
  <article class="border rounded-xl p-4">
    <p class="text-xs">Jan 12, 2026 | Order #9876</p>
    <p class="text-sm font-semibold">2x Matcha Pods</p>
    <span class="pill pill--green">confirmed</span>
  </article>
</div>

{% next_order_preview %}

<div class="bg-white border rounded-xl p-4">
  <p class="text-sm font-semibold">Upcoming order</p>
  <p class="text-sm">Scheduled for March 12, 2026</p>
  <div class="flex justify-between mt-2">
    <span>2x Oat Drink</span>
    <span>EUR 14.00</span>
  </div>
</div>

{% product_listing_filtered filter_by: "person" filter_value: "mom" title: "Menu for mom" show_manage_button: true %}
{% product_listing_filtered filter_by: "person" filter_value: "mom" title: "Menu for mom" title_class: "text-green-800" %}

<section class="bg-white border rounded-xl p-4">
  <header class="flex justify-between items-center mb-4">
    <h2 class="text-lg font-semibold text-gray-900">Menu for mom</h2>
    <a id="sscv2_manage_products" href="/self-service/additions/edit">Manage products</a>
  </header>
  <div class="divide-y">
    <div class="py-4">1x Tomato Soup</div>
    <div class="py-4">2x Wholegrain Bread</div>
  </div>
</section>

{% assign excluded_groups_normalized = "add-ons|gifts|one-time extras" | split: "|" %}
{% assign seen_groups_normalized = "" %}

{% for ordered_product in subscription.ordered_products %}
  {% assign group_name = ordered_product.metadata.group | strip %}
  {% assign group_filter_key = "group" %}
  {% if group_name == blank %}
    {% assign group_name = ordered_product.metadata.person | strip %}
    {% assign group_filter_key = "person" %}
  {% endif %}
  {% assign normalized_group_name = group_name | strip | downcase %}

  {% if group_name != blank %}
    {% unless excluded_groups_normalized contains normalized_group_name %}
      {% capture marker %}|{{ normalized_group_name }}|{% endcapture %}

      {% unless seen_groups_normalized contains marker %}
        {% capture seen_groups_normalized %}{{ seen_groups_normalized }}{{ marker }}{% endcapture %}
        {% assign group_title = group_name | capitalize %}

        {% product_listing_filtered
        filter_by: group_filter_key,
        filter_value: group_name,
        title: group_title,
        show_add_button: true,
        show_manage_button: false,
        show_delete_button: false,
        show_quantity_selector: false,
        show_swap_button: false
      %}
      {% endunless %}
    {% endunless %}
  {% endif %}
{% endfor %}

{% product_listing_filtered filter_by: "group", filter_value: "Add-ons", title: "Add-ons", show_add_button: true, show_manage_button: false, show_delete_button: false, show_quantity_selector: false, show_swap_button: false %}
{% product_listing_filtered filter_by: "group", filter_value: "Gifts", title: "Gifts", show_add_button: true, show_manage_button: false, show_delete_button: false, show_quantity_selector: false, show_swap_button: false %}
{% product_listing_filtered filter_by: "group", filter_value: "One-time extras", title: "One-time extras", show_add_button: false, show_manage_button: false, show_delete_button: false, show_quantity_selector: false, show_swap_button: false %}

{% if subscription.active_plan.instalments %}
  <div class="space-y-3">
    {% for ordered_product in subscription.ordered_products %}
      {% assign instalment_number = ordered_product.instalment_current_number | plus: 0 %}
      {% if instalment_number > 0 %}
        <div class="rounded-xl border border-gray-200 p-4">
          <p class="text-sm font-medium">{{ ordered_product.localized_title }}</p>
          <p class="text-sm text-gray-600">
            Instalment {{ instalment_number }} of {{ ordered_product.instalment_total_count }}
          </p>
        </div>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

{% next_shipment_date %}

Next shipment on March 12, 2026

{% minimum_contract_duration variant: "label" %}

<span id="subscription_123_minimum_contract_duration_label">
  Committed until April 1, 2026
</span>

{% billing_and_shipping_breakdown %}

<span id="subscription_123_billing_and_shipping_breakdown">
  Monthly billing, weekly delivery
</span>