Změna vzhledu Shopify e-mailů

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}}">
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}" />
</a>
{% 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ší.

Leave A Reply