Style the Preorder button, badge and price (Essential Preorder app)

This article covers the design controls for your preorder and back-in-stock elements: the button, the badge and the price display. It's for anyone who wants the storefront to match their theme, or who can't find a setting that changes how these elements look.

Most colour, text and position changes are self-serve from the app's Design tab. A few things, like badge position and size, are not merchant settings and need a request to support. This article tells you which is which.

Style the preorder button

• Go to your preorder campaign, then open the Design tab.
• Under Preorder button, edit Button text to change the wording (for example, to "Preorder now").
• Scroll to the background settings to choose Single color background or Gradient background for the button.
• Turn on Use your theme fonts if you want the button text to match the rest of your storefront instead of the app's default font.

The app does not have a field for a custom width, shape or corner radius on the button. If your theme's Add to Cart button is pill-shaped or full-width, match it with a small CSS rule in your theme rather than looking for a setting in the app (see the CSS section below).

Show the discounted price on the button

If your campaign includes a discount, two toggles control what shoppers see:

• Show discounted price: when this is off, the theme's product price stays unchanged on the page, but the discount still applies at checkout.
• Show discounted price in the button: controls whether the reduced price also appears inside the button text itself.

You can also turn on Strike through price so the original price shows crossed out next to the discounted one, and set Button price and Payment details content in the same Design tab if your campaign uses partial payments. For how partial payments work end to end, see Managing Preorder Partial Payments.

Style the preorder badge

The badge is the small label shown on product images. In the Design tab, under Badge, you can edit:

• Badge text: the wording shown on the badge.
• Background color
• Text color

The badge must be turned on first: go to the campaign's Content tab and check Show preorder badge. If it's off, the Design tab shows Enable badge in the Content tab to customize its design. instead of the colour fields.

What you can't change yourself

Badge position and size are not merchant-editable settings. The app places the badge in a fixed spot on the product image and product lists, and there's no field to move it or resize it. If you need a different position or size, use Reach out next to Our support team can customise style and positioning of the badge to fit your store. and tell support where you want it moved. This opens a chat prefilled with "Hi, I want to customize a badge".

Don't assume badge position changes are self-serve because badge colour is. Colour and text are yours to edit; position and size are not, and asking support to move it is the intended path, not a workaround.

Badge not showing at all

If the badge doesn't appear anywhere, first check Show preorder badge is on in the Content tab. If it's already on and the badge still doesn't show, use Can't see badge? → Contact support (prefilled message: "Hi, I can't see the preorder badge on my store."). A theme conflict with another app that also injects badges (wishlist tags, sale badges) is a common cause support will check for.

Position the message and price

For the on-page Preorder message and the Price block, choose where each sits relative to the button:

• Inside top
• Inside bottom
• Outside top
• Outside bottom

Use Price alignment to set left, centre or right alignment for the price block, independent of its position.

When you need custom CSS

Anything not covered by the Design tab, such as button shape, exact spacing, or matching a very specific theme style, needs a small CSS rule added to your theme. The app doesn't have a custom-CSS field of its own. Add your rule under Online Store > Themes > Edit code, in base.css or theme.css, or in Theme settings > Custom CSS if your theme has that option.

These data attributes are stable and safe to target:

Page builder apps that don't support standard theme code (some drag-and-drop "composer" style builders) can't accept these CSS rules the way a normal theme can. If your store uses one, ask its support how to add custom CSS, or contact our support for the exact rule and they can tell you where it needs to go.

Moving the button below Add to Cart

If you want the preorder or Notify Me button to sit under the Add to Cart button instead of beside it, this is also a CSS change in your theme, targeting the containers above. Contact support with a link to the product page and describe the layout you want; they can give you the exact rule for your theme.

Troubleshooting: button or badge looks wrong or is missing

For location- or market-specific visibility issues, see Why is Preorder Button not Showing? Check Location Fulfillment Settings. For how campaigns and stock limits interact more generally, see How Preorder Campaigns Work.

Still stuck?

If a setting isn't behaving as described here, or you need a layout change beyond what's covered above, contact support with a link to the product page and a description (or screenshot) of what you want it to look like.