Ako publikovať svoj blogový kanál Shopify vo svojej e-mailovej šablóne Klaviyo

Ako publikovať svoj blogový kanál Shopify vo svojej e-mailovej šablóne Klaviyo

Naďalej zlepšujeme a optimalizujeme naše ShopifyPlus pomocou e-mailového marketingu módneho klienta Klaviyo. Klaviyo má solídnu integráciu so službou Shopify, ktorá umožňuje množstvo komunikácií súvisiacich s elektronickým obchodom, ktoré sú vopred pripravené a pripravené na použitie.

Prekvapivo, vloženie vášho Blogové príspevky Shopify do e-mailu však NIE JE jedným z nich! Robiť veci ešte zložitejšími... dokumentácia na zostavenie tohto e-mailu nie je dôkladná a dokonca ani nezdokumentuje ich najnovší editor. takze Highbridge museli sme trochu kopať a prísť na to, ako to urobiť sami... a nebolo to ľahké.

Tu je vývoj potrebný na to, aby sa to stalo:

  1. Informačný kanál blogu – Atom feed poskytovaný Shopify neposkytuje žiadne prispôsobenie ani neobsahuje obrázky, takže musíme vytvoriť vlastný XML feed.
  2. Informačný kanál Klaviyo – XML feed, ktorý sme vytvorili, musí byť integrovaný ako dátový kanál v Klaviyo.
  3. Šablóna e-mailu Klaviyo – Potom musíme informačný kanál analyzovať do e-mailovej šablóny, kde sú obrázky a obsah správne naformátované.

Vytvorte si vlastný kanál blogu v službe Shopify

Podarilo sa mi nájsť článok s ukážkovým kódom na zostavenie a vlastný informačný kanál v Shopify pre MailChimp a urobil niekoľko úprav, aby to vyčistil. Tu sú kroky na vybudovanie a vlastný kanál RSS v službe Shopify pre váš blog.

  1. Prejdite na svoje Online Store a vyberte tému, do ktorej chcete informačný kanál umiestniť.
  2. V ponuke Akcie vyberte Upraviť kód.
  3. V ponuke Súbory prejdite na položku Šablóny a kliknite na ňu Pridajte novú šablónu.
  4. V okne Pridať novú šablónu vyberte Vytvorte novú šablónu pre blog.

Pridajte tekutý blogový kanál do Shopify pre Klaviyo

  1. Vyberte typ šablóny kvapalina.
  2. Pre názov súboru sme zadali klaviyo.
  3. V editore kódu umiestnite nasledujúci 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. Podľa potreby aktualizujte vlastné premenné. Jedna poznámka k tomu je, že sme nastavili veľkosť obrázka na maximálnu šírku našich e-mailov, na šírku 600 pixelov. Tu je tabuľka veľkostí obrázkov Shopify:

Názov obrázka Shopify Rozmery
pico 16px x 16px
ikona 32px x 32px
palec 50px x 50px
malý 100px x 100px
kompaktné 160px x 160px
stredná 240px x 240px
veľké 480px x 480px
skvelý 600px x 600px
1024 1024 X 1024px x 1024px
2048 2048 X 2048px x 2048px
majster Najväčší dostupný obrázok

  1. Váš informačný kanál je teraz k dispozícii na adrese vášho blogu s pripojeným reťazcom dotazu, aby ste ho mohli zobraziť. V prípade nášho klienta je adresa URL informačného kanála:

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

  1. Váš informačný kanál je teraz pripravený na použitie! Ak chcete, môžete naň prejsť v okne prehliadača, aby ste sa uistili, že tam nie sú žiadne chyby. V našom ďalšom kroku sa ubezpečíme, že sa správne analyzuje:

Pridajte svoj blogový kanál do Klaviyo

Ak chcete použiť svoj nový informačný kanál blogu Klaviyo, musíte ho pridať ako informačný kanál údajov.

  1. prejdite na Dátové kanály
  2. vybrať Pridať webový kanál
  3. Zadajte Názov informačného kanála (nie sú povolené žiadne medzery)
  4. Zadajte Adresa URL informačného kanála ktoré ste práve vytvorili.
  5. Zadajte metódu požiadavky ako GET
  6. Zadajte Typ obsahu ako XML

Klaviyo Pridať Shopify XML blogový kanál

  1. kliknite Aktualizujte informačný kanál.
  2. kliknite náhľad aby ste sa uistili, že sa informačný kanál správne napĺňa.

Ukážka kanála blogu Shopify v Klaviyo

Pridajte svoj blogový kanál do svojej e-mailovej šablóny Klaviyo

Teraz chceme náš blog zabudovať do našej e-mailovej šablóny Klaviyo. Podľa môjho názoru a dôvodu, prečo sme potrebovali vlastný informačný kanál, sa mi páči rozdelená oblasť obsahu, kde je obrázok vľavo, názov a úryvok pod ním. Klaviyo má tiež možnosť zbaliť to do jedného stĺpca na mobilnom zariadení.

  1. Potiahnite a Split Block do šablóny e-mailu.
  2. Nastavte ľavý stĺpec na a Obraz a váš pravý stĺpec k a text blok.

Klaviyo Split Block pre články blogu Shopify

  1. Pre obrázok vyberte Dynamický obrázok a nastavte hodnotu na:

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

  1. Nastavte alternatívny text na:

{{item.title}}

  1. Adresu odkazu nastavte tak, že ak odberateľ e-mailu klikne na obrázok, privedie ho to k vášmu článku.

{{item.link}}

  1. Vybrať pravý stĺpec na nastavenie obsahu stĺpca.

Názov a popis blogového príspevku Klaviyo

  1. Pridajte svoj obsah, nezabudnite pridať odkaz do názvu a vložte úryvok z príspevku.

<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. Vybrať Nastavenia rozdelenia tab.
  2. Nastavte na a Rozloženie 40 % / 60 %. poskytnúť viac priestoru pre text.
  3. Umožniť Stack na mobile a nastavte Zprava doľava.

Klaviyo Split Block pre Shopify Blogové príspevky naskladané na mobile

  1. Vybrať Možnosti zobrazenia tab.

Klaviyo Split Block pre Shopify Možnosti zobrazenia článkov blogu

  1. Zvoľte Content Repeat a vložte feed, ktorý ste vytvorili v Klaviyo ako zdroj do Opakujte pre lúka:

feeds.Closet52_Blog.rss.channel.item

  1. Nastaviť Alias ​​položky as položka.
  2. kliknite Náhľad a test a teraz môžete vidieť svoje blogové príspevky. Nezabudnite ho otestovať v režime stolného počítača aj mobilného zariadenia.

Klaviyo Split Block Ukážka a test.

A samozrejme, ak potrebujete pomoc Shopify optimalizácia a Klaviyo implementácií, neváhajte osloviť Highbridge.

Zverejnenie: Som spoločníkom v Highbridge a používam svoje pridružené odkazy Shopify a Klaviyo v tomto článku.