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>