How to customize your preorders using CSS

STOQ lets you add custom CSS to style preorder elements on your storefront. You can change the appearance of the preorder button, badge, disclaimer, countdown timer, progress bar, payment options, modal, and more. All CSS rules are added through the CSS field in each offer's Advanced settings and apply to your live storefront.

How to Add Custom CSS

The CSS field is located inside the Advanced section of each preorder offer.

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 to the Currency & custom styles section.
6. Enter your CSS rules in the CSS field.
7. Click Save changes at the top of the page.
8. Visit your storefront and do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to see the changes.

CSS Selectors Reference

STOQ adds specific CSS classes to preorder elements on your storefront. Use these selectors to target and style individual elements.

Product Page Elements

These selectors target preorder elements that appear on product pages.

Payment Options Elements

These selectors target the payment option elements shown on the product page when the offer has multiple payment choices.

Terms and Acknowledgement Elements

These selectors target the terms checkbox and acknowledgement elements.

Preorder Modal Elements

The preorder modal appears when a customer clicks the preorder button and needs to confirm their order. Modal elements use the .stoq-preorder-modal parent class.

Collection and Other Page Elements

These selectors target preorder elements on collection, search, and other pages.

General Container Elements

These selectors target general wrapper and container elements.

CSS Examples

Here are practical examples you can copy and customize. All examples use !important to ensure styles override your theme's defaults.

Change the Preorder Button Color

.restock-rocket-preorder-button {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
}

Change the Preorder Button on Hover

.restock-rocket-preorder-button:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

Make the Preorder Button Full Width

.restock-rocket-preorder-button {
  width: 100% !important;
  max-width: 100% !important;
}

Add a Border Radius to the Preorder Button

.restock-rocket-preorder-button {
  border-radius: 50px !important;
}

Change the Preorder Badge Style

.restock-rocket-preorder-badge {
  background-color: #ff6600 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

Style the Countdown Timer

.restock-rocket-preorder-countdown-timer {
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

Customize the Progress Bar

.restock-rocket-preorder-progress-bar {
  border-radius: 4px !important;
  overflow: hidden !important;
  height: 8px !important;
}

Style the Preorder Description Text

.restock-rocket-preorder-description {
  font-size: 13px !important;
  color: #666666 !important;
  margin-top: 8px !important;
}

Change the Discount Badge Appearance

.restock-rocket-preorder-discount-badge {
  background-color: #e60000 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
}

Customize the Strikethrough Price

.restock-rocket-price-strike {
  color: #999999 !important;
  text-decoration: line-through !important;
  font-size: 14px !important;
}

.restock-rocket-discounted-price {
  color: #e60000 !important;
  font-weight: bold !important;
}

Style the Payment Options Widget

.restock-rocket-payment-widget {
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
}

.restock-rocket-payment-option {
  padding: 12px !important;
}

.restock-rocket-payment-title {
  font-weight: 600 !important;
  color: #333333 !important;
}

Customize the Preorder Modal

.stoq-preorder-modal #preorderContainer {
  border-radius: 16px !important;
  max-width: 500px !important;
}

.stoq-preorder-modal #preorder-accept-button {
  background-color: #000000 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}

.stoq-preorder-modal #preorder-reject-button {
  border-radius: 8px !important;
  color: #999999 !important;
}

Hide the Preorder Badge

.restock-rocket-preorder-badge {
  display: none !important;
}

Hide the Preorder Description

.restock-rocket-preorder-description {
  display: none !important;
}

Troubleshooting

FAQs

Q: Is the CSS field per-offer or global?

A: The CSS field is per-offer. Each preorder offer can have its own custom CSS. This lets you style different preorder campaigns differently.

Q: Can I use the CSS field to hide elements?

A: Yes. Use display: none !important; on any selector to hide that element. For example, .restock-rocket-preorder-badge { display: none !important; } hides the preorder badge.

Q: How do I find additional CSS selectors on my storefront?

A: Right-click on any preorder element in your browser and select Inspect to open developer tools. This shows the HTML structure and CSS classes applied to each element, including any STOQ-specific classes not listed here.

Q: Do CSS changes affect the admin preview?

A: No. The admin preview inside STOQ may not reflect all custom CSS changes. Always check your live storefront to verify how CSS rules look to your customers.

Q: Can I add animations or transitions?

A: Yes. You can use standard CSS animations and transitions. However, be aware that users with the "prefers-reduced-motion" accessibility setting enabled may not see animations, as STOQ respects this browser preference for the preorder modal.

Updated on: 25/04/2026