Sådan udgiver du dit Shopify-blogfeed i din Klaviyo-e-mailskabelon

Sådan udgiver du dit Shopify-blogfeed i din Klaviyo-e-mailskabelon

Vi fortsætter med at forbedre og optimere vores Shopify Plus modekundens e-mail-marketingindsats ved hjælp af Klaviyo. Klaviyo har en solid integration med Shopify, der muliggør et væld af e-handelsrelateret kommunikation, der er præbygget og klar til brug.

Overraskende nok, at indsætte din Shopify blogindlæg ind i en e-mail er dog IKKE en af ​​dem! Gør tingene endnu sværere... dokumentationen til at opbygge denne e-mail er ikke grundig og dokumenterer ikke engang deres nyeste redaktør. Så, Highbridge var nødt til at grave lidt og finde ud af, hvordan man selv gjorde det... og det var ikke nemt.

Her er den nødvendige udvikling for at få dette til at ske:

  1. Blog Feed – Atom-feedet leveret af Shopify giver ikke nogen tilpasning og inkluderer heller ikke billeder, så vi er nødt til at bygge et tilpasset XML-feed.
  2. Klaviyo datafeed – XML-feedet, som vi byggede, skal integreres som et datafeed i Klaviyo.
  3. Klaviyo e-mail skabelon – Vi skal så parse feedet til en e-mailskabelon, hvor billederne og indholdet er korrekt formateret.

Byg et brugerdefineret blogfeed i Shopify

Jeg var i stand til at finde en artikel med eksempelkode til at bygge en brugerdefineret feed i Shopify forum MailChimp og lavede en del redigeringer for at rydde op i det. Her er trinene til at bygge en tilpasset RSS-feed i Shopify til din blog.

  1. Naviger til din Online Store og vælg det tema, du ønsker at placere feedet i.
  2. Vælg i menuen Handlinger Rediger kode.
  3. I menuen Filer skal du navigere til Skabeloner og klikke Tilføj en ny skabelon.
  4. I vinduet Tilføj en ny skabelon skal du vælge Opret en ny skabelon forum blog.

Tilføj flydende blogfeed til Shopify for Klaviyo

  1. Vælg skabelontype af væske.
  2. For filnavnet indtastede vi klaviyo.
  3. Indsæt følgende kode i kodeeditoren:

{%- 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. Opdater de tilpassede variabler efter behov. En bemærkning om dette er, at vi har indstillet billedstørrelsen til den maksimale bredde af vores e-mails, 600px bred. Her er en tabel over Shopifys billedstørrelser:

Shopify billednavn Mål
pico 16px x 16px
ikon 32px x 32px
tommelfinger 50px x 50px
lille 100px x 100px
kompakt 160px x 160px
medium 240px x 240px
stor 480px x 480px
stor 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
Master Største billede til rådighed

  1. Dit feed er nu tilgængeligt på din blogs adresse med forespørgselsstrengen tilføjet for at se den. I vores klients tilfælde er feed-URL'en:

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

  1. Dit feed er nu klar til brug! Hvis du vil, kan du navigere til det i et browservindue for at sikre, at der ikke er nogen fejl. Vi vil sikre, at den parses korrekt i vores næste trin:

Tilføj dit blogfeed til Klaviyo

For at bruge dit nye blog-feed i Klaviyo, skal du tilføje det som et datafeed.

  1. Naviger til Datafeeds
  2. Type Tilføj webfeed
  3. Indtast en Fodernavn (ingen mellemrum er tilladt)
  4. Indtast Feed URL som du lige har oprettet.
  5. Indtast Anmodningsmetoden som GET
  6. Indtast indholdstypen som XML

Klaviyo Tilføj Shopify XML-blogfeed

  1. Klik på Opdater datafeed.
  2. Klik på Eksempel for at sikre, at feedet udfyldes korrekt.

Se forhåndsvisning af Shopify-blogfeed i Klaviyo

Tilføj dit blogfeed til din Klaviyo-e-mail-skabelon

Nu vil vi bygge vores blog ind i vores e-mailskabelon i Klaviyo. Efter min mening, og grunden til, at vi havde brug for et brugerdefineret feed, kan jeg godt lide et delt indholdsområde, hvor billedet er til venstre, titlen og uddraget er under. Klaviyo har også mulighed for at kollapse dette i en enkelt kolonne på en mobilenhed.

  1. Træk a Split blok i din e-mailskabelon.
  2. Indstil din venstre kolonne til en Billede og din højre kolonne til en tekst blok.

Klaviyo Split Block til Shopify Blog Post-artikler

  1. Vælg for billedet Dynamisk billede og indstil værdien til:

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

  1. Indstil alt-teksten til:

{{item.title}}

  1. Indstil linkadressen, så hvis e-mail-abonnenten klikker på billedet, vil den bringe dem til din artikel.

{{item.link}}

  1. Vælg højre kolonne for at indstille kolonneindholdet.

Klaviyo blogindlægs titel og beskrivelse

  1. Tilføj din indhold, sørg for at tilføje et link til din titel og indsætte dit indlægsuddrag.

<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. Vælg Split indstillinger fane.
  2. Indstil til a 40% / 60% layout for at give mere plads til tekst.
  3. Aktiver Stak på mobil og sæt Højre til venstre.

Klaviyo Split Block til Shopify Blog Post-artikler stablet på mobil

  1. Vælg Display Options fane.

Klaviyo Split Block for Shopify Blog Post Artikler Visningsmuligheder

  1. Vælg Content Repeat og indsæt det feed, du har oprettet i Klaviyo som kilde i Gentag for Mark:

feeds.Closet52_Blog.rss.channel.item

  1. Indstil Vare alias as post.
  2. Klik på Forhåndsvisning og test og du kan nu se dine blogindlæg. Sørg for at teste det i både desktop- og mobiltilstand.

Klaviyo Split Block Preview og test.

Og selvfølgelig hvis du har brug for hjælp til Shopify optimering og Klaviyo implementeringer, tøv ikke med at kontakte Highbridge.

Offentliggørelse: Jeg er partner i Highbridge og jeg bruger mine affiliate links til Shopify og Klaviyo i denne artikel.