Logo and product photos not shown on order confirmation email

[IrenaP]

Hi, I could use some help

When I used localization for my country(Croatia) and translated all my notification emails and sent myself a test email I see that when I used localization my logo and product photos are not shown.

Also "view your order" button is not working.

I didn't change anything in the codes, I used automatic translation.

When I used English and sent myself a test email everything is normal, logo and product photos are shown and "view your order" button is working.

Thanks

[GemPages]

Hello @IrenaP ,

It's GemPages support team and glad to support you today.

To provide you with the most precise solution in this case, could you please share the Order Confirmation Email code?

Thank you and hope to hear from you.

Best regards,
GemPages Support Team

[IrenaP]

Hi,

Thank you for reaching out. I found mistakes in the code, was comparing it with the english version. There was "no translate parts" (see below code for invoice mail notification).

I had to change it manually for shipping and order confirmation email, it's time consuming.

Here is the example of the invoice email code. Will I have to change the code for each notification manually ?

<title> &lt;span class='notranslate'&gt;{{ email_title }}&lt;/span&gt; </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: <span class='notranslate'>{{ shop.email_accent_color }}</span>; }
a, a:hover, a:active, a:visited { color: <span class='notranslate'>{{ shop.email_accent_color }}</span>; }
</style>
<table class="body"><tr><td>
<table class="header row"><tr><td class="header__cell"><center><table class="container"><tr><td><table class="row"><tr>
<td class="shop-name__cell"> {%- if shop.email_logo_url %} <img src="&lt;span%20class='notranslate'&gt;%7B%7Bshop.email_logo_url%7D%7D&lt;/span&gt;" alt="&lt;span class='notranslate'&gt;{{ shop.name }}&lt;/span&gt;" width="&lt;span class='notranslate'&gt;{{ shop.email_logo_width }}&lt;/span&gt;"> {%- else %}<h1 class="shop-name__text"> <a href="&lt;span%20class='notranslate'&gt;%7B%7Bshop.url%7D%7D&lt;/span&gt;">{{ shop.name }}</a>
</h1> {%- endif %}
</td> <td class="order-number__cell">
<span class="order-number__text">Faktura {{ order_name }}</span> </td>
</tr></table></td></tr></table></center></td></tr></table>
<table class="row content"><tr><td class="content__cell"><center><table class="container"><tr>
<td> {% if payment_terms.type == 'receipt' and payment_terms.next_payment.due_at == nil %} {% assign due_date = 'now' %} {% else %} {% assign due_date = payment_terms.next_payment.due_at | default: nil %} {% endif %}<h2> Plaćanje od {{ order.total_outstanding | money }} dospijeva {{ due_date | date: format: 'date' }}
</h2> {% if custom_message != blank %} <p>{{ custom_message }}</p> {% endif %} {% if checkout_payment_collection_url %}<table class="row actions"><tr><td class="actions__cell"><table class="button main-action-cell"><tr><td class="button__cell"> <a href="&lt;span%20class='notranslate'&gt;%7B%7B%20checkout_payment_collection_url%20%7D%7D&lt;/span&gt;" class="button__text">Plati sada</a>
</td></tr></table></td></tr></table> {% endif %}
</td> </tr></table></center></td></tr></table>
<table class="row section"><tr><td class="section__cell"><center>
<table class="container"><tr><td><h3> Sažetak narudžbe</h3></td></tr></table>
<table class="container"><tr><td>
<table class="row"> {% for line in subtotal_line_items %}<tr class="order-list__item"><td class="order-list__item__cell"><table>
<td> {% if line.image %} <img src="&lt;span%20class='notranslate'&gt;%7B%7B%20line%20%7C%20img_url:%20'compact_cropped'%20%7D%7D&lt;/span&gt;" align="left" width="60" height="60" class="order-list__product-image"> {% endif %}
</td> <td class="order-list__product-description-cell">
{% if line.product.title %} {% assign line_title = line.product.title %} {% else %} {% assign line_title = line.title %} {% endif %} {% if line.quantity &lt; line.quantity %} {% capture line_display %} {{ line.quantity }} od {{ line.quantity }} {% endcapture %} {% else %} {% assign line_display = line.quantity %} {% endif %} <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span> <br>{% if line.variant.title != 'Default Title' %} <span class="order-list__item-variant">{{ line.variant.title }}</span><br> {% endif %} {% if line.selling_plan_allocation %} <span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span> <br>{% endif %} {% if line.refunded_quantity &gt; 0 %} <span class="order-list__item-refunded">Povrat</span> {% endif %} {% if line.discount_allocations %} {% for discount_allocation in line.discount_allocations %} {% if discount_allocation.discount_application.target_selection != 'all' %} <img src="&lt;span%20class='notranslate'&gt;%7B%7B%20'notifications/discounttag.png'%20%7C%20shopify_asset_url%20%7D%7D&lt;/span&gt;" width="18" height="18" class="discount-tag-icon"> <span>{{ discount_allocation.discount_application.title | upcase }} (- {{ discount_allocation.amount | money }} )</span> {% endif %} {% endfor %} {% endif %}
</td>
<td class="order-list__price-cell"> {% if line.original_line_price != line.final_line_price %}<del class="order-list__item-original-price"> {{ line.original_line_price | money }}</del> {% endif %} <p class="order-list__item-price">{% if line.final_line_price &gt; 0 %} {{ line.final_line_price | money }} {% else %} Besplatno {% endif %}</p>
</td>
</table></td></tr> {% endfor %}
</table>
<table class="row subtotal-lines"><tr>
<td class="subtotal-spacer"></td>
<td> <table class="row subtotal-table">
{% for discount_application in discount_applications %} {% if discount_application.target_selection == 'all' %} {% capture discount_title %} {% if discount_application.title %} {{ discount_application.title | upcase }} {% else %} Popust {% endif %} {% endcapture %}<tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Popust</span> <span class="subtotal-line__discount"><img src="&lt;span%20class='notranslate'&gt;%7B%7B%20'notifications/discounttag.png'%20%7C%20shopify_asset_url%20%7D%7D&lt;/span&gt;" width="18" height="18" class="discount-tag-icon"> <span class="subtotal-line__discount-title">{{ discount_title }}</span></span></p></td>
<td class="subtotal-line__value"> <strong>- {{ discount_application.total_allocated_amount | money }}</strong>
</td> </tr>
{% endif %} {% endfor %}<tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Međuzbroj</span></p></td>
<td class="subtotal-line__value"> <strong>{{ subtotal_price | money }}</strong>
</td>
</tr>
<tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>dostava</span></p></td>
<td class="subtotal-line__value"> <strong>{{ shipping_price | money }}</strong>
</td>
</tr>
<tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Procijenjeni porezi</span></p></td>
<td class="subtotal-line__value"> <strong>{{ tax_price | money }}</strong>
</td>
</tr> {% if total_tip_received and total_tip_received &gt; 0 %}<tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Savjet</span></p></td>
<td class="subtotal-line__value"> <strong>{{ total_tip_received | money }}</strong>
</td>
</tr> {% endif %}
</table>
</td>
</tr></table>
<table class="row subtotal-lines"><tr> {% if total_price &gt; total_outstanding %}<td class="subtotal-spacer"> </td>
<td>
<table class="row subtotal-table">
<tr class="subtotal-line">
<td class="subtotal-line__title"> <p><span>Ukupno ažurirano</span></p>
</td>
<td class="subtotal-line__value"> <strong>{{ total_price | money }}</strong>
</td>
</tr>
<tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Već plaćeno</span></p></td>
<td class="subtotal-line__value"> <strong>{{ net_payment | money }}</strong>
</td> </tr>
</table>
<table class="row subtotal-table subtotal-table--total"><tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Iznos za plaćanje</span></p></td>
<td class="subtotal-line__value"> <strong>{{ total_outstanding | money_with_currency }}</strong>
</td>
</tr></table>
</td> {% else %}<table class="row subtotal-table subtotal-table--total"><tr class="subtotal-line">
<td class="subtotal-line__title"><p> <span>Iznos za plaćanje</span></p></td>
<td class="subtotal-line__value"> <strong>{{ total_outstanding | money_with_currency }}</strong>
</td>
</tr></table> {% endif %}
</tr></table>
</td></tr></table>
</center></td></tr></table> {% if shipping_address or billing_address or shipping_method %}<table class="row section"><tr><td class="section__cell"><center>
<table class="container"><tr><td>
<h3> Informacije za kupce</h3> </td></tr></table>
<table class="container"><tr><td>
<table class="row"><tr>
{% if shipping_address %}<td class="customer-info__item">
<h4> Dostavna adresa</h4> {{ shipping_address | format_address }}
</td> {% endif %} {% if billing_address %}<td class="customer-info__item">
<h4> Adresa za naplatu</h4> {{ billing_address | format_address }}
</td> {% endif %}
</tr></table> {% if shipping_method %}<table class="row"><tr><td class="customer-info__item customer-info__item--last">
<h4> Metoda slanja</h4>
<p> {{ shipping_method.title }}<br> {{ shipping_method.price | money }}</p>
</td></tr></table> {% endif %} </td></tr></table>
</center></td></tr></table>
{% endif %}<table class="row footer"> <tr><td class="footer__cell"><center><table class="container"><tr><td><p class="disclaimer__subtext"> Ako imate pitanja, odgovorite na ovu e-poruku ili nas kontaktirajte na <a href="mailto:&lt;span%20class='notranslate'&gt;%7B%7B%20shop.email%20%7D%7D&lt;/span&gt;">{{ shop.email }}</a> </p></td></tr></table></center></td></tr>
</table>
<img src="&lt;span%20class='notranslate'&gt;%7B%7B%20'notifications/spacer.png'%20%7C%20shopify_asset_url%20%7D%7D&lt;/span&gt;" class="spacer" height="1">
</td></tr></table>

