Skip to content
Settings

Customizing the subscription widget

Updated February 12, 2026

The Subscription Widget is what customers see on your product page when purchasing a subscription.

You can fully customize its appearance directly inside your Shopify Theme Editor.

Where to Find the Subscription Widget Settings

  1. In Shopify Admin, go to Online Store → Themes
  2. Click Customize
  3. Navigate to a Product Page
  4. Click on the Content Vault – Subscription Widget block

Shopify theme editor with the Content Vault subscription widget block selected on a product page

Once selected, you’ll see all customization options in the left sidebar.

Available Customization Options

1) Text

This section controls the text labels customers see inside the widget.

  • Title (example: “Purchase options”)
  • Footer (example: “Cancel at any time”)

Shopify theme editor with the subscription widget Text settings for title and footer highlighted

2) Customizations (Display Toggles)

These toggles control what extra details show inside the widget.

  • Display subscription length Shows the billing interval under the plan (example: “Subscription, billed monthly”).
  • Display discount badge Shows a discount label when a plan has a discount (example: “15% off for first 3 payments”).
  • Display compare at price Shows the “compare at” / crossed-out price when applicable.

Shopify theme editor showing the widget Customizations display toggles for subscription length and discount badge

3) Discount Badge Styling

If Display discount badge is enabled, you can customize the badge appearance:

  • Discount badge text color
  • Discount badge text size
  • Font size
  • Border thickness
  • Border corner radius
  • Widget padding

Theme editor Widget appearance panel with color, font size, border and padding fields for the widget

4) Content Pass Download Widget (Content Pass Subscriptions Only)

If you’re using Content Pass, you can customize the subscriber download button:

  • Download Button Label
  • Text color
  • Background color
  • Font size
  • Show preview with demo data (useful for theme editor previews)

Theme editor Content Pass download widget settings with download button label, colors and font size

5) Advanced (Optional) – Custom CSS

For deeper styling control, you can add CSS overrides.

Example:

#cv-subscriptions-widget-title {
  font-size: 50px;
}

Theme editor Advanced section with the Custom CSS styles box overriding the widget title

What Customers See

On the product page, customers can:

  • Choose a tier (plan)
  • See billing frequency / subscription length (if enabled)
  • See discounts and compare-at pricing (if enabled)
  • Add the subscription to cart

Storefront product page subscription widget with Silver and Gold membership tiers and add to cart

Important Notes

  • The widget only appears on products with an active subscription attached
  • Changes update immediately in your theme preview
  • Styling changes do not affect subscription logic — only appearance

Best Practices

  • Keep font sizes consistent with your theme
  • Use padding to avoid cramped layouts
  • Highlight discounts with badge styling
  • Preview on both desktop and mobile before publishing

If you need help matching the widget to your brand, feel free to reach out via live chat.