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>
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>
Remove Judge.me branding
<style> .jm-footer { display:none !important; } </style>
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 width="100%" border="0" cellspacing="0" cellpadding="0"> <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" cellspacing="0" cellpadding="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 width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="center" style="color:#666666;"> <br> <table border="0" cellspacing="0" cellpadding="0" width="260"> <tbody> <tr> <td align="center" style="border-radius: 3px;" bgcolor="#777777"><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" cellspacing="0" cellpadding="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>