---
title: "Design the preorder widget"
description: "Customize the button text, colors, badge, and disclaimer that customers see on your product page preorder widget."
url: https://help.stoqapp.com/preorders/design-preorder-widget/
product: "Preorders"
section: "Build your offer / Look and storefront"
last_updated: 2026-11-04
---

# Design the preorder widget

> Customize the button text, colors, badge, and disclaimer that customers see on your product page 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](https://help.stoqapp.com/preorders/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](https://help.stoqapp.com/general/getting-started-with-stoq/#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).

   [Image: Preorders Offers tab in the STOQ app](https://help.stoqapp.com/images/general/r1.png)

   [Image: The offer Overview tab with the Customize button](https://help.stoqapp.com/images/general/r2.png)

   [Image: The offer editor sidebar with the Widget option selected](https://help.stoqapp.com/images/general/r3.png)

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](#button-text-variables) for what each one shows.

   <!-- screenshot: design-preorder-widget Button text with Variables link and Available variables modal -->

   [Image: The Button text field in the Widget panel](https://help.stoqapp.com/images/general/r4.png)

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.

   [Image: The Use custom colors for button checkbox in the Widget panel](https://help.stoqapp.com/images/general/r5.png)

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](https://help.stoqapp.com/preorders/preorder-progress-bar/), even when the disclaimer is turned off, unless you set the bar's own **Box background** color.

   [Image: The Add disclaimer checkbox in the Widget panel](https://help.stoqapp.com/images/general/r6.png)

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**.

   [Image: The Add badge checkbox in the Widget panel](https://help.stoqapp.com/images/general/r7.png)

   [Image: The Add badge checkbox and its Customize controls](https://help.stoqapp.com/images/general/r8.png)

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).

   [Image: The Offer name and Internal name fields](https://help.stoqapp.com/images/general/r9.png)

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.

   [Image: The Show Notify me button setting](https://help.stoqapp.com/images/general/r10.png)

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](https://help.stoqapp.com/preorders/preorder-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.

<!-- screenshot: the offer editor preview with the Preview with switcher open. Marker 1 on Preview with [product], marker 2 on the search box, marker 3 on a product in the list. Crop to the preview header and dropdown. -->

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](https://help.stoqapp.com/preorders/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](https://help.stoqapp.com/preorders/preorder-confirmation-notification/#custom-css-selectors).

### 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](https://help.stoqapp.com/preorders/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](https://help.stoqapp.com/preorders/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](https://help.stoqapp.com/preorders/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 preorders](https://help.stoqapp.com/preorders/set-up-preorders/): Create your first offer and go live end-to-end.
- [Preorder discounts](https://help.stoqapp.com/preorders/preorder-discounts/): Add a percentage or fixed-amount discount in the Payment section.
- [Show preorder button on store pages](https://help.stoqapp.com/preorders/show-preorder-button-on-store-pages/): Add the Preorder button and badge to collections, home, and custom pages.
- [Preorder confirmation notification](https://help.stoqapp.com/preorders/preorder-confirmation-notification/): Customize the email customers receive after placing a preorder.
- [Preorder countdown timer](https://help.stoqapp.com/preorders/preorder-countdown-timer/): Add a live countdown timer to create urgency on the product page.
- [Preorder multi-language](https://help.stoqapp.com/preorders/preorder-multi-language/): Translate button text, disclaimer, and badge text into other languages.