Supporting Tiers on Custom Store Templates

If you are using a custom or legacy store template, Tiered packages may not display properly once enabled on your store.

If you are using Exo or a Premium template, this guide does not apply.

For tiers to display on your store, create the following Assets:

1. category/tiered.html - HTML structure for a tiered category

2. quote.html - HTML confirmation page when updating a tier

Use the following examples to add Tiers support to your store:

category/tiered.html

{% extends "layout.html" %}

{% block content %}
<div class="site-content site-content-widgets" style="max-width: 1140px; margin: 0 auto; padding: 1rem;">
  <main class="store-category-tiered">
    <header class="store-category-tiered-header text-content">
      <h2>{{ category.name }}</h2>

      {% if category.description != "" %}
        <p>{{ category.description|raw }}</p>
      {% endif %}
    </header>

    {% if category.packages|length > 0 %}
      <div class="store-products-tiered" style="display: flex; flex-wrap: wrap;">
        {% for package in category.packages %}
          <article
            class="store-product store-product-tiered {{ (tier and tier.package_id == package.id) ? 'subscribed' : '' }}" style="display: flex; flex-direction: column; padding: 1rem;"
          >
            <img
              class="image"
              src="{{ package.image.url }}"
              alt="{{ package.name }}"
            />

            <h3 class="product-title">
              {{ package.name }}
              {% if package.countdownEnds %}
                <span
                  class="countdown"
                  data-countdown="{{ package.countdownEnds }}"
                >
                  {{__("Ending Soon!") }}
                </span>
              {% endif %}
            </h3>

            <div class="descr">
              {{ package.description|raw }}
            </div>            
            
            {% set packageIdentifier = package.identifier ? package.identifier : package.id %}

            <div
              class="actions product-actions"
              style="margin-top: auto;"
              data-package="{{ package.id }}"
              data-package-type="{{ package.type }}"
              {% if package.purchasable == false %}
                title="{{ package.reason }}"
              {% endif %}
            >
              <p class="price">
                {% if package.customPrice %}
                  {{ __("You decide how much to pay.") }}
                {% elseif package.price == 0.00 %}
                  <strong>{{ __("This item is free.") }}</strong>
                {% else %}
                  {% if package.discount.applied %}
                    <del class="text-danger small font-weight-bold">{{ package.discount.original|money }}</del>
                  {% endif %}

                  <strong>{{ package.price|money }}</strong> {{ basket.currency }}
                {% endif %}
              </p>

              {% if tier and tier.package_id == package.id %}
                <button class="btn btn-tertiary wide" disabled>
                  {{ __("Subscribed") }}
                </button>
              {% elseif tier and tier.downgrade_package_id == package.id %}
                <button class="btn btn-tertiary wide" disabled>
                  {{ __("Pending Downgrade") }}
                </button>
              {% elseif tier %}
                <a
                  href="/tier/quote?category={{ category.id }}&amp;package={{ package.id }}"
                  class="btn btn-primary wide"
                  {% if package.purchasable == false %}disabled{% endif %}
                  {% if package.basket %}hidden style="display: none;"{% endif %}
                >
                  {{ __("Subscribe") }}
                </a>
              {% else %}
                <a
                  href="/checkout/packages/add/{{ packageIdentifier }}/subscribe"
                  class="btn btn-primary subscribe wide"
                  {% if package.purchasable == false %}disabled{% endif %}
                  {% if package.basket %}hidden style="display: none;"{% endif %}
                >
                  {{ __("Subscribe") }}
                </a>
              {% endif %}

              <button
                class="btn btn-secondary wide open-basket open-basket-cta"
                {% if package.basket == false %}hidden style="display: none;"{% endif %}
              >
                {{ __("Added to Basket") }}
              </button>
            </div>
            
          </article>
        {% endfor %}
      </div>
    {% else %}
      <p>{{ __("No packages to display in this category.") }}</p>
    {% endif %}
  </main>
</div>
{% endblock %}

quote.html

{% extends "layout.html" %}

{% block content %}

<main class="store-quote store-form" data-popup style="max-width: 1140px; margin: 0 auto; padding: 1rem; text-align: center;">
  <div class="text-content">
    <h2>Update Tier</h2>
    {{ description|raw }}
  </div>

  <form method="post" action="/tier/update">
    <input type="hidden" name="category_id" value="{{ category }}">
    <input type="hidden" name="package_id" value="{{ package }}">

    {% for k, v in options %}
      <input type="hidden" name="options[{{ k }}]" value="{{ v }}">
    {% endfor %}

    <div class="actions quote-actions">
      <a href="/category/{{category}}" class="btn btn-tertiary wide">
        {{ __("Back") }}
      </a>
      <button type="submit" class="btn btn-primary wide confirm">
        {{ __("Confirm") }}
      </button>
    </div>
  </form>
</main>

{% endblock %}