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

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.

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.

Step 4: Write Your CSS Rules

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

   td .header {

     font-size: 28px !important;

     text-transform: uppercase !important;

     letter-spacing: 2px !important;

   }

   ```

2. The live email preview on the right updates instantly as you type, so you can see your changes in real time.

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.

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.

CSS Examples

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

Change the Header Style

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

Style the Buy Button

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

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

Adjust the Logo Size

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

Style the Description Text

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

Change the Footer and Unsubscribe Link

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

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

Advanced Tips

Use these tips to get the most out of custom CSS for your email template:

• Use the live preview. Your CSS changes appear instantly in the email preview on the right side of the editor. Use this to iterate quickly before saving.
• 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:

  /* 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 media queries. The custom CSS field does not support @media queries for responsive email design. The email template has built-in responsive styles that handle mobile layouts.
• 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

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.

Updated on: 10/04/2026