> For the complete documentation index, see [llms.txt](https://docs.roadmap.so/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roadmap.so/subscriptions/storefront-and-accounts/configuring-the-customer-subscriptions-widget-legacy-customer-accounts.md).

# Configuring the Customer Subscriptions widget (legacy customer accounts)

Style the customer subscription card on the storefront account page — field-by-field reference for stores on legacy Shopify customer accounts.

The Customer Subscriptions widget is the subscription management card customers see on their storefront account page — the `My Subscriptions` surface with status pill, address, upcoming dates, products, total, and the **Manage Subscription** dropdown.

This article is the field-by-field reference for the editor that styles that card. It applies only to stores on legacy Shopify customer accounts. If you're on Shopify's new customer accounts — introduced in 2023 — see [Configuring the Subscription Management block (new customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-subscription-management-block-new-customer-accounts.md) instead — the styling approach is fundamentally different.

#### Am I on legacy or new customer accounts?

If your store's customer-account URLs look like `yourstore.com/account/...`, you're on legacy. If they look like `shopify.com/<store>/account/...`, you're on new accounts.

You can also check from the Shopify admin: **Settings → Customer accounts**. If it says `Classic customer accounts` you're legacy. Otherwise you're on the new accounts model.

#### Where to find the editor

In Roadmap, open **Subscriptions**, then **Edit Subscription Widget** in the top-right, and select the **Customer Subscriptions** editor from the page selector at the top.

#### How the editor is laid out

A live preview of a customer subscription card on the left, and a **Settings** panel on the right with nine collapsible groups. Edits in **Settings** update the preview immediately. A note at the bottom of the editor reminds you these settings only apply when the customer-account widget is configured to use admin settings.

#### Settings panel: Card Styling

The container wrapping each subscription on the customer's account page.

| Field             | Effect                                                                       |
| ----------------- | ---------------------------------------------------------------------------- |
| Border color      | Border color around each card.                                               |
| Background        | Fill color of the card.                                                      |
| Border width      | Border thickness in px.                                                      |
| Border radius     | Card corner-rounding in px.                                                  |
| Card padding      | Inner padding in px.                                                         |
| Gap between cards | Vertical spacing between cards when the customer has multiple subscriptions. |

#### Settings panel: Typography

Font controls for headings and product titles.

| Field                   | Effect                                  |
| ----------------------- | --------------------------------------- |
| Title color             | Color for the card's main heading text. |
| Title font size         | Size in px.                             |
| Title font weight       | Weight, for example `700 Bold`.         |
| Product title colour    | Colour for product line-item titles.    |
| Product title font size | Size in px.                             |

By default the widget inherits the theme's font family. These overrides only adjust color, size, and weight.

#### Settings panel: Price

How prices read on the card.

| Field           | Effect            |
| --------------- | ----------------- |
| Price color     | Price text color. |
| Price font size | Size in px.       |

#### Settings panel: Status Badges

Status pills shown at the top of each card — `Active`, `Paused`, `Failed`, and `Cancelled`.

| Field               | Effect                                                        |
| ------------------- | ------------------------------------------------------------- |
| Active color        | Background color for the Active badge. Most stores use green. |
| Paused color        | Background for the Paused badge. Gray or amber is typical.    |
| Failed color        | Background for the Failed badge. Red is typical.              |
| Cancelled color     | Background for the Cancelled badge. Muted gray is typical.    |
| Badge font size     | Pill text size in px.                                         |
| Badge border radius | Corner-rounding in px. High values produce rounded pills.     |
| Badge text color    | Text color, applied to all four badges.                       |

Match your store's overall use of color so customers don't read a `Cancelled` red badge as a critical alert when it's just informational.

#### Settings panel: Buttons

The **Manage Subscription** button and any other primary or secondary buttons on the card.

| Field                   | Effect                                                                     |
| ----------------------- | -------------------------------------------------------------------------- |
| Primary text color      | Text color for primary buttons, for example **Manage Subscription**.       |
| Primary background      | Background color for primary buttons.                                      |
| Secondary text color    | Text color for secondary buttons, for example the Cancel option in modals. |
| Secondary background    | Background color for secondary buttons.                                    |
| Button border radius    | Corner-rounding in px.                                                     |
| Button padding (block)  | Top and bottom padding in px.                                              |
| Button padding (inline) | Left and right padding in px.                                              |

The **Manage Subscription** button is the primary action on every card and gets the most clicks — make it your most-prominent CTA color.

#### Settings panel: Images

| Field              | Effect                                                                                                                   |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| Product image size | Pixel size of the product thumbnails next to each line item. Set to `0` to hide images entirely for a more compact card. |

#### Settings panel: Dropdown Menu

The dropdown that opens when the customer clicks **Manage Subscription**.

| Field                 | Effect                                                                |
| --------------------- | --------------------------------------------------------------------- |
| Menu background       | Fill color of the dropdown panel.                                     |
| Menu border color     | Border around the dropdown.                                           |
| Menu border radius    | Corner-rounding in px.                                                |
| Item text color       | Text color for each action in the dropdown.                           |
| Item hover background | Highlight color when the customer hovers an action.                   |
| Item font size        | Size in px.                                                           |
| Item padding          | Padding inside each action row in px.                                 |
| Gap from button       | Vertical space between the **Manage** button and the opened dropdown. |

Customers spend real time in this dropdown when managing their contract — make it readable and tappable.

#### Settings panel: Dialog Modal

The modals that open from each action, for example Skip, Reschedule, and Update payment method.

| Field         | Effect                                         |
| ------------- | ---------------------------------------------- |
| Overlay color | Color of the dimming overlay behind the modal. |
| Background    | Modal panel background.                        |
| Border color  | Modal panel border.                            |
| Border radius | Corner-rounding in px.                         |
| Padding       | Inner padding in px.                           |
| Heading color | Color of the modal's title text.               |
| Text color    | Body text color.                               |

**Form Inputs within Dialog Modal**

Text inputs, date pickers, and dropdowns inside modals.

| Field               | Effect                 |
| ------------------- | ---------------------- |
| Input border        | Border color.          |
| Input background    | Fill color.            |
| Input text color    | Color of typed values. |
| Input border radius | Corner-rounding in px. |

#### Edit Card Layout

The **Edit Layout** button at the bottom of the **Dialog Modal** section opens a separate **Edit Card Layout** modal. Inside, drag to reorder sections within the card's left and right columns. Click the eye icon next to any section to show or hide it.

Default section order:

* **Left Column:** Status Badge → Delivery Info → Subscription ID — hidden by default — → Discounts → Product Lines → Total
* **Right Column:** Manage Button → Upcoming Shipments

Common layout changes:

* Move **Manage Button** to the top-right by leaving it in the right column at position `1`.
* Show the **Subscription ID** so customers can quote it when contacting support — useful for B2B and high-touch stores.
* Hide **Discounts** if you'd rather keep promotional messaging out of the management view.

Required sections — **Status Badge**, **Product Lines**, and **Total** — can be reordered but not hidden. The eye icon is fixed-on for those.

#### What customers see

A subscription card per contract on their account page, listing:

* **Status pill** — `Active`, `Paused`, `Failed`, or `Cancelled` — using the colours from **Status Badges**
* Cadence and shipping address — **Delivery Info**
* Optional **Subscription ID** — off by default
* Upcoming shipment and charge dates — next two
* Product line items with quantity and price — **Product Lines**
* Loyalty redemptions, if applied — **Discounts**
* Total per cycle
* The **Manage Subscription** button that opens the action dropdown

For what each action in the dropdown does, see [The customer subscription dashboard: a tour](/subscriptions/storefront-and-accounts/the-customer-subscription-dashboard-a-tour.md).

#### Preview-and-save workflow

The editor's left-side preview updates live as you change settings on the right. When you're happy with the look:

{% stepper %}
{% step %}
**Save in the editor**

Click **Save** in the top-right.
{% endstep %}

{% step %}
**Verify on the storefront**

Open your storefront account page logged in as a real customer with an active subscription. The rendered card should match your editor preview.
{% endstep %}

{% step %}
**Test a couple of dropdown actions**

Open the **Manage Subscription** dropdown and trigger an action, for example **Skip next delivery** or **Update payment method**. Confirm the modal styling reads cleanly — overlay, modal background, and button hierarchy.
{% endstep %}
{% endstepper %}

#### Common scenarios

**The widget shows fine in the editor but looks off on my live storefront**

Most often this is a theme-level CSS override. Check your theme's customer-account template for any global styles affecting `.subscription`, `.account`, or generic card classes. The editor preview uses Roadmap's defaults. Your theme may be applying its own rules on top.

**I want to hide a section on the card**

Use **Edit Layout**. Click the eye icon next to the section you want to hide. Note that **Status Badge**, **Product Lines**, and **Total** can be reordered but not hidden — they're treated as required.

**Status badge colors show fine in the editor but the live site looks different**

Confirm you've set all four badge colours, not just Active. The editor preview shows the Active badge by default. Live cards in `Paused`, `Failed`, and `Cancelled` use the colours configured for those statuses.

**I migrated to new customer accounts — does this editor still apply?**

No. Once you're on new accounts, the customer-side widget is configured via Shopify's theme editor with the **Subscription Management** block. Settings made in this editor are no longer used. See [Configuring the Subscription Management block (new customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-subscription-management-block-new-customer-accounts.md).

#### Frequently asked questions

<details>

<summary>Can I have different styling per subscription status?</summary>

Only via the Status Badges colours. Card styling, typography, buttons, and dropdown styling are global across all subscriptions a customer holds.

</details>

<details>

<summary>Why are my customers' Manage Subscription dropdowns showing a different list of actions?</summary>

Action availability is status-dependent — see [The customer subscription dashboard: a tour](/subscriptions/storefront-and-accounts/the-customer-subscription-dashboard-a-tour.md). Active contracts show `10` actions. Paused and Failed contracts show `4`. The styling settings here apply to whichever actions appear.

</details>

<details>

<summary>Does Edit Layout affect new customer accounts too?</summary>

No. **Edit Layout** only applies to legacy customer accounts. On new accounts, layout follows Shopify's customer-account theme settings.

</details>

#### Related guides

* [The customer subscription dashboard: a tour](/subscriptions/storefront-and-accounts/the-customer-subscription-dashboard-a-tour.md)
* [Configuring the Subscription Management block (new customer accounts)](/subscriptions/storefront-and-accounts/configuring-the-subscription-management-block-new-customer-accounts.md)
* [Configuring the Product Page subscription widget](/subscriptions/storefront-and-accounts/configuring-the-product-page-subscription-widget.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.roadmap.so/subscriptions/storefront-and-accounts/configuring-the-customer-subscriptions-widget-legacy-customer-accounts.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.