Articles on: Alerts

How to Use Custom HTML and CSS for STOQ Email Back-in-Stock Templates

STOQ includes a standard email template editor with visual controls for colors, fonts, and content. If you need more control, you can replace the standard template with your own custom HTML and CSS. This lets you design fully branded back-in-stock emails using any HTML layout, inline CSS, and Liquid variables to insert product and customer details dynamically.


Why Use a Custom HTML Template


There are several reasons to switch from the standard template to custom HTML.


  • Full design control. Build any email layout you want — multi-column, custom typography, branded headers, or unique button styles — without being limited to the standard editor fields.
  • Brand consistency. Match the exact look and feel of your other marketing emails by reusing your existing HTML email templates.
  • Advanced personalization. Use Liquid variables and conditional logic to create dynamic content that goes beyond what the standard fields support.
  • Custom product displays. Design how the product image, price, and variant details are presented, including custom checkout buttons and product page links.


Prerequisites


Before using a custom HTML template, confirm the following.


  • The STOQ app is installed and active on your Shopify store.
  • You are on the Standard plan or higher. Custom HTML templates are not available on the Free or Lite plans.
  • Your email provider is set to STOQ. Custom HTML templates are not available when using Klaviyo or Shopify Flow as the email provider.
  • You have an HTML email template ready to paste. You can build one using any email template builder or write it from scratch.


How to Enable a Custom HTML Template


Follow these steps to replace the standard email template with your own HTML.


  1. Open the STOQ app from your Shopify admin.
  2. Click Back in stock alerts in the left menu bar.
  3. Click the Notifications tab.
  4. Select the notification you want to customize (e.g., the primary notification or a reminder).
  5. Click the Customize email button to open the email template editor.
  6. In the left panel, click the Content section.
  7. Click the Custom HTML tab at the top of the Content panel.
  8. Check the box labeled Use HTML template.
  9. Paste your HTML and CSS code into the Email template text area below the checkbox.
  10. Click the Save button at the top of the page.



Tip: Click the Variables link above the text area to open a modal listing all available Liquid variables. You can click Add to field next to any variable to insert it into your template.


Available Liquid Variables


STOQ uses the Liquid templating language to inject dynamic content into your custom HTML. Use double curly braces around each variable name in your HTML code.


Back-in-Stock Variables


Variable

Description

{{shop.domain}}

Your store's domain name (e.g., mystore.com)

{{shop.name}}

Your store's name

{{shop.logo_url}}

URL of your store's logo image

{{customer.name}}

Customer's full name

{{customer.email}}

Customer's email address

{{product.title}}

Product title

{{product.variant_title}}

Variant title (e.g., "Red / Large")

{{product.title_incl_variant}}

Product title including variant name

{{product.vendor}}

Product vendor or brand

{{product.price}}

Product price

{{product.currency}}

Currency code (e.g., USD, EUR)

{{product.product_handle}}

Product handle used in URLs

{{product.image_url}}

URL of the product image

{{product.checkout_url}}

Direct checkout link for the product

{{product.product_page_url}}

URL of the product page in your store

{{product.unsubscribe_url}}

Unsubscribe link for the customer


Important: Always include {{product.unsubscribe_url}} in your template. This provides customers with a way to opt out of future notifications and is required for compliance.


Example Usage in HTML


