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

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 has a solid integration with Shopify that enables a ton of e-commerce-related communications that are pre-built and ready to go.

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.

Voeg vloeibare blogvoer by Shopify vir Klaviyo

  1. Kies Sjabloon tipe van vloeistof.
  2. Vir die lêernaam het ons ingevoer klaviyo.
  3. 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>

  1. 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:

Shopify-beeldnaam dimensies
pico 16px x 16px
icon 32px x 32px
duim 50px x 50px
klein 100px x 100px
compact 160px x 160px
medium 240px x 240px
groot 480px x 480px
groot 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
meester Grootste beeld beskikbaar

  1. 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://closet52.com/blogs/fashion?view=klaviyo

  1. 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 blogvoer 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

Klaviyo Voeg Shopify XML Blog Feed by

  1. Klik Dateer datastroom op.
  2. Klik Preview om te verseker dat die voer korrek gevul word.

Voorbeskou Shopify Blog Feed in Klaviyo

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.

Klaviyo Split Blok vir Shopify Blog Post Artikels

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

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

  1. Stel die Alt teks na:

{{item.title}}

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

{{item.link}}

  1. Kies die regterkolom om die kolominhoud te stel.

Klaviyo Blog Post Titel en beskrywing

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

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

Klaviyo Split Block vir Shopify Blog Post Artikels gestapel op selfoon

  1. Kies die Wys opsies Tab.

Klaviyo Split Blok vir Shopify Blog Post Artikels Vertoon opsies

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

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

Klaviyo Split Block Voorskou en 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.