Så här publicerar du ditt Shopify-bloggflöde i din Klaviyo-e-postmall

Så här publicerar du ditt Shopify-bloggflöde i din Klaviyo-e-postmall

Vi fortsätter att förbättra och optimera vår ShopifyPlus modekundens e-postmarknadsföringsinsatser med hjälp av Klaviyo. Klaviyo har en solid integration med Shopify som möjliggör massor av e-handelsrelaterad kommunikation som är förbyggd och redo att användas.

Överraskande nog att infoga din Shopify blogginlägg in i ett e-postmeddelande är dock INTE en av dem! Att göra saker ännu svårare ... dokumentationen för att skapa detta e-postmeddelande är inte grundlig och dokumenterar inte ens deras senaste redigerare. Så, Highbridge var tvungna att gräva lite och komma på hur vi skulle göra det själva... och det var inte lätt.

Här är utvecklingen som krävs för att få detta att hända:

  1. Blogg Feed – Atom-flödet som tillhandahålls av Shopify ger ingen anpassning och innehåller inte heller bilder, så vi måste bygga ett anpassat XML-flöde.
  2. Klaviyo dataflöde – XML-flödet som vi byggt måste integreras som ett dataflöde i Klaviyo.
  3. Klaviyo e-postmall – Vi måste sedan analysera flödet till en e-postmall där bilderna och innehållet är korrekt formaterat.

Bygg ett anpassat bloggflöde i Shopify

Jag kunde hitta en artikel med exempelkod för att bygga ut en anpassat flöde i Shopify för Mailchimp och gjorde en hel del redigeringar för att rensa upp det. Här är stegen för att bygga en anpassat RSS-flöde i Shopify för din blogg.

  1. Navigera till din Online Butik och välj det tema du vill placera flödet i.
  2. Välj i menyn Åtgärder Redigera kod.
  3. I menyn Filer, navigera till Mallar och klicka Lägg till en ny mall.
  4. I fönstret Lägg till en ny mall väljer du Skapa en ny mall för blogg.

Lägg till flytande bloggflöde till Shopify för Klaviyo

  1. Välj Malltyp av flytande.
  2. För filnamnet skrev vi in klaviyo.
  3. I kodredigeraren, placera följande kod:

{%- 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. Uppdatera de anpassade variablerna vid behov. En anmärkning om detta är att vi har ställt in bildstorleken till maxbredden på våra e-postmeddelanden, 600px bred. Här är en tabell över Shopifys bildstorlekar:

Shopify bildnamn Mått
pico 16px x 16px
ikon 32px x 32px
tumme 50px x 50px
Small 100px x 100px
kompakt 160px x 160px
Medium 240px x 240px
Large 480px x 480px
stor 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
Master Största bild tillgänglig

  1. Ditt flöde är nu tillgängligt på din bloggs adress med frågesträngen bifogad för att visa den. I vår kunds fall är flödesadressen:

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

  1. Ditt flöde är nu redo att användas! Om du vill kan du navigera till det i ett webbläsarfönster för att säkerställa att det inte finns några fel. Vi kommer att se till att det analyseras korrekt i nästa steg:

Lägg till ditt bloggflöde i Klaviyo

För att kunna använda ditt nya bloggflöde i Klaviyomåste du lägga till det som ett dataflöde.

  1. Navigera till Dataflöden
  2. Välja Lägg till webbflöde
  3. Ange ett Flödes namn (inga utrymmen är tillåtna)
  4. Ange Flödes-URL som du just skapat.
  5. Ange Request Method som
  6. Ange innehållstyp som XML

Klaviyo Lägg till Shopify XML-bloggflöde

  1. Klicka Uppdatera dataflöde.
  2. Klicka Förhandsvisning för att säkerställa att flödet fylls i korrekt.

Förhandsgranska Shopify-bloggflöde i Klaviyo

Lägg till ditt bloggflöde till din Klaviyo e-postmall

Nu vill vi bygga in vår blogg i vår e-postmall i Klaviyo. Enligt min åsikt, och anledningen till att vi behövde ett anpassat flöde, gillar jag ett delat innehållsområde där bilden är till vänster, titeln och utdraget är under. Klaviyo har också möjlighet att komprimera detta till en enda kolumn på en mobil enhet.

  1. Dra a Split Block i din e-postmall.
  2. Ställ in din vänstra kolumn till en Bild och din högra kolumn till en text blockera.

Klaviyo Split Block för Shopify Blog Post Artiklar

  1. Välj för bilden Dynamisk bild och ställ in värdet till:

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

  1. Ställ in alt-texten till:

{{item.title}}

  1. Ställ in länkadressen så att om e-postprenumeranten klickar på bilden kommer den att ta dem till din artikel.

{{item.link}}

  1. Välj höger kolumn för att ställa in kolumninnehållet.

Klaviyo blogginläggs titel och beskrivning

  1. Lägg till din innehåll, se till att lägga till en länk till din titel och infoga ditt inläggsutdrag.

<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älj Dela inställningar fliken.
  2. Ställ in på a 40% / 60% layout för att ge mer utrymme för text.
  3. aktivera Stack på mobilen och ställa in Höger till vänster.

Klaviyo Split Block för Shopify Blog Post Artiklar staplade på mobil

  1. Välj Visningsalternativ fliken.

Klaviyo Split Block för Shopify Blog Post Artiklar Visningsalternativ

  1. Välj Content Repeat och lägg flödet som du skapade i Klaviyo som källa i Upprepa för fält:

feeds.Closet52_Blog.rss.channel.item

  1. Ställ in Artikelalias as objektet.
  2. Klicka Förhandsgranska och testa och du kan nu se dina blogginlägg. Se till att testa det i både stationärt och mobilt läge.

Klaviyo Split Block Förhandsgranska och testa.

Och självklart om du behöver hjälp Shopify optimering och Klaviyo implementeringar, tveka inte att kontakta Highbridge.

Upplysningar: Jag är en partner i Highbridge och jag använder mina affiliate-länkar för Shopify och Klaviyo i den här artikeln.