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

# Customize STOQ email template using CSS

STOQ lets you customize the back-in-stock email template using custom CSS to go beyond the built-in color and typography settings. While the Colors & styles panel covers common design changes like text color, background color, and font size, custom CSS gives you full control over individual email elements — from headers and buttons to product images and footer links.
Your CSS is injected directly into the email's `<style>` tag, so changes appear in the live preview instantly and carry through to the emails your customers receive.

STOQ provides a built-in **Selectors** reference that lists every targetable class in the email template. You can click any selector to add it to the CSS field as a ready-to-use rule block.

### Before You Begin

Make sure the following are in place before you add custom CSS:

* **STOQ is your email provider.** Custom CSS is only available when the email provider is set to **STOQ** (the default). If you use Klaviyo or Shopify Flow as your email provider, the CSS field is disabled because those providers use their own email templates.
* **A paid STOQ plan.** Email notifications require a paid plan (Lite, Pro, or Unlimited).
* **Basic CSS knowledge.** You should be comfortable writing CSS rules. Each rule uses a selector (e.g., `.header`) and one or more property-value pairs (e.g., `font-weight: bold;`).

| Tip: If you are new to CSS, MDN Web Docs is a good starting point to learn the basics.

### How to Add Custom CSS to the Email Template

Follow these steps to open the CSS editor and start customizing your back-in-stock email.

##### Step 1: Open the Colors & Styles Panel

1. In the STOQ app, go to **Back in stock alerts**.
2. Click **Notifications** at the top of the page.
3. Click **Customize email**.
4. In the sidebar, click **Colors & styles**.

The panel shows three sections: **Colors**, **Typography**, and **Custom CSS**.

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

##### Step 2: Open the CSS Editor

1. Scroll down to the **Custom CSS** section.
2. You will see a multiline text field labeled **CSS** with a **Selectors** link in the top-right corner of the field.
3. Type your CSS rules directly into this field, or click **Selectors** to see the available class selectors (covered in the next section).

The placeholder text shows an example: `.header { font-weight: bold; }`

##### Step 3: Use the Selectors Reference

1. Click the **Selectors** link above the CSS field to open the **Email template class selectors** modal.
2. The modal lists every CSS selector available in the back-in-stock email template.
3. Click **Add to field** next to any selector to insert it into the CSS field as an empty rule block, ready for you to add properties.
4. Close the modal to return to the CSS editor.

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

##### Step 4: Write Your CSS Rules

Add your CSS properties inside the selector blocks. For example:

```css
  td .header {
     font-size: 28px !important;
     text-transform: uppercase !important;
     letter-spacing: 2px !important;
   }
```

##### Step 5: Save Your Changes

1. Click **Save** at the top of the page.
2. Your custom CSS is now applied to all back-in-stock emails sent through STOQ.

| Tip: After saving, send a test email to yourself to confirm the CSS renders correctly across different email clients. You can do this from the Provider section in the email settings.

### Available CSS Selectors

The following table lists all CSS selectors available for the back-in-stock email template. Each selector targets a specific element in the email.

| Selector | What It Targets |
| ---- |
| `body .email-container` | The outer div containing all email elements (max-width 600px) |
| `td.logo-container` | The table cell containing the store logo |
| `td.logo-container .logo` | The logo image itself |
| `td .header` | The email header/title text |
| `td .description p` | The email description paragraphs |
| `td.product-container .product-image` | The product image in the email |
| `td.button-container` | The table cell containing the call-to-action button |
| `td.button-container .buy-button` | The "Buy now" / call-to-action button link |
| `td .footer a` | The footer text links |
| `td .unsubscribe a` | The unsubscribe link text |

|| Note: You can click Selectors in the CSS field to see this list inside the app, with an Add to field button next to each selector for quick insertion.

## CSS Examples

Here are practical examples you can copy and adapt for your store.

##### Change the Header Style

````css
td .header {
  font-size: 24px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

##### Style the Buy Button

```css
td.button-container .buy-button {
  font-size: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 15px 40px !important;
}
````

##### Resize or Round the Product Image

```css
td.product-container .product-image {
  max-width: 400px !important;
  border-radius: 8px !important;
}
```

##### Adjust the Logo Size

```css
td.logo-container .logo {
  max-width: 120px !important;
}
```

##### Style the Description Text

```css
td .description p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #666666 !important;
}
```

##### Change the Footer and Unsubscribe Link

```css
td .footer a {
  font-size: 12px !important;
  color: #999999 !important;
}

