> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://stoqapp.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to customize currency format and button text for a preorder offer

STOQ lets you customize the currency format and button text for each preorder offer individually. These settings are found in the **Currency & custom styles** section under the Advanced tab of your offer. You can change how prices are displayed, add custom CSS to style the preorder button, and override default button labels like "Out of stock," "Add to cart," "Continue," and "Cancel."

### How to Access Currency and Button Text Settings

These settings are located inside the Advanced section of each preorder offer's customization page.

1. From your Shopify admin, open the **STOQ** app.
2. Go to **Preorders** > **Offers** tab.
3. Click on the offer you want to customize.
4. Click on **More Settings** under **Advanced section** in the sidebar.
5. From the options that appear, choose **Advanced**
6. Scroll down to the **Currency & custom styles** section.

The CSS field is visible by default. To see all text fields, click **Show more** below the CSS field.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur2_1sjuqh.png)
### Custom CSS

The CSS field lets you add custom styles to the preorder button and other STOQ elements on your storefront. This field is always visible in the Currency & custom styles section.

1. In the **CSS** field, enter your custom CSS rules.
2. Use the `.restock-rocket-preorder-button` class to target the preorder button.
3. Click **Save changes** at the top of the page.
4. Visit your storefront to verify the changes.

For example, to change the preorder button's background color:

```css
.restock-rocket-preorder-button {
  background-color: #000000;
  color: #ffffff;
}
```

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur1_t8qybc.png)
| **Tip:** Save and visit your storefront to check CSS changes. The preview inside STOQ may not reflect all custom CSS rules.

### Currency Format

The currency format field controls how prices are displayed in preorder-related elements on your storefront, such as payment details and discount information.

1. Click **Show more** in the Currency & custom styles section.
2. In the **Currency format** field, enter your preferred format.
3. Use the following variables in your format string:
* `{{amount}}` — The price amount (for example, `150.00`).
* `{{currency}}` — The currency code (for example, `CAD`, `USD`).
* `{{currency_symbol}}` — The currency symbol (for example, `$`, `€`).
4. Click **Save changes**.

##### Examples

| Format | Output |
| ---- |
| `{{amount}} {{currency}}` | 150.00 CAD |
| `{{currency_symbol}}{{amount}}` | $150.00 |
| `{{currency_symbol}}{{amount}} {{currency}}` | $150.00 CAD |

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur3_2evyq9.png)
| **Tip:** For a full list of available amount variables (such as `{{amount_no_decimals}}` or `{{amount_with_comma_separator}}`), see Shopify's [currency formatting documentation](https://help.shopify.com/en/manual/international/pricing/currency-formatting).

### Out of Stock Text

This field controls the text shown on the button when a preorder offer reaches its limit and the product becomes sold out.

1. Click **Show more** in the Currency & custom styles section.
2. In the **Out of stock text** field, enter the text you want to display.
3. Click **Save changes**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur5_41ilwn.png)
The default value is **Out of stock**. You can change it to something like "Sold out" or "No longer available" to match your store's tone.

### Add to Cart Text

This field controls the text shown on the button when a product is available for regular purchase — that is, when it is not in a preorder state.

1. Click **Show more** in the Currency & custom styles section.
2. In the **Add to cart text** field, enter the text you want to display.
3. Click **Save changes**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur6_kpq03z.png)
The default value is **Add to cart**. You can change it to something like "Buy now" or "Add to bag" to match your store's branding.

### Continue Button Text

This field controls the text shown on the continue button inside the preorder modal. The preorder modal appears when a customer clicks the preorder button and needs to confirm their action.

1. Click **Show more** in the Currency & custom styles section.
2. In the **Continue button text** field, enter the text you want to display.
3. Click **Save changes**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur7_sq7wst.png)
The default value is **Continue**. You can change it to something like "Confirm preorder" or "Proceed."

### Cancel Button Text

This field controls the text shown on the cancel button inside the preorder modal. Customers click this button to dismiss the modal without placing a preorder.

1. Click **Show more** in the Currency & custom styles section.
2. In the **Cancel button text** field, enter the text you want to display.
3. Click **Save changes**.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur8_1cmzs5f.png)
The default value is **Cancel**. You can change it to something like "Go back" or "Not now."

### Translating Button Text for Other Languages

Each text field in the Currency & custom styles section accepts plain text. If your store serves customers in multiple languages, you can enter translated text directly in these fields for each offer. Since these settings are per-offer, you can create separate offers for different markets and set the button text in the appropriate language for each one.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/cur9_1iubunq.png)
### Troubleshooting

| Problem | Solution |
| ---- |
| Custom CSS is not applying on my storefront | Make sure you clicked Save changes after entering your CSS. Then visit your storefront and do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to clear any cached styles. If the issue persists, check that your CSS selectors are correct. |
| Currency format is not changing | Verify that the currency format field uses the correct variable syntax with double curly braces (for example, {{amount}}). Make sure you clicked Save changes and refreshed your storefront. |
| Button text fields are not visible | Click the Show more link below the CSS field. The currency format, out of stock text, add to cart text, continue button text, and cancel button text fields are hidden by default and only appear after clicking Show more. |

### FAQs

**Q: Are these settings per-offer or global?**
**A**: The CSS and button text fields under Currency & custom styles are configured per-offer. Each preorder offer can have its own currency format, button labels, and custom CSS. This lets you tailor the storefront experience for each campaign independently.

**Q: What is the default currency format?**
**A**: The default currency format depends on your Shopify store's currency settings. STOQ uses `{{amount}} {{currency}}` as the default format, which displays prices like "150.00 CAD."

**Q: Can I use HTML in the button text fields?**
**A**: No. The button text fields accept plain text only. Use the CSS field if you need to style the button's appearance.

**Q: What CSS class should I use to target the preorder button?**
**A**: Use `.restock-rocket-preorder-button` to target the preorder button. You can also inspect the button on your storefront using your browser's developer tools to find additional STOQ-specific classes.

**Q: Can I hide the preorder modal entirely?**
A: No. The continue and cancel button text fields only change the labels on the modal buttons. The modal itself is controlled by your offer's payment and fulfillment settings.