Hoe kinne jo jo Shopify-blogfeed publisearje yn jo Klaviyo-e-postsjabloan

Hoe kinne jo jo Shopify-blogfeed publisearje yn jo Klaviyo-e-postsjabloan

Wy bliuwe ús ferbetterje en optimalisearjen ShopifyPlus fashion client syn e-post marketing ynspannings mei help Klaviyo. Klaviyo hat in solide yntegraasje mei Shopify dy't in ton e-commerce-relatearre kommunikaasje mooglik makket dy't foarboud binne en klear om te gean.

Ferrassend, ynfoegje jo Shopify Blog Posts yn in e-mail is NET ien fan harren, hoewol! Dingen noch dreger meitsje ... de dokumintaasje foar it bouwen fan dizze e-post is net yngeand en dokuminteart har nijste bewurker net iens. Sa, Highbridge moast wat grave dwaan en útfine hoe't jo it sels dwaan ... en it wie net maklik.

Hjir is de ûntwikkeling dy't nedich is om dit barre te meitsjen:

  1. Blog Feed - De atomfeed levere troch Shopify leveret gjin oanpassing en befettet gjin ôfbyldings, dus wy moatte in oanpaste XML-feed bouwe.
  2. Klaviyo Data Feed - De XML-feed dy't wy boud hawwe moat wurde yntegrearre as in gegevensfeed yn Klaviyo.
  3. Klaviyo e-postsjabloan - Wy moatte dan de feed parsearje yn in e-postsjabloan wêr't de ôfbyldings en ynhâld goed opmakke binne.

Bou in oanpaste blogfeed yn Shopify

Ik wie by steat om te finen in artikel mei foarbyld koade te bouwen út a oanpaste feed yn Shopify foar Mailchimp en makke nochal wat bewurkings om it op te romjen. Hjir binne de stappen foar it bouwen fan in oanpaste RSS feed yn Shopify foar jo blog.

  1. Gean nei jo ta online Store en selektearje it tema wêryn jo de feed wolle pleatse.
  2. Selektearje yn it Aksjesmenu Koade bewurkje.
  3. Navigearje yn it menu Triemen nei Templates en klikje Foegje in nij sjabloan ta.
  4. Selektearje yn it finster taheakje in nij sjabloan Meitsje in nij sjabloan foar blog.

Foegje floeibere blogfeed ta oan Shopify foar Klaviyo

  1. Selektearje Template type fan liquid.
  2. Foar de triemnamme hawwe wy ynfierd klaviyo.
  3. Plak de folgjende koade yn 'e koade-bewurker:

{%- 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 de oanpaste fariabelen as nedich. Ien opmerking oer dit is dat wy de ôfbyldingsgrutte hawwe ynsteld op de maksimale breedte fan ús e-mails, 600px breed. Hjir is in tabel mei de ôfbyldingsgrutte fan Shopify:

Shopify ôfbyldingsnamme Ofmjittings
peak 16px x 16px
icon 32px x 32px
tomme 50px x 50px
lyts 100px x 100px
kompakt 160px x 160px
medium 240px x 240px
grut 480px x 480px
grut 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
master Grutste ôfbylding beskikber

  1. Jo feed is no beskikber op it adres fan jo blog mei de querystring taheakke om it te besjen. Yn it gefal fan ús kliïnt is de feed-URL:

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

  1. Jo feed is no klear foar gebrûk! As jo ​​​​wolle, kinne jo dernei navigearje yn in browserfinster om te soargjen dat d'r gjin flaters binne. Wy sille soargje dat it goed parseart yn ús folgjende stap:

Foegje jo blogfeed ta yn Klaviyo

Om jo nije blogfeed yn te brûken Klaviyo, Jo moatte it tafoegje as in Data Feed.

  1. Gean nei Gegevensfeeds
  2. Útkieze Webfeed tafoegje
  3. Enter a Feed Namme (gjin spaasjes binne tastien)
  4. Fier de Feed URL dat jo krekt makke.
  5. Fier de Oanfraachmetoade yn as KRIJE
  6. Fier it Ynhâld Type yn as XML

Klaviyo Add Shopify XML Blog Feed

  1. Klik Update Data Feed.
  2. Klik foarbyld om te soargjen dat de feed goed populearret.

Foarbyld fan Shopify Blog Feed yn Klaviyo

Foegje jo blogfeed ta oan jo Klaviyo-e-postsjabloan

No wolle wy ús blog ynbouwe yn ús e-postsjabloan yn Klaviyo. Yn myn miening, en de reden wêrom't wy nedich in oanpaste feed, I like in split ynhâld gebiet dêr't de ôfbylding is oan de linkerkant, de titel en úttreksel is ûnder. Klaviyo hat ek de opsje om dit yn ien kolom op in mobyl apparaat yn te fallen.

  1. Sleep a Split Block yn jo e-postsjabloan.
  2. Stel jo lofterkolom nei in Byld en jo rjochter kolom nei in Tekst blokkearje.

Klaviyo Split Block foar Shopify Blog Post-artikels

  1. Selektearje foar de ôfbylding Dynamyske ôfbylding en set de wearde yn op:

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

  1. Stel de Alt-tekst yn op:

{{item.title}}

  1. Stel it linkadres yn sadat as de e-postabonnee op de ôfbylding klikt, it se nei jo artikel bringt.

{{item.link}}

  1. Selektearje it rjochter kolom om de kolomynhâld yn te stellen.

Klaviyo Blog Post Titel en beskriuwing

  1. Foegje jo ta ynhâld, wês wis dat jo in keppeling tafoegje oan jo titel en ynfoegje jo berjochtúttreksel.

<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. Selektearje it Split ynstellings tab.
  2. Stel op a 40% / 60% yndieling om mear romte te jaan foar tekst.
  3. Ynskeakelje Stapel op mobyl en set Rjochts nei lofts.

Klaviyo Split Block foar Shopify Blog Post-artikels steapele op mobyl

  1. Selektearje it Skermopsjes tab.

Klaviyo Split Block foar Shopify Blog Post Artikels Display opsjes

  1. Selektearje Content Repeat en set de feed dy't jo makke hawwe yn Klaviyo as de boarne yn 'e Werhelje Foar fjild:

feeds.Closet52_Blog.rss.channel.item

  1. Set it Item alias as ûnderdiel.
  2. Klik Foarbyld en test en jo kinne no jo blogberjochten sjen. Wês wis dat jo it testje yn sawol buroblêd as mobile modus.

Klaviyo Split Block Foarbyld en test.

En, fansels, as jo help nedich hawwe yn Shopify optimalisaasje en Klaviyo ymplemintaasjes, aarzelje net om te berikken Highbridge.

Bekendmakking: ik bin in partner yn Highbridge en ik brûk myn affiliate keppelings foar Shopify en Klaviyo yn dit artikel.