Jak publikovat svůj blogový kanál Shopify ve své e-mailové šabloně Klaviyo

Jak publikovat svůj blogový zdroj Shopify v šabloně e-mailu Klaviyo

Pokračujeme ve zlepšování a optimalizaci našich ShopifyPlus pomocí e-mailového marketingu módního klienta Klaviyo. Klaviyo has a solid integration with Shopify that enables a ton of e-commerce-related communications that are pre-built and ready to go.

Překvapivě vložení vašeho Příspěvky na blogu Shopify do e-mailu však NENÍ jedním z nich! Aby to bylo ještě obtížnější... dokumentace pro vytvoření tohoto e-mailu není důkladná a dokonce ani nezdokumentuje jejich nejnovější editor. Tak, Highbridge museli jsme trochu kopat a přijít na to, jak to udělat sami... a nebylo to snadné.

Zde je vývoj nezbytný k tomu, aby se to stalo:

  1. Blog Feed – Atom feed poskytovaný Shopify neposkytuje žádné přizpůsobení ani nezahrnuje obrázky, takže musíme vytvořit vlastní XML feed.
  2. Zdroj dat Klaviyo – XML feed, který jsme vytvořili, musí být integrován jako datový zdroj v Klaviyo.
  3. Šablona e-mailu Klaviyo – Poté musíme zdroj analyzovat do e-mailové šablony, kde jsou obrázky a obsah správně naformátovány.

Vytvořte si vlastní zdroj blogu v Shopify

Podařilo se mi najít článek s ukázkovým kódem k sestavení a custom feed in Shopify pro MailChimp and made quite a few edits to clean it up. Here are the steps to build a vlastní RSS kanál v Shopify pro váš blog.

  1. Přejděte na své Online Store a vyberte téma, do kterého chcete zdroj umístit.
  2. V nabídce Akce vyberte Upravit kód.
  3. V nabídce Soubory přejděte na Šablony a klikněte Přidejte novou šablonu.
  4. V okně Přidat novou šablonu vyberte Vytvořte novou šablonu pro blog.

Přidejte tekutý blogový zdroj do Shopify pro Klaviyo

  1. Vyberte typ šablony kapalina.
  2. Jako název souboru jsme zadali klaviyo.
  3. V editoru kódu umístěte následující kód:

{%- layout none -%}
{%- capture feedSettings -%}
  {% assign imageSize = 'grande' %}
  {% assign articleLimit = 5 %}
  {% assign showTags = false %}
  {% assign truncateContent = true %}
  {% assign truncateAmount = 30 %}
  {% assign forceHtml = false %}
  {% assign removeCdataTags = true %}
{%- endcapture -%}
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" 
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:media="http://search.yahoo.com/mrss/"
  >
  <channel>
    <title>{{ blog.title }}</title>
    <link>{{ canonical_url }}</link>
    <description>{{ page_description | strip_newlines }}</description>
    <lastBuildDate>{{ blog.articles.first.created_at | date: "%FT%TZ" }}</lastBuildDate>
    {%- for article in blog.articles limit:articleLimit %}
    <item>
      <title>{{ article.title }}</title>
      <link>{{ shop.url }}{{ article.url }}</link>
      <pubDate>{{ article.created_at | date: "%FT%TZ" }}</pubDate>
      <author>{{ article.author | default:shop.name }}</author>
      {%- if showTags and article.tags != blank -%}<category>{{ article.tags | join:',' }}</category>{%- endif -%}
      {%- if article.excerpt != blank %}
      <description>{{ article.excerpt | strip_html | truncatewords: truncateAmount | strip }}</description>
      {%- else %}
      <description>{{ article.content | strip_html | truncatewords: truncateAmount | strip }}</description>
      {%- endif -%}
      {%- if article.image %}
      <media:content type="image/*" url="https:{{ article.image | img_url: imageSize }}" />
      {%- endif -%}
    </item>
    {%- endfor -%}
  </channel>
</rss>

  1. Podle potřeby aktualizujte vlastní proměnné. Jedna poznámka k tomu je, že jsme nastavili velikost obrázku na maximální šířku našich e-mailů, na šířku 600 pixelů. Zde je tabulka velikostí obrázků Shopify:

