Shopify-blogisyötteen julkaiseminen Klaviyo-sähköpostimallissasi

Shopify-blogisyötteen julkaiseminen Klaviyo-sähköpostimallissasi

Jatkamme kehittämiämme ja optimointiamme ShopifyPlus muoti-asiakkaan sähköpostimarkkinointia käyttämällä Klaviyo. Klaviyolla on vankka integraatio Shopifyn kanssa, mikä mahdollistaa suuren joukon verkkokauppaan liittyvää viestintää, jotka on valmiiksi rakennettu ja valmiina käyttöön.

Yllättäen lisäät omasi Shopify-blogiviestit sähköpostiin EI kuitenkaan ole yksi niistä! Tehdä asioista vielä vaikeampaa… tämän sähköpostin laatimisen dokumentaatio ei ole perusteellinen, eikä siinä edes dokumentoida uusinta editoria. Niin, Highbridge piti kaivella ja keksiä, miten se tehdään itse… eikä se ollut helppoa.

Tässä on tarvittava kehitystyö, jotta tämä tapahtuu:

  1. Blogisyöte – Shopifyn tarjoama atomisyöte ei tarjoa mitään räätälöintiä eikä sisällä kuvia, joten meidän on rakennettava mukautettu XML-syöte.
  2. Klaviyo-tietosyöte – Rakentamamme XML-syöte on integroitava tietosyötteeksi Klaviyossa.
  3. Klaviyo-sähköpostimalli – Sitten meidän on jäsennettävä syöte sähköpostimalliksi, jossa kuvat ja sisältö on muotoiltu oikein.

Luo mukautettu blogisyöte Shopifyssa

Löysin artikkelin, jossa oli esimerkkikoodi a mukautettu syöte Shopifyssa varten MailChimp ja tein muutaman muokkauksen puhdistaakseen sen. Tässä on vaiheet a mukautettu RSS-syöte Blogisi Shopifyssa.

  1. Siirry omaan Verkkokauppa ja valitse teema, johon haluat sijoittaa syötteen.
  2. Valitse Toiminnot-valikosta Muokkaa koodia.
  3. Siirry Tiedostot-valikossa kohtaan Mallit ja napsauta Lisää uusi malli.
  4. Valitse Lisää uusi malli -ikkunassa Luo uusi malli varten blogi.

Lisää nestemäinen blogisyöte Shopify for Klaviyoon

  1. Valitse mallin tyyppi neste.
  2. Tiedostonimeksi syötimme klaviyo.
  3. Aseta koodieditoriin seuraava koodi:

{%- 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. Päivitä mukautetut muuttujat tarpeen mukaan. Yksi huomio tähän on, että olemme asettanut kuvakooksi sähköpostiemme enimmäisleveyden, 600 pikseliä. Tässä on taulukko Shopifyn kuvakooista:

Shopify-kuvan nimi Mitat
pico 16px x 16px
ikoni 32px x 32px
peukalo 50px x 50px
pieni 100px x 100px
kompakti 160px x 160px
keskikokoinen 240px x 240px
suuri 480px x 480px
suuri 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
mestari Suurin kuva saatavilla

  1. Syötteesi on nyt saatavilla blogisi osoitteessa, ja siihen on liitetty kyselymerkkijono, jotta voit tarkastella sitä. Asiakkaamme tapauksessa syötteen URL-osoite on:

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

  1. Syötteesi on nyt valmis käytettäväksi! Voit halutessasi siirtyä siihen selainikkunassa varmistaaksesi, ettei siinä ole virheitä. Varmistamme, että se jäsentää oikein seuraavassa vaiheessa:

Lisää blogisyöte Klaviyoon

Jotta voit hyödyntää uutta blogisyötettäsi Klaviyo, sinun on lisättävä se tietosyötteenä.

  1. Navigoida johonkin Tietosyötteet
  2. valita Lisää verkkosyöte
  3. Anna Syötteen nimi (välilyöntejä ei sallita)
  4. Anna Syötteen URL-osoite jonka juuri loit.
  5. Kirjoita Pyyntötapa muodossa SAA
  6. Anna sisältötyyppi muodossa XML

Klaviyo Lisää Shopify XML -blogisyöte

  1. Napauta Päivitä tietosyöte.
  2. Napauta preview varmistaaksesi, että syöte täyttyy oikein.

Esikatsele Shopify-blogisyötettä Klaviyossa

Lisää blogisyöte Klaviyo-sähköpostimalliisi

Nyt haluamme rakentaa blogimme sähköpostimalliksi Klaviyo. Mielestäni ja syynä siihen, miksi tarvitsimme mukautetun syötteen, pidän jaetusta sisältöalueesta, jossa kuva on vasemmalla, otsikko ja ote alla. Klaviyolla on myös mahdollisuus tiivistää tämä yhdeksi sarakkeeksi mobiililaitteella.

  1. Vedä a Jaettu lohko sähköpostimalliisi.
  2. Aseta vasemman sarakkeen arvoksi an Kuva ja oikea sarake kohtaan a teksti lohko.

Klaviyo Split Block Shopifyn blogikirjoitusartikkeleille

  1. Valitse kuvaksi Dynaaminen kuva ja aseta arvoksi:

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

  1. Aseta vaihtoehtoinen teksti seuraavasti:

{{item.title}}

  1. Aseta linkin osoite niin, että jos sähköpostin tilaaja klikkaa kuvaa, se tuo hänet artikkeliisi.

{{item.link}}

  1. Valitse oikea sarake asettaaksesi sarakkeen sisällön.

Klaviyo-blogiviestin otsikko ja kuvaus

  1. Lisää pitoisuus, muista lisätä linkki otsikkoon ja lisätä tekstiote.

<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. Valitse Jakoasetukset Tab.
  2. Aseta arvoon a 40 % / 60 % asettelu antaa enemmän tilaa tekstille.
  3. Enable Pinoa matkapuhelimeen Ja asettaa Oikealta vasemmalle.

Klaviyo Split Block Shopify-blogiviestien artikkeleille pinottu mobiililaitteeseen

  1. Valitse Näytön asetukset Tab.

Klaviyo Split Block Shopify-blogiviestien artikkeleille Näyttöasetukset

  1. Valitse Sisällön toisto ja laita Klaviyossa luomasi syöte lähteeksi Toista For ala:

feeds.Closet52_Blog.rss.channel.item

  1. - asettaa Tuotteen alias as erä.
  2. Napauta Esikatselu ja testaus ja näet nyt blogikirjoituksesi. Muista testata sitä sekä työpöytä- että mobiilitilassa.

Klaviyo Split Block Esikatselu ja testaus.

Ja tietysti jos tarvitset apua Shopify optimointi ja Klaviyo toteutuksia, älä epäröi ottaa yhteyttä Highbridge.

Ilmoitus: Olen kumppani Highbridge ja käytän affiliate-linkkejäni Shopify että Klaviyo tässä artikkelissa.