The Subscription LifecycleSubscription ManagerCommon Customizations

Modify the Change Billing Process Button

Move the Change Billing button inside the Subscription Manager for consistent styling on Shopify
View as Markdown

Customers on Shopify click a button to trigger a Change Billing Information email. Shopify emails them a secure link directing the customer to a checkout-like page where they can update their credit card information.

This article covers updating the Subscription Manager so that your style changes affect the Change Billing button and keep your brand consistent.

Background

The Change Billing button previously sat below the Subscription Manager, outside it — meaning it could not be styled alongside the SM and could confuse customers trying to update their payment method.

As of June 2023, this button has been moved inside the Subscription Manager. A Change Billing link now appears under the Billing section by order.

Clicking the link opens a Replace Payment Method modal where the customer can see all subscriptions associated with that payment method and click Send Email to trigger an update.

If your Subscription Manager uses a legacy theme version, follow the instructions below to switch to the latest experience.

Update Your Subscription Manager with the Advanced Editor

Log into Ordergroove and go to Subscriptions > Subscription Manager > Advanced.

1. /views/billing-shipping-details.liquid

Find billing-shipping-details.liquid under the Views folder. Locate and delete the following lines:

1{% if 'external_payment_enabled' | setting %}
2  <a class="og-link og-edit-payment" href="{{ 'external_payment_url' | setting }}">{{ 'shipment_unsent_footer_billing_edit' | t }}</a>
3{% endif %}

Replace with:

1{% include 'change-billing-shopify-only' %}

2. /views/change-billing-shopify-only.liquid

Create a new view file named change-billing-shopify-only.liquid. Paste in the following code and click Save:

