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) 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.
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.
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.
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.
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.
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
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.
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.
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.
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, orCancelled— using the colours from Status BadgesCadence 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.
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:
Save in the editor
Click Save in the top-right.
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.
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.
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).
Frequently asked questions
Related guides
Last updated