Back in Stock: Email Template Setup & Customization

Create professional, branded email notifications that drive conversions and match your store's look and feel. This guide covers everything from basic customization to advanced styling techniques.

Overview

Your email template is the direct communication channel with customers when their requested products come back in stock. A well-designed template can significantly improve click-through rates and conversions by matching your brand aesthetic and providing clear calls-to-action.

What you can customize:

• Complete HTML template design
• Fonts, colors, and styling
• Product image sizes and layouts
• Store address and contact information
• Dynamic content using Liquid variables

Quick Setup - Access Your Email Templates

Step 1: Navigate to Email Templates

1. Go to Customization from your Back in Stock dashboard
2. Select Notification templates
3. Email tab is selected by default (or click Email tab if needed)
4. Select which notification in the campaign sequence (if using campaigns)
5. Change language in the top right if supporting multiple languages

Step 2: Make Basic Edits

• Edit the HTML directly in the template editor
• Use the preview panel on the right to see changes in real-time
• Send test emails to yourself using the "Send test email" button

Step 3: Save Changes

• Click "Save changes" to save and activate your template updates

💡 Pro Tip: Always send yourself a test email before publishing to ensure formatting appears correctly across different email clients.

Customizing Fonts for Better Brand Alignment

Email clients handle fonts differently than web browsers. Here's how to ensure your emails look professional across all platforms:

Web-Safe Fonts (Best Support)

These fonts are installed on most operating systems and display consistently:

Recommended for headings:

• Arial, Arial Black
• Tahoma, Trebuchet MS
• Verdana

Recommended for body text:

• Georgia, Times, Times New Roman
• Courier, Courier New

Good support (use with fallbacks):

• Century Gothic, Geneva
• Lucida, Lucida Sans, Lucida Grande
• Palatino, Palatino Linotype

Font Fallback Strategy

Always specify multiple fonts in order of preference:

font-family: "Futura", "Helvetica", "Arial", "Verdana", sans-serif;

The email client will use the first available font, falling back through the list until it finds one that's installed.

Custom Fonts (Limited Support)

Custom web fonts using @font-face work in some email clients but not others:

• ✅ Supported: Apple Mail, Outlook for Mac
• ❌ Not supported: Gmail, Google Inbox, most web-based clients

Best practice: Use custom fonts only as enhancement, always include web-safe fallbacks.

Adjusting Product Image Sizes

Control how product images appear in your email notifications to match your design preferences:

Step 1: Locate the Image Filter

1. Open your email template editor
2. Use your browser's Find function (Ctrl+F or Cmd+F )
3. Search for product_img_url

Step 2: Change the Size Parameter Find the line that looks like:

{{ product.featured_image | product_img_url: '1024x1024' }}

Step 3: Replace with Your Preferred Size Change the quoted size parameter to one of these options:

Example:

{{ product.featured_image | product_img_url: 'medium' }}

Step 4: Preview and Save

• Check the preview panel on the right to see your changes
• Click "Save changes" to save your template

Customizing Your Store Address

The default template includes your Shopify store address in the email footer. You can customize this for better presentation:

Step 1: Access Footer Content

1. Open your email template editor
2. Scroll down to the Footer content section

Step 2: Edit Address Information Replace the template variables with your preferred address format:

Default variables:

{{ shop.address }}, {{ shop.city }}, {{ shop.province }} {{ shop.zip }}
{{ shop.country }}

Custom example:

<p>Our Store Name<br>
123 Custom Street<br>
Your City, State 12345<br>
United States</p>

Step 3: Save Changes Click "Save changes" to activate your custom address.

Using Dynamic Content with Liquid Variables

Your email templates support Liquid templating language, allowing you to include dynamic product and customer information.

Common use cases:

• Personalized greetings: Hello {{ customer.email }}!
• Product details: {{ product.title }} and {{ variant.price }}
• Store information: {{ shop.name }} and {{ shop.phone }}

For complete technical reference including all available variables, filters, and advanced examples, see: Back in Stock: Email Template Variables & Filters Reference

Advanced Styling Considerations

Email Client Compatibility

Unlike web pages, emails render differently across clients. Keep these limitations in mind:

• CSS support varies: Inline styles work best
• Complex layouts: May break in some clients
• Interactive elements: Generally not supported
• Background images: Limited support

Best Practices for Professional Templates

1. Use tables for layout instead of divs for better compatibility
2. Inline critical CSS for consistent rendering
3. Test across multiple email clients before going live
4. Keep width under 600px for mobile compatibility
5. Use alt text for images in case they don't load

Testing Your Email Template

Send Test Notifications:

1. Use the "Send test email" button in the template editor
2. Check your email across different clients (Gmail, Outlook, Apple Mail)
3. Test on both desktop and mobile devices
4. Verify all links work correctly

Preview Panel:

• Shows real-time changes as you edit
• Displays how dynamic content will appear
• Helps catch formatting issues before testing

Troubleshooting Common Issues

Images Not Displaying

• Check image size: Ensure you're using a supported size parameter
• Verify image exists: Make sure the product has uploaded images
• Test image URL: Use the preview to confirm the image loads

Fonts Not Appearing

• Add fallback fonts: Include web-safe alternatives in your font stack
• Avoid custom fonts: Stick to system fonts for consistency
• Test across clients: What works in one client may not work in others

Layout Breaking

• Use tables for structure: More reliable than CSS layouts in email
• Inline critical styles: Don't rely on external CSS files
• Keep it simple: Complex layouts are more likely to break

Dynamic Content Not Working

• Check variable syntax: Ensure proper Liquid formatting
• Verify data exists: Some variables may be empty for certain products
• Reference technical guide: See the complete variables reference for syntax help

What's Next?

Single Notifications vs. Campaign Sequences

Your customized email templates work for both:

• Single notifications: One-time back-in-stock alerts
• Campaign sequences: Multi-step follow-up messages for higher conversions

Maximize Your Results with Campaigns

Create timed email sequences: See Back in Stock: Campaigns to set up multiple follow-up messages that significantly increase conversion rates. Each campaign step can use different email templates.

Add SMS for 3x conversions: See Back in Stock: SMS Setup to enable SMS notifications alongside your email campaigns.

After Customizing Your Templates:

1. Test with real notifications by creating back-in-stock alerts
2. Monitor performance in your analytics dashboard
3. Set up campaign sequences for automated follow-ups
4. Consider SMS notifications for higher engagement rates

Related guides:

• Back in Stock: Email Template Variables & Filters Reference - Complete technical documentation
• Back in Stock: Campaigns - Create email sequences for higher conversions
• Back in Stock: SMS Setup - Add SMS for 3x higher conversions

Questions? Contact support at backinstock-support@useamp.com for assistance with custom template design.