This page describes the feature that allows pay-as-you-go subscribers to upgrade to prepaid subscriptions. For more information on prepaid subscriptions, take a look at Enabling Prepaid Subscriptions from start to finish.
What is the feature?
Customers are now able to upgrade their pay-as-you-go subscriptions to prepaid subscriptions directly from their Subscription Manager. If you have this feature enabled, the following call-to-action will appear on your customers’ Subscription Managers:
More specifically, this call-to-action will be embedded in each item that appears on the Subscription Manager that is associated with a pay-as-you-go subscription for a product that is also prepaid-eligible.
Technical Details, how does it work?
By default, the displayed saving percentage (20% in the above image) will be the largest recurring discount you currently offer for any prepaid term-length. You can see what prepaid discounts are currently configured for new subscriptions by navigation to the Promotions page and mousing over the recurring discounts that are currently active.
When the customer clicks the call to action, the following modal will appear:
The different prepaid term-lengths the customer can choose from are based on the term-lengths for which you have configured recurring prepaid discounts. (Again you can view what prepaid discounts are configured by visiting the Promotions page and checking your live recurring discounts)
After clicking the “upgrade” button within the modal, the customer’s subscription will now appear as a prepaid subscription with 0 shipments remaining. The customer will not immediately be charged. The customer will be charged for the full-term of the prepaid subscription cycle upon placement of their order. If the customer would like to immediately receive their next shipment and be charged to begin the prepaid cycle, they can click “send-now”.
Customers who upgrade their pay-as-you-go subscription to a prepaid subscription will lose any shopify discount codes that are associated with their recurring subscription orders. Also, customers who upgrade to a prepaid subscription will have their subscription transitioned to your currently live offer if their pay-as-you-go subscription was originally associated with a different offer.
Setting it up, Implementation
If you would like to take advantage of this feature, please reach out to Ordergroove so we can ensure you already have the required templates and Subscription Manager version to support this functionality. You may have already been provisioned with this feature upon installing Ordergroove, and no additional steps are required to enable the feature.
Implementation Guide
Introduction
If you were not provisioned with the templates that are required to offer this feature to your pay-as-you-go subscribers, you can follow these steps to add these templates to your Subscription Manager manually.
The following steps assume some knowledge of HTML and CSS syntax, and if you are not yet familiar with the structure of the Subscription Manager or how it can be modified we recommend reading Subscription Manager Components & Containers.
New Files to Add
In the views section of the Subscription Manager advanced editor, add the following 2 files with the associated content:
upgrade-subscription-to-prepaid.liquid
{% if prepaid_incentives and prepaid_incentives.data and not 'prepaid_upgrade_disabled' | setting %}
{% set prepaid_recurring_incentives = prepaid_incentives.data | select(coupon_type='recurring') %}
{# If the product is prepaid eligible and the subscription exists display prepaid subscription upgrade control #}
{% if subscription and not is_prepaid and product.is_prepaid_eligible and prepaid_recurring_incentives.length > 0 %}
{# Upgrade to prepaid control #}
<div class='og-upgrade-subscription-to-prepaid-cta'>
<div class="og-upgrade-subscription-to-prepaid-cta-text">
<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5522 4.89257L14.572 1.93289C14.7073 1.66204 14.6931 1.34045 14.5342 1.08267C14.3754 0.824882 14.0945 0.667542 13.7918 0.666687H6.20842C5.90517 0.666659 5.62353 0.823646 5.46408 1.08158C5.30462 1.33952 5.29008 1.66163 5.42566 1.93289L7.448 4.89294C0.308732 9.25846 0.66967 14.9602 0.66967 15.6875C0.66967 17.7011 2.46014 19.3334 4.66878 19.3334H15.3325C17.5408 19.3334 19.3312 17.7011 19.3312 15.6875C19.3312 14.9733 19.6521 9.2344 12.5522 4.89257ZM12.1249 2.41669L10.7314 4.45835H9.26873L7.8753 2.41669H12.1249ZM17.5812 15.6875C17.5812 16.7328 16.5724 17.5834 15.3325 17.5834H4.66878C3.4292 17.5834 2.42003 16.7328 2.42003 15.6875C2.39014 12.7344 3.60967 9.29091 8.65113 6.20835H11.352C16.3679 9.27742 17.6057 12.7318 17.5812 15.6875ZM11.0796 11.9957L9.29316 11.4656C9.08717 11.4066 8.94425 11.2024 8.94425 10.9669C8.94425 10.6803 9.15462 10.4488 9.41238 10.4488H10.5276C10.7071 10.4499 10.8828 10.5003 11.0355 10.5947C11.1595 10.6791 11.3252 10.6678 11.4365 10.5673L11.901 10.1236C11.9676 10.061 12.0033 9.97232 11.9986 9.88107C11.994 9.78982 11.9495 9.70521 11.877 9.64966C11.5141 9.38306 11.0809 9.22878 10.6312 9.20596V8.56429C10.6298 8.39003 10.4879 8.24961 10.3136 8.25002H9.67852C9.50432 8.24961 9.36254 8.39009 9.36134 8.56429V9.20012C8.42071 9.22747 7.66675 10.0091 7.66675 10.9709C7.66675 11.7562 8.18264 12.4551 8.92056 12.675L10.707 13.2051C10.913 13.2638 11.0559 13.4679 11.0559 13.7035C11.0559 13.9904 10.8456 14.2219 10.5878 14.2219H9.47217C9.29268 14.221 9.11693 14.1705 8.9643 14.0761C8.84024 13.9917 8.67455 14.0031 8.56326 14.1038L8.09477 14.5435C8.02823 14.6061 7.99255 14.6948 7.99718 14.786C8.00181 14.8773 8.04629 14.9619 8.11884 15.0174C8.48193 15.2839 8.91516 15.4382 9.36498 15.4611V16.101C9.36619 16.2752 9.50796 16.4156 9.68217 16.4152H10.3173C10.4915 16.4156 10.6333 16.2752 10.6345 16.101V15.4688C11.5711 15.4454 12.329 14.6601 12.3331 13.6984C12.3334 12.9145 11.8175 12.2156 11.0796 11.9957Z" fill="#17132F"/>
</svg>
<div>{{ 'upgrade_subscription_to_prepaid_cta' | t }}</div>
</div>
<button
class='og-button og-upgrade-subscription-to-prepaid-trigger'
@click='{{ 'show_closest_modal' | js }}'
>
{{ 'upgrade_subscription_to_prepaid_button' | t }}
<svg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8794 6.51729L6.85555 11.5822C6.69471 11.743 6.43462 11.743 6.27378 11.5822L5.59618 10.9046C5.43533 10.7437 5.43533 10.4836 5.59618 10.3228L9.6515 6.2264L5.59618 2.13001C5.43533 1.96916 5.43533 1.70908 5.59618 1.54823L6.27378 0.870633C6.43462 0.709789 6.69471 0.709789 6.85555 0.870633L11.8794 5.93551C12.0402 6.09636 12.0402 6.35645 11.8794 6.51729ZM6.40382 5.93551L1.38001 0.870633C1.21916 0.709789 0.959076 0.709789 0.798232 0.870633L0.120633 1.54823C-0.040211 1.70908 -0.040211 1.96916 0.120633 2.13001L4.17596 6.2264L0.120633 10.3228C-0.040211 10.4836 -0.040211 10.7437 0.120633 10.9046L0.798232 11.5822C0.959076 11.743 1.21916 11.743 1.38001 11.5822L6.40382 6.51729C6.56467 6.35645 6.56467 6.09636 6.40382 5.93551Z" fill="currentColor"/>
</svg>
</button>
<dialog aria-hidden='true' class='og-dialog-size'>
<form
action='{{ 'upgrade_subscription_to_prepaid' | action }}'
name='upgrade_subscription_to_prepaid'
@success='{{ 'close_closest_modal' | js }}'
@reset='{{ 'close_closest_modal' | js }}'
>
<input type='hidden' value='{{ subscription.public_id }}' name='subscription'>
<input type='hidden' value='{{ order_item.order }}' name='order'>
<input type='hidden' value='{{ product.external_product_id }}' name='product'>
{% include 'upgrade-subscription-to-prepaid-modal' %}
</form>
</dialog>
</div>
{% endif %}
{% endif %}upgrade-subscription-to-prepaid-modal.liquid
<div class='og-upgrade-subscription-to-prepaid-modal'>
<div class='og-dialog-header'>
<h5 class='og-dialog-title-big'>{{ 'modal_upgrade_to_prepaid_header' | t }}</h5>
<button class='og-button' type='reset' aria-label='{{ 'modal_close' | t }}'>{{ 'modal_close' | t }}</button>
</div>
{# /og-dialog-header #}
<div class='og-dialog-body'>
<p>{{ 'modal_upgrade_to_prepaid_subheader' | t }}</p>
<img class='og-product-image' loading='lazy' alt='{{ product.name }}' src='{{ product.image_url | if_defined }}'>
{% set subscription_id = subscription.public_id %}
<div class="og-prepaid-upgrade-options">
{% for recurring_incentive in prepaid_recurring_incentives %}
<div class='og-prepaid-upgrade-option'>
{% set discount = recurring_incentive.discounts | first %}
{% set new_discounted_amount = product.price * (100 - discount.value)/100 %}
{% set new_discounted_total_amount = new_discounted_amount * recurring_incentive.prepaid_orders_per_billing %}
{% set previous_total_amount = order_item.total_price * recurring_incentive.prepaid_orders_per_billing %}
{% set extra_savings = (previous_total_amount - new_discounted_total_amount) | currency %}
<div class="og-prepaid-shipment-text">{{ recurring_incentive.prepaid_orders_per_billing }} {{ 'prepaid_upgrade_shipments' | t }}</div>
<div class="og-prepaid-extra-savings">{{ 'prepaid_upgrade_extra' | t }}</div>
<div class="og-prepaid-per-shipment">{{ new_discounted_amount | currency }} {{ 'prepaid_upgrade_per_shipment' | t }}</div>
<div class="og-prepaid-total">{{ new_discounted_total_amount | currency }} {{ 'prepaid_total' | t }}</div>
<button
class='og-button og-prepaid-upgrade-button'
name='ordersPerBilling'
value='{{recurring_incentive.prepaid_orders_per_billing}}'
type='submit'
>
{{ 'modal_upgrade_button' | t }}
</button>
</div>
{% endfor %}
</div>
</div>
</div>Files to Modify
Make these modifications to the following files
views/order-unsent.liquid
Find the location in the file with the content
<div class="og-name-price-controls-container"><div class="og-product-details-wrapper"></div>{# /og-name-price-controls-container #} {% include 'upgrade-subscription-to-prepaid' %}
</div>styles/order-items.less
Within the .og-product rule, add the following css rule:
.og-product-details-wrapper {
flex-grow: 2;
}/*================ Prepaid Upgrade Styles ================*/
.og-upgrade-subscription-to-prepaid-cta {
display: flex;
gap: 8px;
max-width: 450px;
align-items: center;
border-radius: 4px;
padding: 20px 34px 20px 24px;
font-size: 14px;
line-height: 1.5;
flex-wrap: wrap;
margin-top: 1rem;
margin-left: auto;
border: 1px solid black;
}
.og-upgrade-subscription-to-prepaid-trigger {
flex-shrink: 0;
}
.og-upgrade-subscription-to-prepaid-cta-text {
display: flex;
gap: 8px;
align-items: center;
flex-basis: min-content;
flex-grow: 2;
& > svg {
flex-shrink: 0;
}
}
.og-upgrade-subscription-to-prepaid-modal {
img {
max-width: 200px;
max-height: 200px;
margin: 0 auto;
display: block;
margin-bottom: 12px;
}
.og-prepaid-upgrade-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px;
line-height: 1.5;
text-align: center;
font-size: 14px;
margin-bottom: 10px;
}
.og-prepaid-upgrade-option {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
// use box-shadow instead of borders
// since borders are doubled-up for adjacent cells
box-shadow: 0 0 0 1px #090909;
}
.og-prepaid-shipment-text {
font-size: 18px;
font-weight: 700;
}
.og-prepaid-extra-savings {
font-style: italic;
margin-bottom: 12px;
}
.og-prepaid-per-shipment {
font-weight: 700;
}
.og-prepaid-total {
margin-bottom: 12px;
}
.og-prepaid-upgrade-button {
margin-top: auto;
}
}locales/en-CA.json
Add the following entries at the top-level of the locale files JSON:
upgrade_subscription_to_prepaid_button": "Upgrade Now",
"upgrade_subscription_to_prepaid_cta": "Save up to {{ prepaid_incentives.derived.maxRecurringDiscount }}% by upgrading to a prepaid subscription!",
"modal_upgrade_to_prepaid_header": "Upgrade to a prepaid subscription",
"modal_upgrade_to_prepaid_subheader": "You will be charged for this upgrade on your upcoming subscription shipment date ({{ next_order_date }})",
"modal_upgrade_button": "Upgrade",
"modal_upgrade_discount_code_warning": "Any existing discount codes used on this subscription will no longer apply once upgraded to prepaid",
"prepaid_upgrade_shipments": "shipments",
"prepaid_upgrade_extra": "Save an extra {{ extra_savings }}",
"prepaid_upgrade_per_shipment": "per shipment",
"prepaid_total": "total",And the following entries within the toasts object that is nested within the JSON file:
"upgrade_subscription_to_prepaid_success": "Congrats! You have upgraded your {{notification | get('target.product.name')}} to a prepaid subscription.",
"upgrade_subscription_to_prepaid_error": "An error occurred while upgrading your subscription. Please refresh and try again later.",
locales/en-US.json
Add the following entries at the top-level of the locale files JSON:
"upgrade_subscription_to_prepaid_button": "Upgrade Now",
"upgrade_subscription_to_prepaid_cta": "Save up to {{ prepaid_incentives.derived.maxRecurringDiscount }}% by upgrading to a prepaid subscription!",
"modal_upgrade_to_prepaid_header": "Upgrade to a prepaid subscription",
"modal_upgrade_to_prepaid_subheader": "You will be charged for this upgrade on your upcoming subscription shipment date ({{ next_order_date }})",
"modal_upgrade_button": "Upgrade",
"modal_upgrade_discount_code_warning": "Any existing discount codes used on this subscription will no longer apply once upgraded to prepaid",
"prepaid_upgrade_shipments": "shipments",
"prepaid_upgrade_extra": "Save an extra {{ extra_savings }}",
"prepaid_upgrade_per_shipment": "per shipment",
"prepaid_total": "total",And the following entries within the toasts object that is nested within the JSON file:
"upgrade_subscription_to_prepaid_success": "Congrats! You have upgraded your {{notification | get('target.product.name')}} to a prepaid subscription.",
"upgrade_subscription_to_prepaid_error": "An error occurred while upgrading your subscription. Please refresh and try again later.",locales/es-ES.json
Add the following entries at the top-level of the locale files JSON:
"upgrade_subscription_to_prepaid_button": "Actualizar Ahora",
"upgrade_subscription_to_prepaid_cta": "¡Ahorre hasta un {{ prepaid_incentives.derived.maxRecurringDiscount }} % actualizando a una suscripción prepaga!",
"modal_upgrade_to_prepaid_header": "Actualizar a una suscripción prepaga",
"modal_upgrade_to_prepaid_subheader": "Se le cobrará por esta actualización en la próxima fecha de envío de su suscripción ({{ next_order_date }})",
"modal_upgrade_button": "Actualizar",
"modal_upgrade_discount_code_warning": "Cualquier código de descuento existente utilizado en esta suscripción ya no se aplicará una vez que se actualice a prepago",
"prepaid_upgrade_shipments": "envíos",
"prepaid_upgrade_extra": "Ahorre {{ extra_savings }} adicionales",
"prepaid_upgrade_per_shipment": "por envío",
"prepaid_total": "en total",And the following entries within the toasts object that is nested within the JSON file:
"upgrade_subscription_to_prepaid_success": "¡Felicitaciones! Has actualizado tu {{notification | get('target.product.name')}} a una suscripción prepago.",
"upgrade_subscription_to_prepaid_error": "Ocurrió un error al actualizar su suscripción. Actualice y vuelva a intentarlo más tarde.",locales/fr-CA.json
Add the following entries at the top-level of the locale files JSON:
"upgrade_subscription_to_prepaid_button": "Mettre à jour maintenant",
"upgrade_subscription_to_prepaid_cta": "Économisez jusqu'à {{ prepaid_incentives.derived.maxRecurringDiscount }} % en passant à un abonnement prépayé !",
"modal_upgrade_to_prepaid_header": "Passer à un abonnement prépayé",
"modal_upgrade_to_prepaid_subheader": "Vous serez facturé pour cette mise à niveau à la prochaine date d'expédition de votre abonnement ({{ next_order_date }})",
"modal_upgrade_button": "Améliorer",
"modal_upgrade_discount_code_warning": "Tous les codes de réduction existants utilisés sur cet abonnement ne s'appliqueront plus une fois mis à niveau vers le prépayé",
"prepaid_upgrade_shipments": "expéditions",
"prepaid_upgrade_extra": "Économisez {{ extra_savings }} de plus",
"prepaid_upgrade_per_shipment": "par expédition",
"prepaid_total": "au total",And the following entries within the toasts object that is nested within the JSON file:
"upgrade_subscription_to_prepaid_success": "Bravo! Vous avez mis à jour votre {{notification | get('target.product.name')}} à un abonnement prépayé.",
"upgrade_subscription_to_prepaid_error": "Une erreur s'est produite lors de la mise à niveau de votre abonnement. Veuillez actualiser et réessayer plus tard.",