Design the preorder widget

Use this guide to customize what customers see on the product page before they click: the button text, optional custom colors, a badge, and a disclaimer message. By the end, customers will see your chosen button text, colors, badge, and disclaimer on preorder products, live as soon as you save.

Before you begin

• You need an offer already created. Open an existing offer (Preorders in the left menu → Offers tab → open your offer) or create one first, see Set up preorders.
• Changes here are per-offer and take effect immediately on the live storefront once you save.

What customers will see

The Widget settings render directly on the product page, replacing the theme’s default “Add to cart” button and adding a badge and/or disclaimer next to it.

• Button: the “Add to cart” button’s text is replaced with your Button text (default “Preorder”). If the text includes variables, such as the ship date or the discount, STOQ fills them in from the offer’s settings, so the button stays up to date when you change the date, discount, or deposit. If Use custom colors for button is on, the button’s text and background colors are overridden with your chosen colors; otherwise it keeps the theme’s default styling.
• Badge: if Add badge is on, a small label is inserted next to the product price, showing your Badge text, or the offer name if no badge text is set, styled with the badge’s text and background colors.
• Disclaimer: if Add disclaimer is on, a styled text box appears near the button showing your disclaimer message, using the border radius, text color, and background color you set.

Exact placement depends on your theme: STOQ inserts the button, badge, and disclaimer next to existing theme elements, so spacing and position can vary between themes.

Set it up

On a phone, this menu is collapsed. In the Shopify mobile app, tap the STOQ logo at the top of the screen to open it, then choose the section named below. There is no hamburger icon. See Finding the STOQ menu.

1. Open the Widget section

   1. In the left menu bar of the STOQ app, click Preorders.
   2. Click the Offers tab.
   3. Click the offer you want to edit. Its Overview tab opens, showing the Customize button, a live preview, and the offer’s Products section.
   4. Click Customize to open the editor, then in the editor’s sidebar click Widget. The panel shows two groups of settings: Widget (button and colors) and Settings (names).

   

   

   

2. Set the button text

   Under Widget, enter your text in the Button text field. The default is Preorder; this replaces “Add to cart” on products covered by the offer. This field is translatable: click the language icon at the top of the Widget panel to add translations for other locales.

   To show the ship date, discount, or deposit on the button, add a variable:

   1. Click Variables on the right of the Button text label. The Available variables window opens.
   2. Find the variable you want, for example {{ date }} (Fulfillment date or message), and click Add to field next to it.
   3. Close the window. The variable is added to the end of your button text, for example Preorder, ships {{ date }}. You can move it or type words around it in the field.

   See Button text variables for what each one shows.

   

3. (Optional) Customize button colors

   1. Check Use custom colors for button.
   2. Click the Customize link that appears.
   3. Set the Text color and the Background color using the color swatches.

   If left unchecked, the button keeps your theme’s default colors and the custom color fields have no effect.

   

4. (Optional) Add a disclaimer

   1. Check Add disclaimer.
   2. Enter your message in the Disclaimer field that appears (for example, “This item will ship 30 days after you place the order”; the field supports multiple lines and is translatable via the language icon).
   3. Click Customize next to the disclaimer label to set:

   Control	What it does
   Border radius	Rounds the corners of the disclaimer box (in pixels; default 10)
   Text color	Sets the disclaimer text color
   Background color	Sets the disclaimer box background color

   The Background color also fills the box behind a preorder progress bar, even when the disclaimer is turned off, unless you set the bar’s own Box background color.

   

5. (Optional) Add a badge

   1. Check Add badge.
   2. Click Customize to set:

   Field	Default	What it does
   Badge text	Preorder	The label text shown in the badge
   Text color	#FFFFFF	Badge text color
   Background color	#000000	Badge background color

   The badge text is translatable. This only shows the badge next to the product-page button; to also show it on collection and home pages, go to Preorders in the left menu → Settings tab → Pages.

   

   

6. Set offer names

   Under Settings, enter an Offer name (customer-facing, shown in cart and at checkout) and an Internal name (visible only inside STOQ, used to identify the offer, must be unique per shop).

   

7. (Optional) Show the Notify me button

   If STOQ manages your inventory tracking, a Back in stock section appears below the names.

   1. Check Show ‘Notify me’ button on preorder products to add a “Notify me when available” signup button alongside the Preorder button.
   2. Click the Customize link that appears to style it.

   

8. Save changes

   Click Save changes at the top right of the editor. Changes apply immediately to the live storefront for all products in this offer.

Note

Saving in the Shopify mobile app looks different. The Save changes bar you see at the top on desktop is part of the Shopify admin, and in the Shopify mobile app it appears as a + icon in the top-right of the editor’s title bar (next to the ⋯ menu) instead of a labelled bar. If you don’t see a Save changes bar on your phone, tap that + to save your changes.

Button text variables

These are the variables in the Available variables window for Button text. STOQ fills each one in on the storefront from the offer’s settings:

Variable	Name in the window	Shows
{{ date }}	Fulfillment date or message	The ship date, for example Dec 25, 2024. If the offer ships as soon as possible or the date is unknown, it shows your shipping text from the offer’s Shipping section instead.
{{ month_year }}	Month and year only	The ship month and year, for example Dec 2024
{{ days }}	Number of days after checkout	The number of days, for example 14, when the offer ships a set number of days after checkout
{{ discount }}	Discount amount or percentage, if applicable	The preorder discount, for example $5.00 or 10%
{{ payment }}	Payment amount or percentage, if applicable	The amount due now, for example $25.00 or 10%. On full payment it shows 100%.

