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:
- 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.
- Klaviyo datafeed – XML-feedet, som vi byggede, skal integreres som et datafeed i Klaviyo.
- 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.
- Naviger til din Online Store og vælg det tema, du ønsker at placere feedet i.
- Vælg i menuen Handlinger Rediger kode.
- I menuen Filer skal du navigere til Skabeloner og klikke Tilføj en ny skabelon.
- I vinduet Tilføj en ny skabelon skal du vælge Opret en ny skabelon forum blog.
- Vælg skabelontype af væske.
- For filnavnet indtastede vi klaviyo.
- 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>- 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 |
- 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- 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.
- Naviger til Datafeeds
- Type Tilføj webfeed
- Indtast en Fodernavn (ingen mellemrum er tilladt)
- Indtast Feed URL som du lige har oprettet.
- Indtast Anmodningsmetoden som GET
- Indtast indholdstypen som XML
- Klik på Opdater datafeed.
- Klik på Eksempel for at sikre, at feedet udfyldes korrekt.
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.
- Træk a Split blok i din e-mailskabelon.
- Indstil din venstre kolonne til en Billede og din højre kolonne til en tekst blok.
- Vælg for billedet Dynamisk billede og indstil værdien til:
{{ item|lookup:'media:content'|lookup:'@url' }}- Indstil alt-teksten til:
{{item.title}}- Indstil linkadressen, så hvis e-mail-abonnenten klikker på billedet, vil den bringe dem til din artikel.
{{item.link}}- Vælg højre kolonne for at indstille kolonneindholdet.
- 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>- Vælg Split indstillinger fane.
- Indstil til a 40% / 60% layout for at give mere plads til tekst.
- Aktiver Stak på mobil og sæt Højre til venstre.
- Vælg Display Options fane.
- 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- Indstil Vare alias as post.
- 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.
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.
