Change Shopify Subscription View / List

The Shopify Wallee Subscription View / List can be freely adapted and changed.

In order to do this, first open the shopify backend and navigate to:

Themes -> Actions > Edit Code

Scroll the left menu down until Snippets and add a new snipped named wallee-subscription-list.liquid

 ORwallee-subscription-view.liquid (which changes the detail page) Then Change this template to the requested needs. Changes are saved immediately.

The possible options are displayed on the Shopify integration page on the right side.

The code uses HTML and liquid templating for custom commands like if/else.

In the below shown template, the text for terminated and to-be-terminated subscriptions is being changed to a custom text.

Example custom template:

<div class="page-width">
<div class="section-header text-center">
<h1>{{ 'wallee-subscription.header' | t }}</h1>
<p><a href="/account">{{ 'wallee-subscription.list.return_to_account' | t }}</a></p>
</div>

<table class="responsive-table">
<thead>
<tr>
<th>{{ 'wallee-subscription.list.column.subscription' | t }}</th>
<th>{{ 'wallee-subscription.list.column.date' | t }}</th>
<th>{{ 'wallee-subscription.list.column.status' | t }}</th>
</tr>
</thead>
<tbody>
{% for subscriptionId in subscriptionIds %}
<tr>
<td data-label="{{ 'wallee-subscription.list.column.subscription' | t }}">
<a href="{{ subscriptionViewUrls[forloop.index0] }}" class="btn btn--secondary btn--small">#{{ subscriptionId }}</a>
</td>
<td data-label="{{ 'wallee-subscription.list.column.date' | t }}">
{{ subscriptionDates[forloop.index0] }}
</td>
<td data-label="{{ 'wallee-subscription.list.column.status' | t }}">
{% if subscriptionStatus[forloop.index0] == "Terminiert" %}
Gekündigt
{% elsif subscriptionStatus[forloop.index0] == "Es wird terminiert" %}
Wird gekündigt
{% else %}
{{ subscriptionStatus[forloop.index0] }}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>