> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# Adding a Cancel Button to Modals

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](https://rc3.ordergroove.com/).
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>`:

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

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

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

The end result should look similar to this:

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

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

```json
"modal_close_cancel": "Cancel",
```

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

```json
"modal_close_cancel": "Annuler",
```

In `es-ES.json` add:

```json
"modal_close_cancel": "Cancelar",
```

In `buttons.less`, add the following styling:

```css
.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;
}
```

Default styling is shown in the code example above.