Výchozí vzhled e-mailových šablon vám ne vždy musí vyhovovat. Shopify s tím ale počítá a pár základních změn si můžete udělat bez hlubších technických znalostí. Jednoduše lze přidat logo, upravit jeho velikost a změnit barvu odkazů.

Jak přidat logo do e-mailů a změnit barvu odkazů?

V administraci e-shopu vlevo dole je položka Settings a dále pak Notifications. V horní části se nachází jediné tlačítko Customize, na které kliknete. Zobrazí se hlavní šablona e-mailu pro potvrzení objednávky.

Vpravo pak můžete:

• nahrát logo
• nahradit logo (Replace)
• odstranit logo (Remove)
• změnit šířku loga – obvykle budete mít rozměr okolo 200px
• změnit barvu odkazů a tlačítek – výběrem z palety nebo napsáním HEX kódu barvy

Složitější úpravy e-mailů

Když se vrátíte zpět do seznamu notifikací Settings / Notifications, tak lze upravovat i celý zdrojový kód všech e-mailů. Stačí kliknout na název šablony a zobrazí se vám celý HTML kód obohacený o Liquid tagy. Tady už jsou potřeba základní znalosti HTML a technického myšlení.

Výchozí e-mailové šablony Shopify mají napsány pomocí zanořených tabulek a skoro každá šablona řeší několik stavů a podle něj pak vkládá rozdílné texty. Uvedu na příkladu.

V šabloně e-mailu o zrušení objednávky Order canceled jsou hned na začátku řešeny tyto stavy:

• když zruší objednávku zákazník
• když nebylo požadované množství kusů skladem
• pokud je podezření, že je objednávka podvodná
• v důsledku nepředvídaných okolností

V návaznosti na důvod zrušení se vypíše do e-mailu různý text, který si ještě můžete upravit. V prvním případě, kdy zruší objednávku zákazník se vypíše: „Objednávka #123 byla zrušena na vaši žádost.“

Liquid proměnné

Pokud jste si vložili logo a změnili barvu odkazů, tak v e-mailové šabloně můžete tyto hodnoty vypsat pomocí tagů:

• {{shop.email_logo_url}} – odkaz na obrázek loga
• {{shop.email_logo_width}} – šířka, např. 150px
• {{shop.email_accent_color}} – barva, např. #000000

Použít tagy pak můžete například takto:

{% if shop.email_logo_url %}
<a title="{{ shop.name }}" href="{{shop.url}}"></a>
<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 %}

Což slovy znamená: pokud je nalezeno logo, tak jej vlož, uprav jeho šířku, pokud logo vloženo není, dej odkaz na e-shop pouze jako název nadpisem H1.

Všechny dostupné liguid proměnné pak najdete v nápovědě na shopify.com.

Jak si otestovat nový vzhled e-mailu?

V notifikacích klikněte na některou ze šablon, například Order confirmation. Vpravo nahoře je tlačítko zobrazující 3 tečky. Klikněte na něj a vyjede vám položka Send test email. Když ji kliknutím spustíte, přijde vám na e-mail obchodníka nový vzhled e-mailu potvrzení objednávky.

Shopify nedovolí odeslat větší množství testovacích e-mailů v krátké době hned po sobě. Po přibližně 15 testovacích e-mailech musíte počkat cca 15 minut, a až poté můžete odeslat další.

‍