Adjusting picture size
When it comes to customizing the size of your product images in review request emails, you have the flexibility to make them fit your preferences.
By default, our variable
{{ product_img }}displays an image with full width, which might be too large in many cases. To set up a smaller image, you can directly modify the HTML code.
Example for absolute height and linking the image (open in new tab)
Here's an example of HTML code to set an absolute height for the image and make it a clickable link that opens in a new tab:
<p style="width: 100%; text-align: center;">
<a href="{{ product_href }}" target="_blank">
<img src="{{ product_image_url }}" height="200px;" />
</a>
</p>
Example for relative width and linking the image (open in new tab)
Alternatively, you can use relative width to ensure your images adapt well to various screen sizes. Here's an example of HTML code for this:
<p style="width: 100%; text-align: center;">
<a href="{{ product_href }}" target="_blank">
<img src="{{ product_image_url }}" width="50%;" />
</a>
</p>
We recommend using relative width as it provides better responsiveness across different devices and screen sizes.
Additional styling
For additional styling options, you can further enhance your image display. Here's an example of HTML code that centers the image and adds some styling:
<p style="width: 100%; text-align: center;">
<a href="{{ product_href }}" target="_blank">
<img src="{{ product_image_url }}" width="50%" style="margin:auto; display:block;" />
</a>
</p>
Using images instead of buttons in multi-review email template
From Fitzrovia & Co.:
Use the following HTML code (and customize it for your text) to display images instead of buttons to your buyers. When they click on a product image, it will take them to the Review Widget to leave a review.
Additionally, please ensure that you deactivate the "Advanced Customization" setting in the Multi-Review Email Template so that it states: "Product Loop: We will not use the loop offered by Judge.me. You will write your own loop."
<!-- Start of Preheader Styling -->
<style>
.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>
<!-- End of Preheader Styling -->
<!-- Start of Main Email Content -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<!-- Preheader Text -->
<span class="preheader" style="color:#f3f3f3; display:none !important;">
Hi {{ buyer_first_name }}, how did we do? Leave a Review and you could win a $100 Fitzrovia & Co Gift Card!
</span>
<!-- Email Content Container -->
<table border="0" cellpadding="0" cellspacing="0" style="max-width:500px;">
<tbody>
<tr>
<td style="color:#666666;">
<!-- Email Header -->
<div style="text-align:center; color:#666666;">
<strong>Leave a Review to Win</strong>
</div>
<!-- Email Message -->
<span>
<br>Hi {{ buyer_first_name }}, thanks so much for shopping with us recently. How did we do? Leave a quick review and you could
<strong>win a $100 Fitzrovia & Co Gift Card!</strong>
</span>
<br><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Main Email Content -->
<!-- Start of Review Button -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="color:#666666;">
<br>
<table border="0" cellpadding="0" cellspacing="0" width="260">
<tbody>
<tr>
<td align="center" bgcolor="#777777" style="border-radius: 3px;">
<!-- Review Button Link -->
<a href="{{ shop_review_href }}" target="_blank" style="font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: #ffffff !important; text-decoration: none; text-decoration: none; border-radius: 3px; padding: 8px 40px 6px 40px; border: 1px solid #777777; display: inline-block;">
<span style="color:#ffffff;">REVIEW FITZROVIA & CO.</span>
</a>
</td>
</tr>
</tbody>
</table>
<br><br>
<!-- Loop through Products -->
{% assign product-count = 0 %}
{% for product in products %}
{% assign product-count = forloop.length %}
{% assign products-title = "Prefer to review one of your purchases? Great! Click on it below..." %}
{% if forloop.length == 1 %}
{% assign image-size = 250 %}
{% assign products-title = "Prefer to review your purchase? Great! Click on it below..." %}
{% elsif forloop.length >= 2 and forloop.length <= 10 %}
{% assign image-size = 50 + (forloop.length - 2) * 35 %}
{% endif %}
{% if forloop.index == 1 %}
<!-- Loop Header -->
<span>
<strong style="color:#666666;">{{ products-title }}</strong>
</span>
<br><br>
{% endif %}
<!-- Product Image Link -->
{% if product['image_src'] != blank %}
<a href="{{ product['url'] }}" title="Review the {{ product['title'] }}" target="_blank">
<img width="{{image-size}}" src="{{ product['image_src'] }}" style="margin:auto; width:{{image-size}}px;">
</a>
{% endif %}
{% if forloop.index == forloop.length %}
<br><br>
{% endif %}
{% endfor %}
<!-- Additional Message -->
<table border="0" cellpadding="0" cellspacing="0" style="max-width:500px;">
<tbody>
<tr>
<td style="color:#666666;">
<span style="color:#666666;">The most informative Fitzrovia & Co. review
{% if product-count != 0 %}, or helpful product review,
{% endif %} received by July 31 (even just a few words) will be our winner. And of course, if you have any other feedback or ideas, we'd love to hear from you, hit reply to this email.<br><br></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End of Review Button -->
<p></p>
If you need help customizing review request emails, contact our team at [email protected]. We're available to help 24/7!