Kako objaviti svoj vir spletnega dnevnika Shopify v e-poštni predlogi Klaviyo

Kako objaviti svoj vir spletnega dnevnika Shopify v e-poštni predlogi Klaviyo

Še naprej izboljšujemo in optimiziramo naše ShopifyPlus e-poštno trženje modnih strank z uporabo Klaviyo. Klaviyo ima trdno integracijo s Shopifyjem, ki omogoča veliko komunikacij, povezanih z e-trgovino, ki so vnaprej zgrajene in pripravljene za uporabo.

Presenetljivo, vstavljanje svojega Objave v spletnem dnevniku Shopify v e-pošto pa NI eden izmed njih! Še težje stvari ... dokumentacija za izdelavo tega e-poštnega sporočila ni temeljita in niti ne dokumentira njihovega najnovejšega urejevalnika. torej Highbridge smo morali malo kopati in ugotoviti, kako to narediti sami ... in ni bilo lahko.

Tukaj je razvoj, ki je potreben, da se to zgodi:

  1. Blog Blog – Vir atoma, ki ga zagotavlja Shopify, ne omogoča prilagajanja niti ne vključuje slik, zato moramo zgraditi vir XML po meri.
  2. Podatkovni vir Klaviyo – Vir XML, ki smo ga zgradili, mora biti integriran kot vir podatkov v Klaviyo.
  3. E-poštna predloga Klaviyo – Nato moramo vir razčleniti v e-poštno predlogo, kjer so slike in vsebina pravilno oblikovane.

Ustvarite spletni vir po meri v Shopifyju

Našel sem članek s primerom kode za izdelavo a vir po meri v Shopifyju za MailChimp in naredil kar nekaj popravkov, da bi ga počistil. Tukaj so koraki za izgradnjo a vir RSS po meri v Shopify za vaš blog.

  1. Pojdite do svojega Spletna trgovina in izberite temo, v katero želite umestiti vir.
  2. V meniju Dejanja izberite Uredi kodo.
  3. V meniju Datoteke se pomaknite do Predloge in kliknite Dodajte novo predlogo.
  4. V oknu Dodaj novo predlogo izberite Ustvarite novo predlogo za blog.

Dodajte tekoči vir bloga v Shopify za Klaviyo

  1. Izberite Vrsta predloge tekočina.
  2. Za ime datoteke smo vnesli klaviyo.
  3. V urejevalnik kode postavite naslednjo kodo:

{%- 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. Po potrebi posodobite spremenljivke po meri. Ena opomba glede tega je, da smo velikost slike nastavili na največjo širino naših e-poštnih sporočil, širino 600 slikovnih pik. Tukaj je tabela velikosti slik Shopifyja:

Ime slike Shopify dimenzije
Pico 16px x 16px
Ikona 32px x 32px
palec 50px x 50px
majhna 100px x 100px
kompaktna 160px x 160px
srednje 240px x 240px
velika 480px x 480px
veliko 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
mojster Največja razpoložljiva slika

  1. Vaš vir je zdaj na voljo na naslovu vašega spletnega dnevnika z dodanim nizom poizvedbe za ogled. V primeru naše stranke je URL vira:

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

  1. Vaš vir je zdaj pripravljen za uporabo! Če želite, se lahko do njega pomaknete v oknu brskalnika in se prepričate, da ni napak. V naslednjem koraku bomo zagotovili, da bo pravilno razčlenjeno:

Dodajte svoj spletni vir v Klaviyo

Če želite uporabiti svoj novi vir spletnega dnevnika Klaviyo, ga morate dodati kot vir podatkov.

  1. Pomaknite se na Podatkovni viri
  2. Izberite Dodaj spletni vir
  3. Vpišite Ime vira (ni dovoljeni presledki)
  4. Vpišite URL vira ki ste ga pravkar ustvarili.
  5. Vnesite metodo zahteve kot GET
  6. Vnesite vrsto vsebine kot XML

Klaviyo Dodaj spletni vir Shopify XML

  1. klik Posodobite vir podatkov.
  2. klik predogled da zagotovite, da se vir pravilno napolni.

Predogled vira spletnega dnevnika Shopify v Klaviyo

Dodajte svoj spletni vir v svojo e-poštno predlogo Klaviyo

Zdaj želimo svoj blog vgraditi v našo e-poštno predlogo v Klaviyo. Po mojem mnenju in razlogu, zakaj smo potrebovali vir po meri, mi je všeč razdeljeno območje vsebine, kjer je slika na levi, naslov in odlomek spodaj. Klaviyo ima tudi možnost, da to strne v en sam stolpec na mobilni napravi.

  1. Povlecite a Razdeljeni blok v svojo e-poštno predlogo.
  2. Nastavite svoj levi stolpec na an Image in vaš desni stolpec na a Besedilo Blok.

Klaviyo Split Block za Shopify Blog Post Articles

  1. Za sliko izberite Dinamična slika in nastavite vrednost na:

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

  1. Nadomestno besedilo nastavite na:

{{item.title}}

  1. Naslov povezave nastavite tako, da če e-poštni naročnik klikne sliko, ga pripelje do vašega članka.

{{item.link}}

  1. Izberite desni stolpec da nastavite vsebino stolpca.

Naslov in opis objave v blogu Klaviyo

  1. Dodajte svoje vsebina, ne pozabite dodati povezave do svojega naslova in vstaviti odlomek objave.

<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. Izberite Razdelite nastavitve tab.
  2. Nastavljeno na a 40% / 60% postavitev da zagotovite več prostora za besedilo.
  3. Omogoči Zložite na mobilnem telefonu in nastavite Desno na levo.

Klaviyo Split Block za Shopify Blog Post Članki zloženi na mobilnih napravah

  1. Izberite Prikaži možnosti tab.

Klaviyo Split Block za Shopify Blog Post Članki Možnosti prikaza

  1. Izberite Ponovitev vsebine in kot vir vnesite vir, ki ste ga ustvarili v Klaviyo Ponovite za polje:

feeds.Closet52_Blog.rss.channel.item

  1. Nastavite Vzdevek artikla as postavka.
  2. klik Predogled in preizkus in zdaj lahko vidite svoje objave v blogu. Preizkusite ga tako v namiznem kot mobilnem načinu.

Klaviyo Split Block Predogled in preizkus.

In seveda, če potrebujete pomoč pri Shopify optimizacija in Klaviyo implementacije, ne oklevajte, da se obrnete na Highbridge.

Razkritje: Sem partner v Highbridge in uporabljam svoje partnerske povezave za Shopify in Klaviyo v tem članku.