Hoe om u Shopify-blogstroom in u Klaviyo-e-possjabloon te publiseer

Ons gaan voort om ons te verbeter en te optimaliseer ShopifyPlus mode-kliënt se e-posbemarkingspogings gebruik Klaviyo. Klaviyo het 'n soliede integrasie met Shopify wat 'n ton e-handelverwante kommunikasie moontlik maak wat vooraf gebou is en gereed is om te gaan.

Verbasend genoeg, die invoeging van jou Shopify-blogplasings in 'n e-pos is egter NIE een van hulle nie! Om dinge nog moeiliker te maak ... die dokumentasie vir die bou van hierdie e-pos is nie deeglik nie en dokumenteer nie eers hul nuutste redakteur nie. Dus, Highbridge moes grawe en uitvind hoe om dit self te doen ... en dit was nie maklik nie.

Hier is die ontwikkeling wat nodig is om dit te laat gebeur:

1. Blog voer – Die atoomvoer wat deur Shopify verskaf word, bied geen aanpassing nie en sluit ook nie beelde in nie, so ons moet 'n pasgemaakte XML-voer bou.
2. Klaviyo Data Feed – Die XML-stroom wat ons gebou het, moet geïntegreer word as 'n datastroom in Klaviyo.
3. Klaviyo e-pos sjabloon – Ons moet dan die voer ontleed in 'n e-possjabloon waar die beelde en inhoud behoorlik geformateer is.

Bou 'n pasgemaakte blogstroom in Shopify

Ek kon 'n artikel met voorbeeldkode vind om 'n uit te bou pasgemaakte voer in Shopify vir MailChimp en het 'n hele paar wysigings gemaak om dit skoon te maak. Hier is die stappe om 'n pasgemaakte RSS-feed in Shopify vir jou blog.

1. Navigeer na jou Online Store en kies die tema waarin jy die voer wil plaas.
2. Kies in die Aksies-kieslys Wysig kode.
3. In die Lêers-kieslys, navigeer na Templates en klik Voeg 'n nuwe sjabloon by.
4. Kies in die venster Voeg 'n nuwe sjabloon by Skep 'n nuwe sjabloon vir blog.

5. Kies Sjabloon tipe van vloeistof.
6. Vir die lêernaam het ons ingevoer klaviyo.
7. Plaas die volgende kode in die koderedigeerder:

{%- 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>

8. Dateer die pasgemaakte veranderlikes op soos nodig. Een opmerking hieroor is dat ons die beeldgrootte op die maksimum breedte van ons e-posse gestel het, 600px breed. Hier is 'n tabel van Shopify se beeldgroottes:

9. Jou stroom is nou beskikbaar by jou blog se adres met die navraagstring aangeheg om dit te sien. In ons kliënt se geval is die voer-URL:

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

10. Jou voer is nou gereed om te gebruik! As jy wil, kan jy in 'n blaaiervenster daarna navigeer om te verseker dat daar geen foute is nie. Ons gaan verseker dat dit behoorlik ontleed in ons volgende stap:

Voeg jou blogstroom by Klaviyo

Om jou nuwe blogvoer in te gebruik Klaviyo, moet jy dit as 'n datavoer byvoeg.

1. Gaan na Datavoer
2. Kies Voeg webvoer by
3. Voer 'n Voer naam (geen spasies word toegelaat nie)
4. Tik die Voer URL wat jy sopas geskep het.
5. Voer die Versoekmetode in as KRY
6. Voer die inhoudtipe in as XML

7. Klik Dateer datastroom op.
8. Klik Preview om te verseker dat die voer korrek gevul word.

Voeg jou blogstroom by jou Klaviyo-e-possjabloon

Nou wil ons ons blog in ons e-possjabloon inbou Klaviyo. Na my mening, en die rede waarom ons 'n pasgemaakte voer nodig gehad het, hou ek van 'n gesplete inhoudsarea waar die prent aan die linkerkant is, die titel en uittreksel onder is. Klaviyo het ook die opsie om dit in 'n enkele kolom op 'n mobiele toestel in te vou.

1. Sleep a Verdeel blok in jou e-possjabloon.
2. Stel jou linkerkolom op 'n Image en jou regterkolom na a Teks blok.

3. Kies vir die prent Dinamiese beeld en stel die waarde op:

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

4. Stel die Alt teks na:

{{item.title}}

5. Stel die skakeladres so dat as die e-posintekenaar op die prent klik, dit hulle na jou artikel sal bring.

{{item.link}}

6. Kies die regterkolom om die kolominhoud te stel.

7. Voeg jou inhoud, maak seker dat jy 'n skakel by jou titel voeg en jou plasingsuittreksel invoeg.

<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>

8. Kies die Verdeel instellings Tab.
9. Stel op a 40% / 60% uitleg om meer ruimte vir teks te bied.
10. Aktiveer Stapel op selfoon en stel Regs na links.

11. Kies die Wys opsies Tab.

12. Kies Content Repeat en plaas die stroom wat jy in Klaviyo geskep het as die bron in die Herhaal Vir gebied:

feeds.Closet52_Blog.rss.channel.item

13. Stel die Item alias as item.
14. Klik Voorskou en toets en jy kan nou jou blogplasings sien. Maak seker dat u dit in beide rekenaar- en mobiele modus toets.

En, natuurlik, as jy hulp nodig het in Shopify optimalisering en Klaviyo implementerings, moenie huiwer om uit te reik na Highbridge.

Openbaarmaking: ek is 'n vennoot in Highbridge en ek gebruik my geaffilieerde skakels vir Shopify en Klaviyo in hierdie artikel.