Adding a Cancel Button to Modals

🚚 Moving to Dev Docs

Technical documentation is now hosted in our Developer Documentation. This article has already migrated; check it out there. The Knowledge Center version will be retired on April 29th, 2024.

Out of the box pop-up modals in the Subscription Manager contain a confirm action button and a standard 'X' close button that customers can use to close the modal. Sometimes, to keep website continuity,  an additional 'Cancel' action button is need. This article takes you though adding a dedicated 'Cancel' button to the modals.


Applicable Files

The following files contain popup 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-now.liquid
  • skip.liquid

Accessing the Advanced Editor

We'll be using the advanced editor to modify the Subscription Manager. You can access it through your Ordergroove Admin:

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

Note: Some aspects of this article require technical expertise with coding languages. This is self-serve and outside of the normal support policy. If you do not currently have someone on staff that can provide that level of technical assistance, Ordergroove suggests seeking out that level of support before attempting to add or alter any working code relating to your subscriptions or storefront.

Adding the Cancel Button

Open one of the files mentioned above. You can add a cancel button to the popup modal, look for the following <div>

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

Within this <div>, below or above the <button> that exists, add the following code:

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

The end result should look similar to this:

<div class="og-dialog-footer">
<button class="og-button" type="submit" name="change_shipment_date">
{{ 'modal_change_date_save' | t }}
<button class="og-cancel-button" type="reset" aria-label="{{ 'modal_close_cancel' | t }}">
{{ 'modal_close_cancel' | t }}
</div>{# /og-dialog-footer #}

In en-US.json file after:

"modal_close": "x",

Add the following:

"modal_close_cancel": "Cancel",

This will also need to be added to the other language files. In fr-CA.json add:

"modal_close_cancel": "Annuler",

In es-ES.json add:

"modal_close_cancel": "Cancelar",

In the buttons.less file, add the following:

.og-cancel-button {
border: @button-border;
border-radius: @button-border-radius;
padding: @button-padding;
cursor: pointer;
background: @button-background;
font-size: @button-font-size;
font-family: @button-font-family;
color: inherit;
margin: 0px 5px;

NOTE: Default styling is shown in the code example above.