Kako objaviti svoj Shopify blog feed u svom Klaviyo predlošku e-pošte

Kako objaviti Shopify blog feed u svom Klaviyo predlošku e-pošte

Nastavljamo da unapređujemo i optimizujemo naše ShopifyPlus korištenje email marketing napora modnog klijenta Klaviyo. Klaviyo ima solidnu integraciju sa Shopify-om koja omogućava mnoštvo komunikacija u vezi sa e-trgovinom koje su unapred izgrađene i spremne za rad.

Iznenađujuće, ubacivanje vašeg Shopify Blog Postovi u email nije jedan od njih, međutim! Otežavanje stvari… dokumentacija za pravljenje ove e-pošte nije detaljna i čak ne dokumentuje njihov najnoviji urednik. dakle, Highbridge morali smo malo kopati i sami smisliti kako to učiniti... i nije bilo lako.

Evo razvoja potrebnog da bi se ovo dogodilo:

  1. Blog Feed – Atom feed koji pruža Shopify ne pruža nikakvu prilagodbu niti uključuje slike, tako da moramo napraviti prilagođeni XML feed.
  2. Klaviyo Data Feed – XML feed koji smo napravili treba integrirati kao izvor podataka u Klaviyo.
  3. Klaviyo predložak e-pošte – Zatim moramo raščlaniti feed u šablon e-pošte gdje su slike i sadržaj pravilno formatirani.

Napravite prilagođeni blog feed u Shopifyju

Uspio sam pronaći članak s primjerom koda za izradu a prilagođeni feed u Shopifyju za MailChimp i napravio dosta izmjena kako bih ga očistio. Evo koraka za izgradnju a prilagođeni RSS feed u Shopify za vaš blog.

  1. Idite do svog online Store i odaberite temu u koju želite postaviti feed.
  2. U meniju Akcije izaberite Uredi kod.
  3. U meniju Datoteke idite do Predlošci i kliknite Dodajte novi šablon.
  4. U prozoru Dodaj novi predložak odaberite Kreirajte novi šablon za blog.

Dodajte tekući blog feed u Shopify za Klaviyo

  1. Odaberite Vrsta predloška tečnost.
  2. Za naziv datoteke, uneli smo klaviyo.
  3. U uređivač koda postavite sljedeći 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. Ažurirajte prilagođene varijable po potrebi. Jedna napomena o tome je da smo veličinu slike postavili na maksimalnu širinu naših e-poruka, širinu 600px. Evo tabele Shopify veličina slika:

Shopify Naziv slike Dimenzije
vrhunac 16px x 16px
ikona 32px x 32px
palac 50px x 50px
mali 100px x 100px
kompaktni 160px x 160px
srednji 240px x 240px
veliki 480px x 480px
veliki 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
majstor Najveća dostupna slika

  1. Vaš feed je sada dostupan na adresi vašeg bloga s dodatkom niza upita da biste ga vidjeli. U slučaju našeg klijenta, URL feeda je:

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

  1. Vaš feed je sada spreman za korištenje! Ako želite, možete doći do njega u prozoru pretraživača kako biste bili sigurni da nema grešaka. Osigurat ćemo da se pravilno analizira u našem sljedećem koraku:

Dodajte svoj blog u Klaviyo

Kako biste iskoristili svoj novi blog feed in Klaviyo, morate ga dodati kao Data Feed.

  1. Idite do Izvori podataka
  2. izabrati Dodaj Web Feed
  3. Unesite a Ime feeda (nisu dozvoljeni razmaci)
  4. Unesite URL feeda koje ste upravo kreirali.
  5. Unesite Request Method kao GET
  6. Unesite Content Type kao XML

Klaviyo Dodaj Shopify XML Blog Feed

  1. kliknite Ažurirajte izvor podataka.
  2. kliknite Pregled kako biste osigurali da se feed pravilno popunjava.

Pregledajte Shopify Blog Feed u Klaviyo

Dodajte svoj blog feed u svoj Klaviyo predložak e-pošte

Sada želimo da ugradimo naš blog u naš predložak e-pošte u Klaviyo. Po mom mišljenju, i razlog zašto nam je bio potreban prilagođeni feed, sviđa mi se podijeljeno područje sadržaja gdje je slika lijevo, naslov i izvod ispod. Klaviyo također ima opciju da ovo skupi u jednu kolonu na mobilnom uređaju.

  1. Povucite a Split Block u svoj šablon e-pošte.
  2. Postavite lijevu kolonu na an slika a vaša desna kolona do a tekst blok.

Klaviyo Split Block za Shopify Blog Post Articles

  1. Za sliku odaberite Dynamic Image i postavite vrijednost na:

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

  1. Postavite zamjenski tekst na:

{{item.title}}

  1. Postavite adresu veze tako da ako pretplatnik e-pošte klikne na sliku, ona će ih dovesti do vašeg članka.

{{item.link}}

  1. Izaberite desnu kolonu da postavite sadržaj kolone.

Naslov i opis Klaviyo blog objave

  1. Dodajte svoje sadržaj, obavezno dodajte link u svoj naslov i ubacite izvod iz posta.

<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. Izaberite Split Settings tab.
  2. Postavite na a 40% / 60% raspored da obezbedi više prostora za tekst.
  3. omogućiti Stack na mobilnom i postaviti Desno nalijevo.

Klaviyo Split Block za Shopify Blog Post Članci naslagani na mobilnom uređaju

  1. Izaberite Opcije prikaza tab.

Klaviyo Split Block za Shopify Blog Post Članci Opcije prikaza

  1. Odaberite Content Repeat i stavite feed koji ste kreirali u Klaviyo kao izvor u Ponovi za polje:

feeds.Closet52_Blog.rss.channel.item

  1. Podesite Alias ​​stavke as stavka.
  2. kliknite Pregled i testiranje i sada možete vidjeti svoje postove na blogu. Obavezno ga testirajte u desktop i mobilnom načinu rada.

Klaviyo Split Block Pregled i testiranje.

I, naravno, ako vam treba pomoć u Shopify optimizacija i Klaviyo implementacije, ne oklijevajte da se obratite Highbridge.

Otkrivanje: Ja sam partner u Highbridge i koristim svoje partnerske veze za Shopify i Klaviyo u ovom članku.