Articles on: Preorders

How to Customize Currency and Button Text in 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 Advanced in the sidebar.
  5. 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.


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:


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


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, $, €).
  1. Click Save changes.


Examples


Format

Output

{{amount}} {{currency}}

150.00 CAD

{{currency_symbol}}{{amount}}

$150.00

{{currency_symbol}}{{amount}} {{currency}}

$150.00 CAD


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.


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.


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.


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.


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.


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.


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.


Updated on: 25/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!