Hoe u uw Shopify-blogfeed in uw Klaviyo-e-mailsjabloon publiceert

Hoe u uw Shopify-blogfeed publiceert in uw Klaviyo-e-mailsjabloon

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:

  1. Blog Feed - De atom-feed van Shopify biedt geen aanpassingen en bevat ook geen afbeeldingen, dus we moeten een aangepaste XML-feed bouwen.
  2. Klaviyo-gegevensfeed – De XML-feed die we hebben gebouwd, moet worden geïntegreerd als een datafeed in Klaviyo.
  3. 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.

  1. Navigeer naar uw Webwinkel en selecteer het thema waarin u de feed wilt plaatsen.
  2. Selecteer in het menu Acties Code bewerken.
  3. Navigeer in het menu Bestanden naar Sjablonen en klik op Een nieuwe sjabloon toevoegen.
  4. Selecteer in het venster Een nieuwe sjabloon toevoegen de optie Een nieuwe sjabloon maken heeft gewacht blog.

Voeg vloeibare blogfeed toe aan Shopify voor Klaviyo

  1. Selecteer sjabloontype van vloeistof.
  2. Voor de bestandsnaam hebben we ingevoerd klaviyo.
  3. 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>

  1. 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

  1. 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

  1. 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.

  1. Navigeer naar Datafeeds
  2. kies Webfeed toevoegen
  3. Voer een Feednaam (spaties zijn niet toegestaan)
  4. Voer de Feed-URL die u zojuist hebt gemaakt.
  5. Voer de aanvraagmethode in als GET
  6. Voer het inhoudstype in als XML

Klaviyo Shopify XML-blogfeed toevoegen

  1. Klik Gegevensfeed bijwerken.
  2. Klik Voorbeschouwing om ervoor te zorgen dat de feed correct wordt gevuld.

Bekijk een voorvertoning van de Shopify-blogfeed in Klaviyo

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.

  1. Sleep een Blok splitsen in uw e-mailsjabloon.
  2. Zet je linkerkolom op een Beeld en je rechterkolom naar a Tekst blok.

Klaviyo Split Block voor Shopify Blogpost-artikelen

  1. Selecteer voor de afbeelding Dynamische afbeelding en stel de waarde in op:

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

  1. Stel de Alt-tekst in op:

{{item.title}}

  1. Stel het koppelingsadres zo in dat als de e-mailabonnee op de afbeelding klikt, deze naar uw artikel wordt gebracht.

{{item.link}}

  1. Selecteer het rechterkolom om de kolominhoud in te stellen.

Klaviyo Blogbericht Titel en beschrijving

  1. 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>

  1. Selecteer het Instellingen splitsen Tab.
  2. Instellen op a 40% / 60% lay-out om meer ruimte voor tekst te bieden.
  3. Enable Stapelen op mobiel en instellen Rechts naar links.

Klaviyo Split Block voor Shopify Blog Post-artikelen gestapeld op mobiel

  1. Selecteer het Weergaveopties Tab.

Klaviyo Split Block voor Shopify Blogpostartikelen Weergaveopties

  1. 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

  1. Kies het Item alias as item.
  2. Klik Voorbeeld en testen en je kunt nu je blogberichten zien. Zorg ervoor dat u het zowel in desktop- als in mobiele modus test.

Klaviyo Split Block Voorbeeld en 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.