The Subscription LifecycleSubscription ManagerCommon Customizations

Adding a Cancel Button to Modals

Add a dedicated Cancel button to Subscription Manager pop-up modals for improved user experience

View as Markdown

Learn how to add a dedicated Cancel button to pop-up modals in the Subscription Manager to maintain website continuity and improve user experience.

Out of the box, pop-up modals in the Subscription Manager contain a confirm action button and a standard X close button. Sometimes, to keep website continuity, an additional Cancel button is needed. This article walks through adding one.

This article applies to themes using version 0.X of the Subscription Manager. If your theme uses a different version, some features described here may not be available or may differ in behavior. You can find your theme version on the Subscription Manager landing page or in the top right corner of the Theme Editor view.

Applicable Files

The following files contain pop-up modals you can add a Cancel button to:

  • change-date.liquid
  • change-shipment-address.liquid
  • delete-item.liquid
  • pause-subscription.liquid
  • reactivate-subscription.liquid
  • send-order-now.liquid
  • skip.liquid

Accessing the Advanced Editor

You can access the advanced editor through your Ordergroove Admin:

  1. Log in to Ordergroove.
  2. Go to Subscriptions on the top toolbar, and select Subscription Manager.
  3. Toggle Advanced on the top left.
Support

Some aspects of this article require technical expertise with coding languages. This is self-serve and outside of the normal support policy.

Adding the Cancel Button

Open one of the files listed above. Locate the following <div>:

1<div class="og-dialog-footer">

Inside this <div>, above or below the existing <button> element, add the following:

1<button class="og-cancel-button" type="reset" aria-label="{{ 'modal_close_cancel' | t }}">
2  {{ 'modal_close_cancel' | t }}
3</button>

The end result should look similar to this:

1<div class="og-dialog-footer">
2  <button class="og-button" type="submit" name="change_shipment_date">
3    {{ 'modal_change_date_save' | t }}
4  </button>
5  <button class="og-cancel-button" type="reset" aria-label="{{ 'modal_close_cancel' | t }}">
6    {{ 'modal_close_cancel' | t }}
7  </button>
8</div>

In en-US.json, after "modal_close": "x",, add:

1"modal_close_cancel": "Cancel",

This key also needs to be added to all other language files. In fr-CA.json add:

1"modal_close_cancel": "Annuler",

In es-ES.json add:

1"modal_close_cancel": "Cancelar",

In buttons.less, add the following styling:

1.og-cancel-button {
2  border: @button-border;
3  border-radius: @button-border-radius;
4  padding: @button-padding;
5  cursor: pointer;
6  background: @button-background;
7  font-size: @button-font-size;
8  font-family: @button-font-family;
9  color: inherit;
10  margin: 0px 5px;
11}

Default styling is shown in the code example above.