If the offer uses batches, three more appear: {{ batch }} (Open batch name), {{ batch_position }} (Open batch number), and {{ batch_ship_text }} (Open batch shipping text). They show the batch that is open now, so the button changes when the next batch opens.

{{ discount }} and {{ payment }} follow the payment option the customer has selected, and update when they switch to a different one. If a variable has no value, for example {{ discount }} on an offer with no discount, STOQ leaves it out, so customers never see a blank or the raw {{ }} text. Words and punctuation you typed around it stay, so Preorder, save {{ discount }} would read “Preorder, save”. Keep variables that might be empty at the end of the text, with no words of their own.

Check your setup

Before you check your store, look at the preview in the editor. On the Online store preview tab, it shows a real product from this offer. To preview a different one:

1. Click Preview with followed by the product name, above the preview.
2. Search in the Search products in this offer box, or scroll the list.
3. Click a product. The preview redraws with it.

If the offer has no products yet, the preview uses a sample product and the switcher doesn’t show.

Then open one of the offer’s products on your storefront and confirm:

• The Preorder button shows the text you entered in Button text, with any variables filled in, for example the real ship date instead of {{ date }}
• If you set custom colors, the button reflects them
• If you enabled the disclaimer, the message appears below the button
• If you enabled the badge, the badge label is visible near the button

Troubleshooting

The button color doesn't match what you picked

Confirm Use custom colors for button is checked in the Widget section. If it’s unchecked, the button color is fully controlled by your theme and can’t be overridden from STOQ.

The badge or button isn't showing on your collection or home page

The Widget section only controls the product page. Enable them from Preorders in the left menu -> Settings tab -> Pages. See Show preorder button on store pages.

You expected the disclaimer in the cart, at checkout, or in an email

On the storefront it renders only directly below the Preorder button on the product page, not in the cart or at checkout. For cart and checkout messaging, use the payment section’s billing title and description fields instead.

It does appear in emails, though: when Add disclaimer is on, the disclaimer is included per line item in both the STOQ and Klaviyo preorder confirmation emails, rendered as .offer-description. To hide it there, target td.preorder-product .offer-description with display: none !important; in the email’s Custom CSS. See Preorder confirmation notification.

You want shipping info in the disclaimer

That’s controlled from the offer’s Shipping section, not Widget. Check Show shipping timeline there to add a shipping message block below the button; it shares the Widget section’s text color, background color, and border radius, and appears even if Add disclaimer is off.

Translations aren't showing for your button, badge, or disclaimer text

Click the language icon at the top of the Widget panel to add or edit the translation for that locale.

The button shows {{ date }} or other curly-brace text

1. Check the spelling in Button text and in each translation. Only the variables listed in the Available variables window are filled in; anything else shows exactly as typed. Use Add to field, or type the variable exactly as it appears in the window.
2. Open the product in an incognito window and refresh the page.
3. If the variable is spelled correctly and the raw text is still there, contact STOQ support.

FAQ

What is the difference between Offer name and Internal name?

Offer name is customer-facing: customers see it in their cart and at checkout as the purchase-option label. Internal name is only visible inside STOQ and must be unique across your shop’s offers. Use the internal name to distinguish offers that might share a similar public name, for example “Preorder - Winter Drop” vs “Preorder - Spring Drop”.

Does changing the button text affect anything else, like confirmation emails?

No. Button text only changes what’s shown on the product-page button. Order confirmation email content is configured separately under Preorders in the left menu → Settings tab → Notifications, see Preorder confirmation notification.

Why does the editor preview show a sample product instead of mine?

The offer has no products yet. Once you add products, the preview shows one of them, and you can click Preview with above the preview to pick another. See Add products to an offer.

My badge text needs to say something different in French, can I translate it?

Yes. The badge text, button text, and disclaimer text are all translatable fields. Click the language icon at the top of the Widget panel to open the translations editor for the offer. See Preorder multi-language for details on managing translations across 24 locales.

Can the Preorder button show the ship date?

Yes. Click Variables next to Button text and add {{ date }}, or {{ month_year }} for just the month and year. When you change the date in the offer’s Shipping section and save, the button updates on its own.

My offer ships as soon as possible. What does {{ date }} show?

It shows your shipping text from the offer’s Shipping section instead of a date. The same applies when the ship date is unknown.

What happens to {{ discount }} if the offer has no discount?

It’s left out of the button, so customers never see a blank or {{ discount }}. Any words you typed next to it stay, so put the variable at the end of the text.

I offer a deposit and full payment. Which amount does {{ payment }} show?

It shows the amount for the payment option the customer has selected and updates if they switch. For the full payment option it shows 100%.

Do variables work in my translated button text?

Yes. Type the same variable into each translation of Button text in the translations editor, and STOQ fills it in for every language.

Related guides

Set up preordersCreate your first offer and go live end-to-end.

Preorder discountsAdd a percentage or fixed-amount discount in the Payment section.

Show preorder button on store pagesAdd the Preorder button and badge to collections, home, and custom pages.

Preorder confirmation notificationCustomize the email customers receive after placing a preorder.

Preorder countdown timerAdd a live countdown timer to create urgency on the product page.

Preorder multi-languageTranslate button text, disclaimer, and badge text into other languages.