1{# This modal and button are only used for merchants on the Shopify integration. #}
2
3<div class="og-change-billing-button">
4
5<a class='og-link' @click={{ 'show_closest_modal' | js }}>
6{{ 'shipment_unsent_footer_billing_edit' | t }}
7</a>
8
9<dialog aria-hidden="true">
10<form
11action="{{ 'send_payment_email' | action }}"
12@success={{ 'close_closest_modal' | js }}
13@reset={{ 'close_closest_modal' | js }}>
14<div class="og-dialog-header">
15<span class="og-dialog-title-big">{{ 'modal_billing_header' | t }}</span>
16<button
17class="og-button og-button-close"
18type="reset"
19aria-label="{{ 'modal_close' | t }}">{{ 'modal_close' | t }}</button>
20</div>{# /og-dialog-header #}
21
22<div class="og-dialog-body">
23<input
24type='hidden'
25value='{{ payment.token_id }}'
26name='payment_token' />
27<input
28type='hidden'
29value='{{ customer.sig_field }}'
30name='customer' />
31
32{% if payment %}
33{% set payment_method_names = 'payment_method_names' | t %}
34
35<div class="og-text-header">
36<span>
37{{ 'modal_billing_current_display' | t }} -
38</span>
39<span og-payment-id="{{payment.public_id}}">
40<span class="og-payment-type">{{ payment.cc_type }} {{ payment_method_names[payment.payment_method] }}</span>
41{% if payment.cc_number_ending %}
42<span class="og-payment-last-4">{{ 'form_billing_ending_in' | t }}</span>
43{% endif %}
44</span>
45</div>{# /og-text-header #}
46{% endif %}
47
48<div class="og-text-header">{{ 'modal_billing_subscriptions_display_header' | t }}:</div>
49<div class="og-subscription-display">
50{% set subscriptions_payment = subscriptions | select(payment=payment.public_id) %}
51<div class="og-billing-list-subscriptions">
52{% for subscription in subscriptions_payment | select('live') %}
53{% set product = products | find(id=subscription.product) %}
54{% if product %}
55<div class="og-billing-subscription">
56<div class="og-product-image-container-billing">
57<img
58class="og-product-image"
59loading="lazy"
60alt="{{ product.name }}"
61src="{{ product.image_url | if_defined }}" />
62</div>
63<div class="og-subscription-info">
64<div>{{ product.name }}</div>
65<div>{{ 'product_read_only_quantity' | t }}, {{ 'modal_billing_frequency_display' | t }} {{ 'frequency_period' | t(every=subscription.every, period=subscription.every_period) }}</div>
66</div>
67</div>
68{% endif %}
69{% endfor %}
70</div>
71<div class="og-billing-list-subscriptions og-inactive">
72{% for subscription in subscriptions_payment | reject('live') %}
73{% set product = products | find(id=subscription.product) %}
74{% if product %}
75<div class="og-billing-subscription">
76<div class="og-product-image-container-billing">
77<img
78class="og-product-image"
79loading="lazy"
80alt="{{ product.name }}"
81src="{{ product.image_url | if_defined }}" />
82</div>
83<div class="og-subscription-info">
84<div>{{ product.name }}
85<span class="og-cancelled">({{ 'modal_billing_cancelled' | t }})</span>
86</div>
87<div>{{ 'product_read_only_quantity' | t }}, {{ 'modal_billing_frequency_display' | t }} {{ 'frequency_period' | t(every=subscription.every, period=subscription.every_period) }}
88</div>
89</div>
90</div>
91{% endif %}
92{% endfor %}
93</div>
94</div>
95
96<div class="og-info">
97<svg
98width="18"
99height="18"
100viewBox="0 0 18 18"
101fill="none"
102xmlns="http://www.w3.org/2000/svg">
103<path d="M8.99984 0.666664C4.39779 0.666664 0.666504 4.39929 0.666504 9C0.666504 13.6034 4.39779 17.3333 8.99984 17.3333C13.6019 17.3333 17.3332 13.6034 17.3332 9C17.3332 4.39929 13.6019 0.666664 8.99984 0.666664ZM8.99984 4.3629C9.77927 4.3629 10.4111 4.99476 10.4111 5.77419C10.4111 6.55363 9.77927 7.18548 8.99984 7.18548C8.2204 7.18548 7.58855 6.55363 7.58855 5.77419C7.58855 4.99476 8.2204 4.3629 8.99984 4.3629ZM10.8816 12.8978C10.8816 13.1205 10.701 13.3011 10.4783 13.3011H7.52134C7.29866 13.3011 7.11812 13.1205 7.11812 12.8978V12.0914C7.11812 11.8687 7.29866 11.6882 7.52134 11.6882H7.92457V9.53763H7.52134C7.29866 9.53763 7.11812 9.35709 7.11812 9.13441V8.32795C7.11812 8.10527 7.29866 7.92473 7.52134 7.92473H9.67188C9.89456 7.92473 10.0751 8.10527 10.0751 8.32795V11.6882H10.4783C10.701 11.6882 10.8816 11.8687 10.8816 12.0914V12.8978Z" fill="#474747" />
104</svg>
105<div>
106<div class="og-info-header">{{ 'modal_billing_info_header' | t }}</div>
107<span>{{ 'modal_billing_info_text' | t }}</span>
108</div>
109</div>
110
111</div>{# /og-dialog-body #}
112
113<div class="og-dialog-footer">
114<button
115class="og-button"
116type="submit"
117name="send_payment_email">{{ 'modal_billing_confirm' | t }}</button>
118</div>{# /og-dialog-footer #}
119</form>
120</dialog>
121</div>{# /og-change-billing-button #}

3. styles/billing-display.less

Create a new styles file named billing-display.less. Paste in the following code and click Save:

1.og-change-billing-button {
2  dialog {
3    .og-subscription-display {
4      overflow: auto;
5      max-height: 30vh;
6      .og-billing-list-subscriptions {
7        display: flex;
8        flex-direction: column;
9        row-gap: 20px;
10        .og-billing-subscription {
11          display: flex;
12          flex-direction: row;
13          font-size: 12px;
14          line-height: 150%;
15          .og-product-image-container-billing {
16            padding-right: 10px;
17            padding-left: 10px;
18            img {
19              object-fit: contain;
20              width: 60px;
21              height: 60px;
22            }
23          }
24          .og-subscription-info {
25            align-self: center;
26            .og-cancelled {
27              text-transform: uppercase;
28            }
29          }
30        }
31      }
32      .og-inactive {
33        opacity: 50%;
34      }
35    }
36  }
37}

4. styles/dialogs.less

Find dialogs.less under the Styles folder. Locate .og-dialog-title { and delete the following two lines:

1padding-right: 1em;
2margin: 0;

Then locate .og-cancel-title {, delete it, and replace it with the following:

1.og-dialog-title-big {
2  font-size: 20px;
3  margin-bottom: 0px;
4  font-weight: bold;
5}
6
7.og-dialog-title,
8.og-dialog-title-big {
9  margin: 0;
10  padding-right: 1em;
11}
12
13.og-text-header {
14  margin-bottom: 30px;
15}
16
17.og-info {
18  border-radius: 8px;
19  border: 1px solid rgba(0, 0, 0, 0.5);
20  padding: 15px 60px 15px 5px;
21  color: #113243;
22  font-size: 12px;
23  line-height: 18px;
24  font-weight: 400;
25  margin-top: 40px;
26  display: flex;
27  flex-direction: row;
28
29  .og-info-header {
30    font-weight: 600;
31    line-height: 20px;
32    margin-block-start: 0px;
33    margin-block-end: 5px;
34    font-size: 14px;
35  }
36
37  svg {
38    margin: 5px 10px;
39  }
40}

5. styles/main.less

Find main.less under the Styles folder and add the following line:

1@import './billing-display.less';

6. locales/en-US.json

Find en-US.json under the Locales folder. Locate "modal_shipping_header": "Change Shipping Address" and add the following lines after it:

1"modal_billing_header": "Replace Payment Method",
2"modal_billing_current_display": "Current payment method",
3"modal_billing_subscriptions_display_header": "Subscriptions associated with the payment method above",
4"modal_billing_frequency_display": "Frequency: Every",
5"modal_billing_cancelled": "Cancelled",
6"modal_billing_info_header": "We will send you an email to update your payment.",
7"modal_billing_info_text": "This will replace your current payment method on the subscriptions above.",
8"modal_billing_confirm": "Send Email",

Then locate "pause_subscription_error": "An error occurred while pausing your subscription. Please try again later.", add a comma after that line, and add the following:

1"change_billing_send_email_success": "Success! You will receive an email from us shortly to update your payment information.",
2"change_billing_send_email_error": "An error occurred while sending your payment update email. Please try again later."

7. locales/en-CA.json

Find en-CA.json under the Locales folder. Locate "modal_shipping_header": "Change Shipping Address" and add the following lines after it:

1"modal_billing_header": "Replace Payment Method",
2"modal_billing_current_display": "Current payment method",
3"modal_billing_subscriptions_display_header": "Subscriptions associated with the payment method above",
4"modal_billing_frequency_display": "Frequency: Every",
5"modal_billing_cancelled": "Cancelled",
6"modal_billing_info_header": "We will send you an email to update your payment.",
7"modal_billing_info_text": "This will replace your current payment method on the subscriptions above.",
8"modal_billing_confirm": "Send Email",

Then locate "pause_subscription_error": "An error occurred while pausing your subscription. Please try again later.", add a comma after that line, and add the following:

1"change_billing_send_email_success": "Success! You will receive an email from us shortly to update your payment information.",
2"change_billing_send_email_error": "An error occurred while sending your payment update email. Please try again later."

8. locales/es-ES.json

Find es-ES.json under the Locales folder. Locate "modal_shipping_header": "Cambiar las opciones de envío" and add the following lines after it:

1"modal_billing_header": "Reemplazar método de pago",
2"modal_billing_current_display": "Método de pago actual",
3"modal_billing_subscriptions_display_header": "Suscripciones asociadas con este método de pago",
4"modal_billing_frequency_display": "Frecuencia: Cada",
5"modal_billing_cancelled": "Cancelada",
6"modal_billing_info_header": "Le enviaremos un correo electrónico para actualizar su forma de pago.",
7"modal_billing_info_text": "Esto reemplazará su forma de pago en estas suscripciones.",
8"modal_billing_confirm": "Enviar correo electrónico",

Then locate "pause_subscription_error": "Ocurrió un error pausando la suscripción. Por favor, vuelva a intentarlo más tarde.", add a comma after that line, and add the following:

1"change_billing_send_email_success": "En breve recibirá un correo electrónico nuestro para actualizar su información de pago.",
2"change_billing_send_email_error": "Ocurrió un error al enviar el correo electrónico de actualización de pago. Por favor, inténtelo de nuevo más tarde."

9. locales/fr-CA.json

Find fr-CA.json under the Locales folder. Locate "modal_shipping_header": "Modifier l'addresse de livraison" and add the following lines after it:

1"modal_billing_header": "Remplacer le mode de paiement",
2"modal_billing_current_display": "Mode de paiement actuel",
3"modal_billing_subscriptions_display_header": "Abonnements associés au mode de paiement ci-dessus",
4"modal_billing_frequency_display": "Fréquence : tous les",
5"modal_billing_cancelled": "Annulé",
6"modal_billing_info_header": "Nous vous enverrons un e-mail pour mettre à jour votre paiement.",
7"modal_billing_info_text": "Celle-ci remplacera votre carte actuelle sur les abonnements ci-dessus.",
8"modal_billing_confirm": "Envoyer l'e-mail",

Then locate "pause_subscription_error": "Une erreur s'est produite, SVP réessayer de pauser votre abonnement plus tard.", add a comma after that line, and add the following:

1"change_billing_send_email_success": "Succès ! Vous recevrez sous peu un e-mail de notre part pour mettre à jour vos informations de paiement.",
2"change_billing_send_email_error": "Une erreur s'est produite lors de l'envoi de votre e-mail de mise à jour de paiement. Veuillez réessayer plus tard."

Additional Assistance

If you followed the steps above and still don’t see the button, submit a ticket to help@ordergroove.com.