Display a clear payment-option card on your product page so buyers can see how they'll be charged for a pre-order — full payment or partial payment — before they click the pre-order button. This article covers what the card shows, how to turn it on, and how to style and translate it.
Before you start
You have the Notify Me! Pre-order module set up on your store.
You have at least one active pre-order Offer configured. The selector card reads its content from that offer. Learn more in How to Create and Configure an Offer.
The selector is on.
What the selling plan selector shows
The selector is a single card that appears on the product page for products eligible for pre-order. It surfaces information that used to be applied silently in the background, so your buyer now sees exactly what they're agreeing to.
Each card contains:
Title — "Reserve now, pay later" for partial-payment offers, or "Full payment" for full-payment offers. Both titles are editable per language.
Description — auto-generated from the offer's billing policy and availability date (for example, "Pay 30% now, balance on November 15" or "Ships around December 20").
Discount badge — if the offer has a discount, the card shows a "Save 10%" or "Save 10.00 USD" badge.
Selection indicator — the card is always pre-selected because each variant has a single payment option. There's nothing for the buyer to choose between; the card's job is to make the option visible.
Turn the selector on
From your Shopify admin, open Apps and select Notify! Back in Stock | Pre-order.
Go to the Pre-order tab.
Scroll to Product page customization and open the Product page section.
Toggle the selector ON.
Click Save.
The card now appears on product pages that are eligible for pre-order.
Style the card to match your theme
The card has its own style controls, separate from the pre-order button's styles.
Open Pre-order → Product page customization → Style
Adjust the style controls:
Background color — the card's fill color.
Border color — the color of the card's outer border.
Title color — the color of the card's title.
Border radius — how rounded the card's corners are.
Offer description color — the text color used for the description line.
Disount badge background color — the color of the card's discount badge if the offer has discount set.
Disount badge text color — the color of the card's discount badge text.
Discount badge border radius — how rounded the card's discount badge corners are.
Optionally, add CSS rules in the Custom CSS field for finer control (for example, spacing or typography overrides).
Use the live preview on the right to check your changes before saving. The preview uses mock data, not your real offers.
Click Save.
💡 Tip: The selling plan selector card and the pre-order button are styled separately. If you want the two to feel consistent, match the card's border radius and border color to the button's. For button styling, see Customize the Pre-order Button Style to Match Your Theme.
Translate the card's text
The card uses the same translation form as the rest of the pre-order module. You can set a different title and discount-badge prefix for each language your store supports.
Open Settings → Language.
Select the language you want to edit.
Select Preorder> Widget display
Update these fields:
Partial payment title — default: "Reserve now, pay later".
Full payment title — default: "Full payment".
Discount badge prefix — default: "Save". The amount is appended automatically (for example, "Save 10%").
Click Save.
The description text below the title reuses your existing billing labels (due-now label, due-later label, and the "Soon available" text). Update those in the same translations form if needed.
Where the card appears on the page
By default, the card is placed directly above the pre-order button. If you want to move it somewhere else on the product page, you can add the Preorder Offer Selector theme block. The block doesn't affect the pre-order button's position — only the card's. See Reposition the pre-order payment card with the Preorder Offer Selector block for details.
Need help?
Contact our support team via live chat (we typically respond within minutes) or email (we usually respond within a few hours). You can reach us from the Help page in your Notify Me! dashboard.