Skip to main content

Customize the Subscribe & Save Widget

Style and configure how the subscription widget looks and behaves on your product pages — all from the Shopify Theme Editor, no code required.

Opening the settings​

  1. In your Shopify admin, go to Online Store → Themes → Customize.
  2. Open a product template and select the Subscribe & Save app block (add it first if it isn't there yet).
  3. The block's settings appear in the sidebar, grouped into sections. Changes preview live and only affect appearance — your plans and pricing are unchanged.

Layout & display​

  • Program type — show purchase options as Radio rows or Pill tiles. Radio rows show the price (plus any crossed-out, unit, or per-frequency details) next to each option; pill tiles stay compact and don't show a price — the savings badge sits on the tile instead.
  • Frequency type — let customers pick the delivery frequency via a Dropdown, Radio buttons, or Buttons.
  • Default purchase type — whether one-time or subscription is pre-selected.
  • Use short interval labels — show "Every 2 weeks" instead of "Delivery every 2 weeks".
  • Pill columns and spacing for fine-tuning the layout.

Pricing & savings​

  • Savings badge — show how much customers save on a subscription, as a percentage or an amount. Choose an Overlapping card style (a little badge that sits on top of the option) or Inline (next to the plan name), and set its colours.
  • Crossed-out price — show the regular price with a strikethrough next to the discounted subscription price.
  • Per-frequency savings — show each delivery frequency's discount right in the selector, so customers can compare options at a glance.
  • Prepaid plan details — for prepaid plans, show the per-delivery price and the upfront total.
  • Unit price — show the price per unit (like €5.00/kg) for products that have a unit of measurement set in Shopify. The subscription figure reflects the selected frequency's discount, and you can choose whether it shows on the subscription price only or on the one-time price too. The unit itself comes from Shopify in each shopper's language; to set your own wording instead, fill in the product's Pack unit term — see Per-product text.
  • Hide product prices — hide prices in the widget entirely.

Subscription details​

  • Show subscription details — add an extra block of text, such as "Pause, skip or cancel anytime".
  • Position — show it inline as an expandable section under the selected plan, or as a standalone text block above or below the plans. When shown above or below, you can style its background, text colour, padding and border.

Text & features​

  • Subscription features — a rich-text list of selling points shown under a subscription option.
  • Bullet style — choose the list marker (disc, circle, square, dash, checkmark, arrow, or none) and its colour, for both the features list and the details text.
  • Typography — title, heading and body font sizes and weight.

Colours, borders & spacing​

Match the widget to your theme with controls for the option background, the selected-option highlight, borders, radio-button colours, and the frequency dropdown / button colours.

Subscription Packs​

Subscription Packs is an alternative block to the Subscribe & Save widget. Instead of a list of delivery frequencies, it turns a product's variants into pack tiles — each showing its price, savings and image — with a single one-time vs subscribe toggle on top. It's a good fit for products sold in different pack sizes (a single, a double, a value pack), where you want customers to pick a pack and a purchase type in one place.

To add it, go to Online Store → Themes → Customize, open a product template, and add the Subscription Packs app block. Picking a pack updates the product image, price and URL just like the theme's own variant picker. For products you sell only as a subscription, the toggle is hidden and any pack without a selling plan is disabled, so customers can only choose a buyable subscription pack.

If you've limited a subscription plan to certain markets, the Subscription Packs widget follows that automatically: in a market where a pack's plan isn't sold, that pack appears only under One-time purchase, never under Subscribe — and the Subscribe option is hidden entirely when none of the product's packs can be subscribed to in that market.

One Plan Per Market

Give each pack a single subscription plan for any one market. If you run separate plans for different markets — say a EUR plan and a CHF plan on the same pack — set their market limits so they don't overlap, and only one plan applies in each market. If two of a pack's plans are both available in the same market, the widget shows whichever it finds first, which may not be the one you meant.

The savings badge shows in both purchase modes when a pack is on sale: under Subscribe it reflects the full saving (the sale discount plus the subscription discount), and under One-time purchase the sale discount alone (the compare-at price versus the actual price).

Its Pricing & savings and Colours & borders settings work like the widget's — unit price, crossed-out price, the savings badge, and the tile background, selected-tile highlight and border controls. A few settings are specific to this block:

  • Show variant image — show each variant's image on its tile.
  • Default purchase type — whether one-time or subscribe is pre-selected.
  • Text below the widget — an optional rich-text note shown under the packs (delivery info, a guarantee, etc.).
  • Hint shown when subscription is selected — an optional rich-text note shown above the packs, but only while Subscribe is chosen (hidden in one-time mode). Good for a contextual reassurance line like "cancel anytime, no minimum term".
  • Center text below widget — centre that note instead of left-aligning it.
  • Show add-to-cart button — adds a buy button below the packs (off by default). The selected pack — with its subscription plan when "Subscribe" is chosen — is added to the cart.
  • Button action — what the button does: Buy now (go to checkout) (the default) takes the shopper straight to checkout; Add to cart adds it and goes to the cart. The label ("Buy now" / "Add to cart") follows the choice and comes translated in every language Zubs supports.
  • Show price in button — shows the selected pack's price in the button, after the label (with the compare-at price struck through when there is one). It updates as the shopper switches pack or purchase type.

Per-product text: unit term and subtitle​

Two optional touches come from metafields you create once, then fill in per product or variant:

  • Pack unit term (on the product) — replaces everything Shopify prints after the per-unit price (for example treatment, so a tile reads "€5.00/treatment"). It applies everywhere that product shows a per-unit price: the pack tiles and the widget's Unit price. Write the whole unit including its quantity — 100 g, not g — since it stands in for Shopify's unit entirely. Leave it unset to use Shopify's own unit, like /kg.
  • Pack subtitle (on each variant) — a short line under the pack's name on its tile, such as Most popular or Best value. Shown for both one-time and subscribe.
  • Pack subtitle (subscription) (on each variant, optional) — overrides the subtitle when Subscribe is selected, e.g. 60 capsules · monthly. When empty, the regular Pack subtitle is used in both modes.

Create the definitions (once per store). Go to Settings → Metafields and metaobjects:

  1. Open Products → Add definition. Name it Pack unit term, and make sure the namespace and key is custom.pack_unit_term (with underscores — the widget looks for exactly this key). Set the type to Single line text. Under Access, turn on Storefronts can read so the widget can display it. Save.
  2. Open Variants → Add definition. Name it Pack subtitle, key custom.pack_subtitle, type Single line text, and turn on Storefronts can read. Save.
  3. (Optional) Open Variants → Add definition again. Name it Pack subtitle (subscription), key custom.pack_subtitle_subscription, type Single line text, Storefronts can read on. Save. Only needed if you want a different subtitle in subscribe mode.

Tip: while editing each definition, pin it so it shows up directly on the product and variant pages.

Fill them in. Open a product and set its Pack unit term in the Metafields section; set Pack subtitle on each variant.

Translate them (multi-language stores). Enter the value in your store's default language first (Settings → Languages shows which one that is). Then open Translate & Adapt → Products → your product and scroll to the Metafields section: Pack unit term (and each variant's Pack subtitle, plus Pack subtitle (subscription) if you use it) appear there with a field for every other language. Translate each one you've filled in — they localize independently, so a missing translation on one falls back to its base-language value. Save, and the widget shows each shopper the term and subtitle in their own language automatically.

Tips​

  • The widget only appears on products that have a subscription plan attached. See Creating a subscription program.
  • Requires a Shopify 2.0 theme.
  • On mobile, the pack text scales down a little automatically so a pack's name, price and badge stay on fewer lines — no setup needed.
  • This block covers product pages only. To offer subscriptions on items already in the cart, see Offer subscriptions in the cart.