We have moved to a new and improved knowledge base. This article is no longer updated. Please click here to find the new version

Fixed/dynamic picture size

Our variable {{ product_img }} shows an image with full width. In many cases that may be too big. So if you want to set up a smaller picture, then you will have to add it directly as HTML.

Example for absolute height and making the image a link (open in 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 making the image a link (open in new tab)

<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 instead of a definite number as image sizes can vary on different screen sizes.

Additional 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>

Multi Review Email Template: Show images instead of buttons

From Fitzrovia & Co.:

Use the HTML code below (and adjust for your own text) to show images instead of buttons to your buyers. A click on the product image will bring them to the review widget to leave a review.

Additionally, you need to deactivate the Advanced Customization setting in the Multi Review Email Template (so that it says: Product Loop: We will not use the loop offered by Judge.me. You will write your own loop.)

<style>
.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<span class="preheader" style="color:#f3f3f3; display:none !important; height:0; opacity:0; visibility:hidden; width:0">
Hi {{ buyer_first_name }}, how did we do? Leave a Review and you could win a $100 Fitzrovia & Co Gift Card! ________________________________________________________________________________________________________
</span>
<table border="0" cellpadding="0" cellspacing="0" style="max-width:500px;">
<tbody>
<tr>
<td style="color:#666666;">
<br><div style="text-align:center; color:#666666;">
<strong>Leave a Review to Win</strong>
</div>
<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>
<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;">
<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>
{% 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 %}
{% assign image-size = 135 %}
{% elsif forloop.length == 3 %}
{% assign image-size = 88 %}
{% elsif forloop.length == 4 %}
{% assign image-size = 65 %}
{% elsif forloop.length == 5 or forloop.length == 6 or forloop.length == 7 or forloop.length == 8 or forloop.length == 9 or forloop.length == 10 %}
{% assign image-size = 50 %}
{% endif %}
{% if forloop.index == 1 %}
<span>
<strong style="color:#666666;">{{ products-title }}</strong>
</span><br><br>
{% endif %}
{% 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 %}
<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>
<p></p>