Slik publiserer du Shopify-bloggfeeden din i Klaviyo-e-postmalen

Slik publiserer du Shopify-bloggfeeden din i Klaviyo-e-postmalen din

Vi fortsetter å forbedre og optimalisere våre ShopifyPlus moteklientens e-postmarkedsføringstiltak ved hjelp av Klaviyo. Klaviyo har en solid integrasjon med Shopify som muliggjør massevis av e-handelsrelatert kommunikasjon som er forhåndsbygd og klar til bruk.

Overraskende nok setter du inn din Shopify blogginnlegg inn i en e-post er IKKE en av dem! Gjør ting enda vanskeligere ... dokumentasjonen for å lage denne e-posten er ikke grundig og dokumenterer ikke engang deres nyeste redaktør. Så, Highbridge måtte grave litt og finne ut hvordan vi skulle gjøre det selv... og det var ikke lett.

Her er utviklingen som er nødvendig for å få dette til:

  1. Bloggfeed – Atom-feeden levert av Shopify gir ingen tilpasning og inkluderer heller ikke bilder, så vi må bygge en tilpasset XML-feed.
  2. Klaviyo datafeed – XML-feeden som vi bygde må integreres som en datafeed i Klaviyo.
  3. Klaviyo e-postmal – Vi må deretter analysere feeden til en e-postmal der bildene og innholdet er riktig formatert.

Bygg en tilpasset bloggfeed i Shopify

Jeg var i stand til å finne en artikkel med eksempelkode for å bygge ut en tilpasset feed i Shopify forum MailChimp og gjorde en del redigeringer for å rydde opp. Her er trinnene for å bygge en tilpasset RSS-feed i Shopify for bloggen din.

  1. Naviger til din Nettbutikk og velg temaet du vil plassere feeden i.
  2. I Handlinger-menyen velger du Rediger kode.
  3. I Filer-menyen, naviger til Maler og klikk Legg til en ny mal.
  4. I vinduet Legg til en ny mal velger du Lag en ny mal forum blog.

Legg til flytende bloggfeed til Shopify for Klaviyo

  1. Velg maltype av væske.
  2. For filnavnet skrev vi inn klaviyo.
  3. I koderedigeringsprogrammet legger du inn følgende kode:

{%- 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. Oppdater de tilpassede variablene etter behov. En merknad om dette er at vi har satt bildestørrelsen til maksimal bredde på e-postene våre, 600 px bred. Her er en tabell over Shopifys bildestørrelser:

Shopify bildenavn dimensjoner
pico 16px x 16px
icon 32px x 32px
tommel 50px x 50px
liten 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 bilde tilgjengelig

  1. Strømmen din er nå tilgjengelig på bloggens adresse med søkestrengen lagt til for å se den. I vår klients tilfelle er feed-URLen:

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

  1. Feeden din er nå klar til bruk! Hvis du vil, kan du navigere til det i et nettleservindu for å sikre at det ikke er noen feil. Vi skal sørge for at den analyserer riktig i neste trinn:

Legg til blogginnmatingen din i Klaviyo

For å bruke den nye bloggfeeden din Klaviyo, må du legge den til som en datafeed.

  1. naviger til Datafeeder
  2. Plukke ut Legg til nettfeed
  3. Skriv inn et Feednavn (ingen mellomrom er tillatt)
  4. Angi Feed-URL som du nettopp har laget.
  5. Skriv inn forespørselsmetoden som GET
  6. Skriv inn innholdstype som XML

Klaviyo Legg til Shopify XML-bloggfeed

  1. Klikk Oppdater datafeed.
  2. Klikk Forhåndsvisning for å sikre at feeden fylles ut riktig.

Forhåndsvis Shopify-bloggfeed i Klaviyo

Legg til bloggfeeden din i Klaviyo-e-postmalen

Nå ønsker vi å bygge bloggen vår inn i e-postmalen vår Klaviyo. Etter min mening, og grunnen til at vi trengte en tilpasset feed, liker jeg et delt innholdsområde der bildet er til venstre, tittelen og utdraget er under. Klaviyo har også muligheten til å kollapse dette til en enkelt kolonne på en mobil enhet.

  1. Dra a Delt blokk inn i e-postmalen din.
  2. Sett venstre kolonne til en Bilde og høyre kolonne til a tekst blokkere.

Klaviyo delt blokk for Shopify blogginnleggsartikler

  1. Velg for bildet Dynamisk bilde og sett verdien til:

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

  1. Sett Alt-teksten til:

{{item.title}}

  1. Angi koblingsadressen slik at hvis e-postabonnenten klikker på bildet, vil den bringe dem til artikkelen din.

{{item.link}}

  1. Velg høyre kolonne for å angi kolonneinnholdet.

Klaviyo blogginnleggs tittel og beskrivelse

  1. Legg til din innhold, sørg for å legge til en lenke til tittelen din og sette inn innleggsutdraget ditt.

<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. Velg Split innstillinger fanen.
  2. Sett til a 40% / 60% layout for å gi mer rom for tekst.
  3. aktiver Stable på mobil og sett Høyre til venstre.

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

  1. Velg Visningsalternativer fanen.

Klaviyo Split Block for Shopify Blog Post Artikler Visningsalternativer

  1. Velg Content Repeat og legg inn feeden du opprettet i Klaviyo som kilde i Gjenta for felt:

feeds.Closet52_Blog.rss.channel.item

  1. Sett Varealias as elementet.
  2. Klikk Forhåndsvisning og test og du kan nå se blogginnleggene dine. Sørg for å teste den i både skrivebords- og mobilmodus.

Klaviyo Split Block Forhåndsvisning og test.

Og selvfølgelig hvis du trenger hjelp Shopify optimalisering og Klaviyo implementeringer, ikke nøl med å ta kontakt Highbridge.

Offentliggjøring: Jeg er partner i Highbridge og jeg bruker mine tilknyttede linker for Shopify og Klaviyo i denne artikkelen.