td .unsubscribe a {
  font-size: 11px !important;
  color: #bbbbbb !important;
  text-decoration: underline !important;
}
```

##### Add a Border to the Email Container

```css
body .email-container {
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
```

### Advanced Tips

* **Always add `!important` to your CSS properties.** The email template applies inline styles to most elements. Inline styles have higher specificity than `<style>` tag rules, so your custom CSS needs `!important` to override them. All examples in this article include `!important` for this reason.
* **Test across email clients.** Email CSS support varies between clients (Gmail, Outlook, Apple Mail, Yahoo). Send test emails to multiple accounts to verify your styles render correctly. Some properties like `border-radius` may not work in older Outlook versions.
* **Stick to email-safe CSS properties.** Properties like `box-shadow`, `transform`, `animation`, and `flexbox` are not supported in most email clients. Stick to basics: `color`, `font-size`, `padding`, `margin`, `border`, `background-color`, `text-align`, `text-transform`, `letter-spacing`, `line-height`.
* **Combine with built-in settings.** Use the built-in **Colors** (Text, Section, Background) and **Typography** (Font, Header size, Description size) settings for broad changes, and reserve custom CSS for fine-tuning specific elements.
* **Keep your CSS organized.** Add comments between rule blocks to make your CSS easier to maintain:
```css
 /* Header styles */
  td .header {
    text-transform: uppercase !important;
  }

  /* Button styles */
  td.button-container .buy-button {
    padding: 18px 35px !important;
  }
```

### Known Limitations

* **STOQ email provider only.** Custom CSS is disabled when you use Klaviyo or Shopify Flow as your email provider. Those providers use their own email templates and do not support STOQ's CSS injection.
* **Email client CSS support varies.** Not all CSS properties work in every email client. Outlook for Windows has limited CSS support (no `border-radius`, `box-shadow`, or advanced selectors). Gmail strips some styles. Always test across multiple clients.
* **Inline styles take precedence.** The email template applies inline styles to most elements. You must add `!important` to every CSS property to ensure your custom styles override the inline styles.
* **No custom class names.** You can only target the existing classes listed in the Selectors modal. You cannot add new HTML elements or class names to the email template.
* **CSS applies to all back-in-stock emails.** Custom CSS is saved per template and applies to every back-in-stock notification sent through STOQ. You cannot apply different CSS to different products or variants.
* **No undo history.** The CSS field does not keep a history of changes. If you overwrite your CSS, the previous version is lost. Consider keeping a backup of your CSS in a separate text file.
* **Paid plan required.** Email notifications (and therefore custom CSS) require a paid STOQ plan.

### Troubleshooting

| Symptom | Cause | Fix |
| ---- |
| The CSS field is grayed out / disabled | Your email provider is set to Klaviyo or Shopify Flow instead of STOQ | Go to **Provider** in the email settings and switch to **STOQ** as the email provider |
| CSS changes do not appear in the preview | Syntax error in your CSS (e.g., missing semicolon or closing brace) | Check your CSS for typos. Make sure every rule block has matching `{` and `}` braces |
| CSS works in preview but not in the actual email | The email client does not support the CSS property you used | Test with email-safe properties. Add `!important` if inline styles are overriding your rules |
| CSS does not override a specific style | Inline styles have higher specificity than `<style>` tag rules | Add `!important` to your CSS property (e.g., `color: #333 !important;`) |
| Selectors modal is empty | This should not happen — contact support if the modal shows no selectors | Refresh the page. If the issue persists, clear your browser cache |
| CSS was lost after saving | The field may have been cleared accidentally before saving | There is no undo. Keep a backup of your CSS in a separate text file for safety |
| Border radius does not work in Outlook | Outlook for Windows does not support the CSS `border-radius` property | This is an Outlook limitation. The border radius will still appear in other email clients |

### FAQs

**Q: Can I use custom CSS if I send emails through Klaviyo?**
**A:** No. The custom CSS field is only available when STOQ is set as your email provider. Klaviyo uses its own email template editor, so STOQ's CSS settings do not apply to Klaviyo-sent emails. You would need to customize the email design directly in Klaviyo.

**Q: Will my CSS work in all email clients?**
**A:** Not necessarily. Email clients have varying levels of CSS support. Gmail, Apple Mail, and Yahoo support most standard CSS properties. Outlook for Windows has the most limited support — it does not handle `border-radius`, `box-shadow`, or CSS grid/flexbox. Always send test emails to verify rendering across clients.

**Q: How do I find the right selector for an element?**
**A:** Click the **Selectors** link above the CSS field. The modal lists every targetable selector in the email template, along with a description of what it targets. Click **Add to field** to insert a selector directly into the CSS editor as an empty rule block.

**Q: Can I add custom HTML to the email template?**
**A:** No. The custom CSS field only accepts CSS rules. You cannot add HTML, JavaScript, or modify the email template structure. If you need to change the email content (header, description, footer, button text), use the **Content** section in the email settings.

**Q: Does the CSS apply to preorder confirmation emails too?**
**A**: Each email template has its own separate CSS field. The CSS you add in the back-in-stock email settings applies only to back-in-stock notification emails. Preorder confirmation emails have their own **Colors & styles** panel with a separate custom CSS field and additional selectors specific to preorder content.

**Q: What happens if my CSS has a syntax error?**
**A:** The browser will ignore any malformed rule and apply the remaining valid rules. The email preview may look unexpected if a rule is broken. Check for missing semicolons, unclosed braces, or misspelled property names.

**Q: Can I use Google Fonts or web fonts in the email?**
**A:** The email template uses the font selected in the **Typography** section (web-safe font stacks like Helvetica Neue, Georgia, etc.). Custom web fonts loaded via `@import` or `@font-face` are not reliably supported across email clients. Stick to the built-in font options for consistent rendering.

**Q: Is there a character limit for the CSS field?**
**A:** The CSS field is stored as a text column in the database, so there is no practical character limit for typical CSS rules. However, keeping your CSS concise and well-organized is recommended for maintainability.