> ## 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 preorder elements 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 on **More Settings** under **Advanced section** in the sidebar.
5. From the options that appear, choose **Advanced**
6. Scroll to the **Currency & custom styles** section.
7. Enter your CSS rules in the **CSS** field.
8. Click **Save changes** at the top of the page.
9. Visit your storefront and do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to see the changes.

| **Tip:** The in-app preview may not reflect all custom CSS. Always check your live storefront after saving.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-2026-04-25t11504653_n056ix.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-2026-04-25t11511895_1dprkx2.png)
![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image_106eowd.png)[](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-2026-04-25t11524527\_ozb59f.png)
### 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.

| Selector | Description |
| ---- |
| `.restock-rocket-preorder-button` | The main preorder button that replaces the "Add to cart" button. |
| `.restock-rocket-preorder-description` | The preorder description text shown below the button (shipping timeline, payment info). |
| `.restock-rocket-preorder-badge` | The preorder badge shown near the product title. |
| `.restock-rocket-preorder-countdown-timer` | The countdown timer element for scheduled offers. |
| `.restock-rocket-preorder-progress-bar` | The progress bar showing preorder limit usage. |
| `.restock-rocket-preorder-discount-badge` | The discount badge shown when a preorder discount is applied. |
| `.restock-rocket-discounted-price` | The discounted price element when a preorder discount is active. |
| `.restock-rocket-price-strike` | The original price with a strikethrough when a discount is applied. |
| `.preorder-detail-text` | The preorder shipping text in the disclaimer box |
| `.preorder-description-text` | The preorder disclaimer text added in your preorder offer |

##### Payment Options Elements

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

| Selector | Description |
| ---- |
| `.restock-rocket-payment-widget` | The full payment options widget container. |
| `.restock-rocket-payment-option` | An individual payment option row. |
| `.restock-rocket-payment-input-container` | The container holding the radio input and label for a payment option. |
| `.restock-rocket-payment-input` | The radio button input for selecting a payment option. |
| `.restock-rocket-payment-title` | The title text of a payment option. |
| `.restock-rocket-payment-description` | The container for the payment option description. |
| `.restock-rocket-payment-description-text` | The description text inside a payment option. |

##### Terms and Acknowledgement Elements

These selectors target the terms checkbox and acknowledgement elements.

| Selector | Description |
| ---- |
| `.restock-rocket-acknowledgement-checkbox` | The container for the terms acknowledgement checkbox. |
| `.restock-rocket-acknowledge-checkbox-input` | The checkbox input element. |
| `.restock-rocket-acknowledge-checkbox-label` | The label text next to the checkbox. |

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

| Selector | Description |
| ---- |
| `.stoq-preorder-modal` | The root container for the entire preorder modal. |
| `.stoq-preorder-modal .restock-rocket-wrapper` | The modal backdrop overlay. |
| `.stoq-preorder-modal #preorderContainer` | The modal dialog box. |
| `.stoq-preorder-modal #preorder-header-text` | The modal header title text. |
| `.stoq-preorder-modal #preorder-product-info` | The product information section inside the modal. |
| `.stoq-preorder-modal #preorder-product-name` | The product name inside the modal. |
| `.stoq-preorder-modal #preorder-variant-name` | The variant name inside the modal. |
| `.stoq-preorder-modal #preorder-disclaimer-text` | The disclaimer text inside the modal. |
| `.stoq-preorder-modal #preorder-accept-button` | The "Continue" (accept) button in the modal. |
| `.stoq-preorder-modal #preorder-reject-button` | The "Cancel" (reject) button in the modal. |
| `.stoq-preorder-modal #preorder-buttons` | The container holding the modal action buttons. |

##### Collection and Other Page Elements

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

| Selector | Description |
| ---- |
| `.restock-rocket-button-collection` | The preorder button on collection pages. |
| `.restock-rocket-collection-button-container` | The container for the preorder button on collection pages. |
| `.restock-rocket-quick-add-button` | The quick-add preorder button. |

##### General Container Elements

These selectors target general wrapper and container elements.

| Selector | Description |
| ---- |
| `.restock-rocket-wrapper` | The general wrapper around STOQ-injected elements. |
| `.restock-rocket-wrapper-inline` | The inline variant of the wrapper. |
| `.restock-rocket-form-input` | Hidden form input elements added by STOQ. |

### 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

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

##### Change the Preorder Button on Hover

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

##### Make the Preorder Button Full Width

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

##### Add a Border Radius to the Preorder Button

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

##### Change the Preorder Badge Style

```css
.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

```css
.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

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

##### Style the Preorder Description Text

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

##### Change the Discount Badge Appearance

```css
.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

```css
.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

```css
.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

```css
.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

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

##### Hide the Preorder Description

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

### Troubleshooting

| Problem | Solution |
| ---- |
| My CSS changes are not showing on the storefront | Make sure you clicked **Save changes** after entering your CSS. Then visit your storefront and do a hard refresh (Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac) to bypass the browser cache. If the changes still do not appear, try adding `!important` to your CSS declarations. |
| My CSS works on the product page but not on collection pages | Collection pages use different selectors. Use `.restock-rocket-button-collection` to target preorder buttons on collection pages instead of `.restock-rocket-preorder-button`. |
| My theme overrides my custom styles | Shopify themes may use more specific CSS selectors that override your styles. Add `!important` to force your styles to take priority. You can also increase specificity by chaining selectors, for example: `body .restock-rocket-preorder-button { ... }`. |
| The preorder modal styles are not applying | Modal elements require the `.stoq-preorder-modal` parent class prefix. For example, use `.stoq-preorder-modal #preorder-accept-button` instead of just `#preorder-accept-button`. |

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