Adding A Space To Email Confirmations

Store Design
1

Hi,

In the customer notification emails I am trying to add a space between our logo and the first line.

Everything I try puts " Â " under the logo.

I have given up and am asking for help

{{ email_title }} .button__cell { background: {{ shop.email_accent_color }}; } .actions-buttons .button__cell--primary { background-color: {{ shop.email_accent_color }}; } a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; } 
    <table class="container">
      <tr>
        <td>

          <table class="row">
            <tr>
              <td class="shop-name__cell">
                {%- if shop.email_logo_url %}
                  <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                {%- else %}
                  <h1 class="shop-name__text">
                    <a href="{{shop.url}}">{{ shop.name }}</a>
                  </h1>
                {%- endif %}
              </td>

            </tr>
          </table>

        </td>
      </tr>
    </table>

  </center>
</td>

      <table class="row content">

        <p>{{ custom_message }}</p>

        </td>
      </tr>
    </table>
  </center>
</td>

          <p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
        </td>
      </tr>
    </table>
  </center>
</td>


    </td>
  </tr>
</table>
2

Hey @offroadjim

You’re inserting a non-breaking space, and the email’s encoding is rendering that character as “Â.” Spaces and are the wrong tool for vertical gaps in HTML email anyway, they’re unreliable and that stray character is exactly the kind of artifact they cause. Use CSS padding instead and it comes out clean.

In your notification template, find the logo’s cell:

<td class="shop-name__cell">

and add bottom padding to it:

<td class="shop-name__cell" style="padding-bottom: 24px;">

Save and send yourself a test, that drops the first line down with a proper gap and no stray characters. Bump the 24px up or down until it looks right. If you’d rather create the space from the text side instead, do the same thing with padding-top on the cell of the content row directly underneath.

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hi @offroadjim

The  usually appears when a non-breaking space (&nbsp;) or copied whitespace is pasted with the wrong encoding.

Instead of adding spaces manually, add padding or a spacer row after the logo. For example, right below your logo block, try this:

<tr>
  <td style="height: 20px; line-height: 20px; font-size: 0;">&nbsp;</td>
</tr>

Or add bottom padding directly to the logo image:

<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}" style="margin-bottom: 20px;">

Best regards,
Devcoder :laptop:

4

Thank you so much for all the help!!!

5

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

6

Hi @offroadjim

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: