Wishlist Email Templates

GP ‑ Wishlist & Upsell Suite uses customizable email templates for all notifications. This guide covers how to design effective emails and integrate your social media presence.

Email Template System

Template Editor

Each email notification type has its own template editor:

• Wishlist Reminders
• Back-in-Stock Notifications
• Price Drop Alerts
• Abandoned Wishlist Recovery

The template editor provides:

• Rich text editing (WYSIWYG)
• HTML support
• Variable placeholders
• Live preview

Template Variables

Variables are placeholders that get replaced with real data when emails are sent.

Common Variables

Wishlist Reminder Variables

Back-in-Stock Variables

Price Drop Variables

Abandoned Wishlist Variables

Designing Email Templates

Basic Structure

<h2>Hi {{customer_name}},</h2>

<p>Your message here.</p>

<!-- Product content -->
{{products_list}}

<!-- Call to action -->
<p>
  <a href="{{wishlist_url}}" style="
    background-color: #000;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    display: inline-block;
  ">
    View Your Wishlist
  </a>
</p>

<p>Thanks for shopping with us!</p>
<p>{{store_name}}</p>

Styling Best Practices

Use Inline Styles

Email clients don’t support external CSS well:

<!-- Good - inline styles -->
<p style="color: #333; font-size: 16px; line-height: 1.5;">
  Your text here.
</p>

<!-- Avoid - class-based styles -->
<p class="body-text">
  Your text here.
</p>

Use Tables for Layout

<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding: 20px;">
      <!-- Content here -->
    </td>
  </tr>
</table>

Image Best Practices

<img
  src="{{product_image}}"
  alt="Product image"
  style="max-width: 100%; height: auto;"
  width="300"
/>

Social Links Configuration

Adding Social Links

Each email notification panel includes social link fields:

Where Social Links Appear

Social links are displayed in the email footer, providing additional touchpoints for customers.

Setting Up Social Links

1. Open any email notification panel
2. Scroll to the Social Links section
3. Enter your profile URLs
4. Save settings

Note: Social links are configured per email type. Set them once in each panel, or use consistent URLs across all.

Email Template Examples

Wishlist Reminder

<div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">
  <h2 style="color: #333;">Hi {{customer_name}},</h2>

  <p style="color: #666; font-size: 16px; line-height: 1.6;">
    You have items waiting in your wishlist at {{store_name}}!
    Don't let them slip away.
  </p>

  {{products_list}}

  <p style="text-align: center; margin: 30px 0;">
    <a href="{{wishlist_url}}" style="
      background-color: #2563eb;
      color: white;
      padding: 14px 28px;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
    ">
      View My Wishlist
    </a>
  </p>

  <p style="color: #999; font-size: 14px;">
    Happy shopping!<br>
    The {{store_name}} Team
  </p>
</div>

Price Drop Alert

<div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">
  <h2 style="color: #333;">Great News, {{customer_name}}!</h2>

  <p style="color: #666; font-size: 16px;">
    An item on your wishlist just dropped in price!
  </p>

  <div style="text-align: center; padding: 20px; background: #f9f9f9; border-radius: 8px;">
    {{product_image}}

    <h3 style="margin: 16px 0 8px;">{{product_title}}</h3>

    <p style="margin: 0;">
      <span style="text-decoration: line-through; color: #999;">{{old_price}}</span>
      <span style="color: #e53e3e; font-size: 24px; font-weight: bold; margin-left: 8px;">
        {{new_price}}
      </span>
    </p>

    <p style="color: #38a169; font-weight: bold; margin: 8px 0;">
      You save {{savings_amount}} ({{savings_percentage}} off!)
    </p>
  </div>

  <p style="text-align: center; margin: 30px 0;">
    <a href="{{product_url}}" style="
      background-color: #e53e3e;
      color: white;
      padding: 14px 28px;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
    ">
      Get This Deal
    </a>
  </p>
</div>

Abandoned Wishlist with Incentive

<div style="max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;">
  <h2 style="color: #333;">We Miss You, {{customer_name}}!</h2>

  <p style="color: #666; font-size: 16px; line-height: 1.6;">
    It's been {{days_since_last_visit}} days since your last visit.
    You have {{item_count}} {{item_count_text}} waiting in your wishlist!
  </p>

  {{products_list}}

  {{#if has_incentive}}
  <div style="
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    margin: 24px 0;
  ">
    <h3 style="margin: 0 0 12px; color: white;">Special Offer Just for You!</h3>
    <p style="margin: 0 0 16px; font-size: 18px;">{{incentive_text}}</p>
    <p style="
      background: white;
      color: #764ba2;
      display: inline-block;
      padding: 12px 24px;
      border-radius: 4px;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 2px;
      margin: 0;
    ">
      {{discount_code}}
    </p>
    <p style="margin: 16px 0 0; font-size: 12px; opacity: 0.8;">
      {{expiry_text}}
    </p>
  </div>
  {{/if}}

  <p style="text-align: center;">
    <a href="{{wishlist_url}}" style="
      background-color: #2563eb;
      color: white;
      padding: 14px 28px;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
    ">
      Return to My Wishlist
    </a>
  </p>
</div>

Testing Your Emails

Send Test Email

1. Configure your email template
2. Click Send Test Email
3. Enter your email address
4. Check your inbox
5. Review on desktop and mobile

What to Check

• Subject line displays correctly
• Variables are replaced with mock data
• Images load properly
• Links work correctly
• Styling appears as expected
• Mobile rendering is good
• Social links display in footer

Full Preview Mode

Some panels offer a Full Preview button:

1. Click Full Preview
2. Split-screen view opens
3. Left: Edit template
4. Right: Live preview with mock data
5. Make adjustments in real-time

SMTP Configuration

Before emails can send, configure SMTP:

1. Go to Wishlist > Email Notifications
2. Click SMTP Settings
3. Enter your email provider credentials:
   • SMTP Host
   • Port
   • Username
   • Password
   • From Email
   • From Name
4. Save and test

Popular SMTP Providers

Best Practices

Subject Lines

Email Content

1. Be concise — Get to the point quickly
2. Use visuals — Product images drive action
3. Single CTA — One clear action per email
4. Mobile-first — Design for small screens
5. Test links — Ensure all URLs work

Social Links

1. Be consistent — Same links across all emails
2. Use real URLs — Don’t use placeholders
3. Include email — Support contact option
4. Keep updated — Update if profiles change

Troubleshooting

Emails Not Sending

1. Verify SMTP settings
2. Check email provider limits
3. Confirm feature is enabled
4. Review email logs if available

Variables Not Replacing

• Check spelling matches exactly
• Include double curly braces {{}}
• Use preview to verify

Images Not Loading

• Use absolute URLs for images
• Ensure images are publicly accessible
• Check image hosting isn’t blocked

Styling Issues

• Use inline CSS only
• Test in multiple email clients
• Avoid complex layouts

What’s Next?

Complete your GP ‑ Wishlist & Upsell Suite mastery:

• Understanding Your Analytics — Track email and feature performance
• Custom CSS Styling — Widget customization
• Getting Started — Review the basics

Well-designed email templates and social integration build lasting customer relationships — make every email count.