We blijven onze Shopify Plus e-mailmarketinginspanningen van modeklanten met behulp van: Klaviyo. Klaviyo heeft een solide integratie met Shopify die een heleboel e-commerce-gerelateerde communicatie mogelijk maakt die vooraf is gebouwd en klaar voor gebruik.
Verrassend genoeg, het invoegen van uw Shopify-blogberichten in een e-mail is echter NIET een van hen! Om het nog moeilijker te maken... de documentatie voor het samenstellen van deze e-mail is niet grondig en documenteert zelfs niet hun nieuwste editor. Dus, Highbridge moest wat graven en uitzoeken hoe het zelf te doen ... en het was niet gemakkelijk.
Hier is de ontwikkeling die nodig is om dit mogelijk te maken:
- Blog Feed - De atom-feed van Shopify biedt geen aanpassingen en bevat ook geen afbeeldingen, dus we moeten een aangepaste XML-feed bouwen.
- Klaviyo-gegevensfeed – De XML-feed die we hebben gebouwd, moet worden geïntegreerd als een datafeed in Klaviyo.
- Klaviyo e-mailsjabloon - Vervolgens moeten we de feed ontleden in een e-mailsjabloon waarin de afbeeldingen en inhoud correct zijn opgemaakt.
Bouw een aangepaste blogfeed in Shopify
Ik heb een artikel kunnen vinden met voorbeeldcode om een aangepaste feed in Shopify heeft gewacht MailChimp en maakte nogal wat bewerkingen om het op te ruimen. Hier zijn de stappen om een te bouwen aangepaste RSS-feed in Shopify voor je blog.
- Navigeer naar uw Webwinkel en selecteer het thema waarin u de feed wilt plaatsen.
- Selecteer in het menu Acties Code bewerken.
- Navigeer in het menu Bestanden naar Sjablonen en klik op Een nieuwe sjabloon toevoegen.
- Selecteer in het venster Een nieuwe sjabloon toevoegen de optie Een nieuwe sjabloon maken heeft gewacht blog.
- Selecteer sjabloontype van vloeistof.
- Voor de bestandsnaam hebben we ingevoerd klaviyo.
- Plaats in de code-editor de volgende code:
{%- 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>- Werk de vrije variabelen indien nodig bij. Een opmerking hierover is dat we de afbeeldingsgrootte hebben ingesteld op de maximale breedte van onze e-mails, 600px breed. Hier is een tabel met de afbeeldingsformaten van Shopify:
| Naam van Shopify-afbeelding | Afmetingen |
| pico | 16px x 16px |
| icon | 32px x 32px |
| duim | 50px x 50px |
| kleine | 100px x 100px |
| compact | 160px x 160px |
| medium | 240px x 240px |
| grote | 480px x 480px |
| groot | 600px x 600px |
| 1024 X 1024 | 1024px x 1024px |
| 2048 X 2048 | 2048px x 2048px |
| meester | Grootste afbeelding beschikbaar |
- Je feed is nu beschikbaar op het adres van je blog met de querystring toegevoegd om deze te bekijken. In het geval van onze klant is de feed-URL:
https://closet52.com/blogs/fashion?view=klaviyo- Je feed is nu klaar voor gebruik! Als je wilt, kun je ernaartoe navigeren in een browservenster om er zeker van te zijn dat er geen fouten zijn. We gaan ervoor zorgen dat het goed wordt geparseerd in onze volgende stap:
Voeg uw blogfeed toe aan Klaviyo
Om uw nieuwe blogfeed te gebruiken in Klaviyo, moet u deze toevoegen als een gegevensfeed.
- Navigeer naar Datafeeds
- kies Webfeed toevoegen
- Voer een Feednaam (spaties zijn niet toegestaan)
- Voer de Feed-URL die u zojuist hebt gemaakt.
- Voer de aanvraagmethode in als GET
- Voer het inhoudstype in als XML
- Klik Gegevensfeed bijwerken.
- Klik Voorbeschouwing om ervoor te zorgen dat de feed correct wordt gevuld.
Voeg uw blogfeed toe aan uw Klaviyo-e-mailsjabloon
Nu willen we onze blog in onze e-mailsjabloon inbouwen in Klaviyo. Naar mijn mening, en de reden waarom we een aangepaste feed nodig hadden, hou ik van een gesplitst inhoudsgebied waar de afbeelding aan de linkerkant staat, de titel en het fragment eronder. Klaviyo heeft ook de mogelijkheid om dit op een mobiel apparaat in een enkele kolom samen te vouwen.
- Sleep een Blok splitsen in uw e-mailsjabloon.
- Zet je linkerkolom op een Beeld en je rechterkolom naar a Tekst blok.
- Selecteer voor de afbeelding Dynamische afbeelding en stel de waarde in op:
{{ item|lookup:'media:content'|lookup:'@url' }}- Stel de Alt-tekst in op:
{{item.title}}- Stel het koppelingsadres zo in dat als de e-mailabonnee op de afbeelding klikt, deze naar uw artikel wordt gebracht.
{{item.link}}- Selecteer het rechterkolom om de kolominhoud in te stellen.
- Vul uw inhoud, zorg ervoor dat u een link naar uw titel toevoegt en uw postuittreksel invoegt.
<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>- Selecteer het Instellingen splitsen Tab.
- Instellen op a 40% / 60% lay-out om meer ruimte voor tekst te bieden.
- Enable Stapelen op mobiel en instellen Rechts naar links.
- Selecteer het Weergaveopties Tab.
- Selecteer Content Repeat en plaats de feed die je in Klaviyo hebt gemaakt als bron in de Herhaal voor veld:
feeds.Closet52_Blog.rss.channel.item- Kies het Item alias as item.
- Klik Voorbeeld en testen en je kunt nu je blogberichten zien. Zorg ervoor dat u het zowel in desktop- als in mobiele modus test.
En natuurlijk als je hulp nodig hebt bij Shopify optimalisatie en Klaviyo implementaties, aarzel dan niet om contact op te nemen met Highbridge.
Openbaarmaking: ik ben een partner in Highbridge en ik gebruik mijn gelieerde links voor: Shopify en Klaviyo in dit artikel.