[GemPages]

Hello @IrenaP ,

That's right, you need to change the code for each notification manually. It's a bit inconvenient but there's no other way.

In addition, since the templates are written in HTML and Liquid so please be careful.

Best regards,
GemPages Support Team

[richbrown_staff]

Hi @IrenaP , Rich from the product team. We're looking into this - sorry you've had this problem and had to spend time on it. We think it's an error with how auto-translate is working with liquid code inside HTML. We'll revert. 

[IrenaP]

Thank you!

It would be really helpful that I don't have to go manually check and correct the code since I'm not a programmer and don't want to mess something up and it's really time consuming.

[dagdag]

Same issue one year later. Any fix for this? My customers are getting messed up emails ...

[Karlis]

Hi,

Is there an update to this? I can't send such terrible looking emails to my clients. Can I turn off Shopify emails, so that I can send them from Klaviyo? 

Thank you!

[richbrown_staff]

Hi @Karlis , what's the specific issue you have? 

[Karlis]

Hi,

When I try to localize Order confirmation the localized email no longer has any images, same as the problem above. No logo, product images, buttons etc. Only text. 

When I delete translation and switch back to English images are there again.  

[richbrown_staff]

Sounds like the formatting of the notification (its HTML and Liquid) might have got broken; what language are you doing this in? And what's the history with this notification, have you ever manually translated it?

[Karlis]

I copied the source and all of them were translated manually without making any changes to the code. 

Is there a way to turn off order accepted notification on Shopify to send it from Kleviyo? 

[richbrown_staff]

Hi @Karlis , looking at your Order Confirmation in Latvian it's not translated. Did you recently delete translations? 

This forum is Translate & Adapt so for Klaviyo you'd need to speak to them or perhaps Shopify general support, but I should be able to get you up and running with the native notifications.

If you have the code that you manually translated send that to me and I'll take a look