Wéi publizéieren Äre Shopify Blog Feed an Ärer Klaviyo E-Mail Schabloun

Wéi publizéieren Äre Shopify Blog Feed an Ärer Klaviyo E-Mail Schabloun

Mir fuerderen eis weider ze verbesseren an ze optimiséieren ShopifyPlus Moud Client Email Marketing Efforten benotzt klaviyo. Klaviyo huet eng zolidd Integratioun mat Shopify déi eng Tonne vun E-Commerce-relatéierten Kommunikatiounen erméiglecht, déi virgebaut sinn a prett fir ze goen.

Iwwerraschend, aginn Är Shopify Blog Posts an eng E-Mail ass awer NET ee vun hinnen! D'Saachen nach méi schwéier maachen ... d'Dokumentatioun fir dës E-Mail ze bauen ass net grëndlech an dokumentéiert net emol hiren neisten Editor. Also, Highbridge hu misse gruewen an erausfannen wéi et selwer gemaach gëtt ... an et war net einfach.

Hei ass d'Entwécklung déi néideg ass fir dëst ze maachen:

  1. Blog Feed - Den Atomfeed geliwwert vu Shopify bitt keng Personnalisatioun an enthält och keng Biller, also musse mir e personaliséierten XML Feed bauen.
  2. Klaviyo Data Feed - Den XML Feed, dee mir gebaut hunn, muss als Datenfeed an Klaviyo integréiert ginn.
  3. Klaviyo Email Schabloun - Mir mussen dann de Feed an eng E-Mail Schabloun parséieren wou d'Biller an den Inhalt richteg formatéiert sinn.

Baut e Benotzerdefinéiert Blog Feed Am Shopify

Ech konnt en Artikel mat Beispill Code fannen aus engem bauen Benotzerdefinéiert Feed an Shopify fir MailChimp an huet nawell e puer Ännerungen gemaach fir et ze botzen. Hei sinn d'Schrëtt fir e bauen Benotzerdefinéiert RSS Feed an Shopify fir Äre Blog.

  1. Navigéiere fir Är online Store a wielt d'Thema an deem Dir de Feed wëllt placéieren.
  2. Am Aktiounsmenü, wielt Code änneren.
  3. Am Menü Dateien, navigéiert op Schablounen a klickt Füügt eng nei Schabloun.
  4. An der Füügt eng nei Schabloun Fënster, wielt Erstellt eng nei Schabloun fir Blog.

Füügt flëssege Blogfeed op Shopify fir Klaviyo

  1. Wielt Schabloun Typ vun flësseg.
  2. Fir den Dateinumm hu mir aginn klengen.
  3. Am Code Editor, setzt de folgende Code:

{%- 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. Update déi personaliséiert Variabelen wéi néideg. Eng Notiz zu dësem ass datt mir d'Bildgréisst op déi maximal Breet vun eisen E-Maile gesat hunn, 600px breet. Hei ass eng Tabell vun Shopify's Bildgréissten:

Shopify Bild Numm Dimensiounen
Pico 16 px x 16 px
icon 32 px x 32 px
Zeigefanger picken 50 px x 50 px
kleng 100 px x 100 px
kompakt 160 px x 160 px
mëttel- 240 px x 240 px
grouss 480 px x 480 px
groussen 600 px x 600 px
1024 X 1024 1024 px x 1024 px
2048 X 2048 2048 px x 2048 px
Meeschtesch Gréissten Bild verfügbar

  1. Äre Feed ass elo op der Adress vun Ärem Blog verfügbar mat der Querystring bäigefüügt fir se ze gesinn. Am Fall vun eisem Client ass d'Feed URL:

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

  1. Äre Feed ass elo prett fir ze benotzen! Wann Dir wëllt, kënnt Dir et an enger Browserfenster navigéieren fir sécherzestellen datt et keng Feeler gëtt. Mir wäerte sécherstellen datt et an eisem nächste Schrëtt richteg parséiert:

Füügt Äre Blog Feed an Klaviyo

Fir Ären neie Blog Feed ze benotzen klaviyo, Dir musst et als Data Feed addéieren.

  1. navigéiert ze Daten Feeds
  2. wielt Web Feed addéieren
  3. Gitt eng Feed Numm (keng Plazen sinn erlaabt)
  4. gitt hei den Feed URL déi Dir just erstallt hutt.
  5. Gitt d'Ufro Method als GET
  6. Gitt den Inhalt Typ als XML

Klaviyo Add Shopify XML Blog Feed

  1. klickt Update Datenfeed.
  2. klickt Preview fir sécherzestellen datt de Feed richteg populéiert ass.

Virschau Shopify Blog Feed zu Klaviyo

Füügt Äre Blog Feed op Är Klaviyo E-Mail Schabloun

Elo wëlle mir eise Blog an eis E-Mail Schabloun bauen klaviyo. Menger Meenung no, an de Grond firwat mir e Benotzerdefinéiert Feed gebraucht hunn, hunn ech gär e ​​gesplécktem Inhaltsberäich wou d'Bild op der lénker Säit ass, den Titel an den Auszuch ënner. Klaviyo huet och d'Méiglechkeet dëst an eng eenzeg Kolonn op engem mobilen Apparat ze kollapsen.

  1. Drag a Split Block an Är E-Mail Schabloun.
  2. Setzt Är lénks Kolonn op eng Bild an Är riets Kolonn zu engem Text blockéieren.

Klaviyo Split Block fir Shopify Blog Post Artikelen

  1. Fir d'Bild, wielt Dynamesch Bild a setzt de Wäert op:

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

  1. Setzt den Alt Text op:

{{item.title}}

  1. Setzt d'Link Adress sou datt wann den E-Mail Abonnent op d'Bild klickt, bréngt se se an Ären Artikel.

{{item.link}}

  1. wielt de riets Kolonn fir de Kolonninhalt ze setzen.

Klaviyo Blog Post Titel a Beschreiwung

  1. Füügt Ären Inhalt, gitt sécher e Link op Ären Titel ze addéieren an Äert Postauszuch anzeginn.

<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. wielt de Split Astellungen Tab.
  2. Setzt op a 40% / 60% Layout fir méi Plaz fir Text ze bidden.
  3. aktivéiert Stack op Handy a festgeluecht Riets op Lénks.

Klaviyo Split Block fir Shopify Blog Post Artikelen op Handy gestapelt

  1. wielt de Displayoptiounen Tab.

Klaviyo Split Block fir Shopify Blog Post Artikelen Displayoptiounen

  1. Wielt Inhalt Widderhuelen a setzt de Feed deen Dir an Klaviyo erstallt hutt als Quell an der Widderhuelen Fir Feld:

feeds.Closet52_Blog.rss.channel.item

  1. Setzt d' Artikel alias as item.
  2. klickt Virschau an Test an Dir kënnt elo Är Blogposte gesinn. Gitt sécher et souwuel am Desktop wéi och am mobilen Modus ze testen.

Klaviyo Split Block Preview an Test.

An, natierlech, wann Dir Hëllef braucht an Shopify Optimisatioun an klaviyo Ëmsetzungen, zéckt net ze erreechen Highbridge.

Verëffentlechung: Ech sinn e Partner am Highbridge an ech benotzen meng Affiliate Linken fir Shopify an klaviyo an dësem Artikel.