Here is a minimal example showing how to use Liquid variables in a custom HTML template:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
    .button { background-color: #000; color: #fff; padding: 12px 24px;
              text-decoration: none; display: inline-block; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="container">
    <img src="{{shop.logo_url}}" alt="{{shop.name}}" width="120" />
    <h1>Good news, {{customer.name}}!</h1>
    <p>{{product.title_incl_variant}} is back in stock.</p>
    <img src="{{product.image_url}}" alt="{{product.title}}" width="300" />
    <p>Price: {{product.price}} {{product.currency}}</p>
    <a href="{{product.checkout_url}}" class="button">Buy Now</a>
    <p><a href="{{product.unsubscribe_url}}">Unsubscribe</a></p>
  </div>
</body>
</html>


Tip: Most email clients have limited CSS support. Use inline styles for maximum compatibility. Avoid external stylesheets, JavaScript, and advanced CSS features like flexbox or grid.


How to Test Your Custom HTML Template


You cannot preview custom HTML templates directly in the STOQ editor. The preview pane displays a message saying "No preview available for custom HTML templates." To verify your email looks correct, send a test email.


  1. After saving your custom HTML template, look for the Send test email button below the preview area.
  2. Enter your email address in the modal that appears.
  3. Click Send.
  4. Check your inbox to verify the email renders correctly with your HTML, CSS, and Liquid variables replaced with sample data.




Warning: Always send a test email after making changes to your custom HTML. Since there is no in-app preview, the test email is the only way to verify the final output.


Customizing Reminder Notifications


Each notification in your back-in-stock alert sequence has its own independent email template. If you want to use custom HTML for reminder notifications as well, you need to enable it separately for each one.


  1. In the Notifications tab, select the reminder notification you want to customize.
  2. Click Customize email and follow the same steps to enable Custom HTML and paste your template.


You can mix and match — for example, use the standard template for the first notification and custom HTML for the reminder, or vice versa.


Translating Custom HTML Templates


If your store serves customers in multiple languages, you can translate your custom HTML template.


  1. In the email template editor's Content section, click the Languages link at the top right of the panel.
  2. This opens the translation editor where you can provide a translated version of your custom HTML template for each supported language.


The translated template can use the same Liquid variables. STOQ will automatically send the correct language version based on the customer's locale.


Switching Back to the Standard Template


If you want to stop using custom HTML and return to the standard visual editor:


  1. Open the email template editor for the notification.
  2. Click the Content section, then click the Custom HTML tab.
  3. Uncheck the Use HTML template checkbox.
  4. Click Save.


Your standard template settings (heading, description, footer, button text, colors) are preserved and will be used again immediately.


Known Limitations


  • Custom HTML requires the Standard plan or higher. The checkbox and text area are disabled on the Free and Lite plans.
  • Custom HTML is only available when the email provider is set to STOQ. If you use Klaviyo or Shopify Flow, customize your email templates in those platforms instead.
  • There is no in-app preview for custom HTML templates. You must send a test email to see the rendered output.
  • CSS support varies across email clients. Use inline styles and test across multiple email clients (Gmail, Outlook, Apple Mail, etc.) for consistent rendering.
  • The standard template's color, font, and style settings do not apply when custom HTML is enabled. All styling must be included in your HTML code.
  • The standard template's social links section does not apply to custom HTML. Add social links directly in your HTML if needed.
  • Custom HTML templates are set per notification in the sequence. Enabling it for one notification does not affect others.
  • Liquid variables use strict mode. If you use a variable name that does not exist, it will render as blank rather than showing the variable name.


Troubleshooting


Symptom

Likely Cause

Fix

"Use HTML template" checkbox is greyed out

You are not on the Standard plan, or the email provider is not set to STOQ

Upgrade to the Standard plan and ensure the email provider is set to STOQ in the email settings

Liquid variables show as blank in test email

Variable name is misspelled or does not exist

Check the variable name against the table above. Variable names are case-sensitive

Email looks different in Gmail vs Outlook

CSS rendering differences between email clients

Use inline styles instead of <style> blocks. Test across multiple email clients

Test email not received

Test email was sent to an invalid address, or the email is in your spam folder

Check the email address, look in your spam/junk folder, and try again

Custom HTML not saving

The text area may be empty or the checkbox is not checked

Ensure "Use HTML template" is checked and the template field contains valid HTML, then click Save

Standard template still being sent

Custom HTML is not enabled for this specific notification

Open the correct notification's template editor and verify the "Use HTML template" checkbox is checked


FAQs


Q : Can I use external CSS stylesheets in my custom HTML?

A : No. Most email clients strip external stylesheets and <link> tags. Use inline styles or a <style> block in the <head> of your HTML. For maximum compatibility across email clients, inline styles are recommended.


Q : Can I use JavaScript in my custom HTML template?

A : No. Email clients do not execute JavaScript. Any <script> tags in your template will be ignored or stripped. Use only HTML and CSS for your template.


Q : Do I need to include an unsubscribe link?

A : Yes. You should always include {{product.unsubscribe_url}} as a clickable link in your template. This gives customers a way to opt out of future notifications and is required for email compliance.


Q : Can I use custom HTML for preorder email templates?

A : The Custom HTML tab is available only for back-in-stock alert templates. Preorder email templates use the standard visual editor. If you need full customization for preorder emails, consider using Klaviyo or Shopify Flow as your email provider.


Q : Will my standard template settings be lost if I enable custom HTML?

A : No. Your standard template settings (subject, heading, description, footer, button text, colors) are preserved. If you disable custom HTML later, the standard template will be used again with all your previous settings intact.


Q : Can I use different templates for the first alert and reminder alerts?

A : Yes. Each notification in the sequence has its own independent template. You can enable custom HTML for one notification while using the standard template for others.


Q : How do I know which Liquid variables are available?

A : Click the Variables link above the Email template text area in the Custom HTML tab. This opens a modal listing all available variables with descriptions. You can also refer to the variable table in this article.


Q : Can I translate my custom HTML template into multiple languages?

A : Yes. Click the Languages link at the top of the Content section to open the translation editor. You can provide a translated version of your custom HTML template for each language your store supports. STOQ sends the correct version based on the customer's locale.

Updated on: 16/04/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!