Název obrázku Shopify Rozměry
pico 16px x 16px
ikona 32px x 32px
palec 50px x 50px
malý 100px x 100px
kompaktní 160px x 160px
střední 240px x 240px
velké 480px x 480px
velký 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
mistr Největší dostupný obrázek

  1. Váš zdroj je nyní k dispozici na adrese vašeho blogu s připojeným řetězcem dotazů pro jeho zobrazení. V případě našeho klienta je adresa URL zdroje:

https://closet52.com/blogs/fashion?view=klaviyo

  1. Váš zdroj je nyní připraven k použití! Pokud chcete, můžete na něj přejít v okně prohlížeče, abyste se ujistili, že tam nejsou žádné chyby. V dalším kroku zajistíme, že se správně analyzuje:

Přidejte svůj blogový kanál do Klaviyo

Chcete-li používat svůj nový zdroj blogu Klaviyo, musíte jej přidat jako zdroj dat.

  1. přejděte na Datové kanály
  2. vybrat Přidat webový kanál
  3. Zadejte Název zdroje (mezery nejsou povoleny)
  4. zadejte Adresa URL zdroje které jste právě vytvořili.
  5. Zadejte metodu požadavku jako GET
  6. Zadejte Typ obsahu jako XML

Klaviyo Přidat Shopify XML blogový zdroj

  1. klikněte Aktualizujte zdroj dat.
  2. klikněte Náhled abyste zajistili, že se zdroj správně naplní.

Náhled zdroje blogu Shopify v Klaviyo

Přidejte svůj zdroj blogu do své šablony e-mailu Klaviyo

Nyní chceme náš blog zabudovat do naší e-mailové šablony Klaviyo. Podle mého názoru a důvodu, proč jsme potřebovali vlastní zdroj, se mi líbí rozdělená oblast obsahu, kde je obrázek vlevo, název a úryvek je pod ním. Klaviyo má také možnost to sbalit do jednoho sloupce na mobilním zařízení.

  1. Přetáhněte a Dělený blok do vaší e-mailové šablony.
  2. Nastavte levý sloupec na a Obraz a váš pravý sloupec k a text blok.

Klaviyo Split Block pro články na blogu Shopify

  1. Pro obrázek vyberte Dynamický obraz a nastavte hodnotu na:

{{ item|lookup:'media:content'|lookup:'@url' }}

  1. Nastavte alternativní text na:

{{item.title}}

  1. Adresu odkazu nastavte tak, že pokud odběratel e-mailu klikne na obrázek, přivede ho to k vašemu článku.

{{item.link}}

  1. Vybrat pravý sloupec pro nastavení obsahu sloupce.

Název a popis příspěvku na blogu Klaviyo

  1. Přidejte svůj obsah, nezapomeňte přidat odkaz do názvu a vložte úryvek z příspěvku.

<div>
<h3 style="line-height: 60%;"><a style="font-size: 14px;" href="{{ item.link }}">{{item.title}}</a></h3>
<p><span style="font-size: 12px;">{{item.description}}</span></p>
</div>

  1. Vybrat Nastavení rozdělení Karta.
  2. Nastavte na a Rozložení 40 % / 60 %. poskytnout více prostoru pro text.
  3. umožnit Stack na mobilu a nastavte Zprava doleva.

Klaviyo Split Block pro Shopify Blog Post články naskládané na mobilu

  1. Vybrat Možnosti zobrazení Karta.

Klaviyo Split Block pro Shopify Možnosti zobrazení článků blogu

  1. Vyberte Opakování obsahu a vložte zdroj, který jste vytvořili v Klaviyo, jako zdroj do Opakujte pro pole:

feeds.Closet52_Blog.rss.channel.item

  1. Nastav Alias ​​položky as položka.
  2. klikněte Náhled a test a nyní můžete vidět své blogové příspěvky. Nezapomeňte jej otestovat v režimu stolního i mobilního zařízení.

Klaviyo Split Block Náhled a test.

A samozřejmě, pokud potřebujete pomoc Shopify optimalizace a Klaviyo implementací, neváhejte oslovit Highbridge.

Zveřejnění: Jsem partnerem Highbridge a používám své přidružené odkazy pro Shopify a Klaviyo v tomto článku.