Shopify Blog Akışınızı Klaviyo E-posta Şablonunuzda Nasıl Yayınlarsınız?

Shopify Blog Akışınızı Klaviyo E-posta Şablonunuzda Nasıl Yayınlarsınız?

Geliştirmeye ve optimize etmeye devam ediyoruz ShopifyPlus kullanarak moda müşterisinin e-posta pazarlama çabaları Klaviyo. Klaviyo, Shopify ile önceden oluşturulmuş ve kullanıma hazır tonlarca e-ticaretle ilgili iletişime olanak tanıyan sağlam bir entegrasyona sahiptir.

Şaşırtıcı bir şekilde, Shopify Blog Gönderileri yine de bir e-postaya girmek onlardan biri DEĞİLDİR! İşleri daha da zorlaştırıyor… bu e-postayı oluşturmaya yönelik belgeler eksiksiz değil ve en yeni düzenleyicilerini bile belgelemiyor. Böyle, Highbridge biraz kazı yapmak ve kendimiz nasıl yapacağımızı bulmak zorundaydık… ve bu kolay değildi.

İşte bunun gerçekleşmesi için gerekli geliştirme:

  1. Blog Yayını – Shopify tarafından sağlanan atom feed'i herhangi bir özelleştirme sağlamaz ve görsel içermez, bu nedenle özel bir XML feed'i oluşturmamız gerekiyor.
  2. Klaviyo Veri Beslemesi – Oluşturduğumuz XML feed'inin Klaviyo'da bir veri feed'i olarak entegre edilmesi gerekiyor.
  3. Klaviyo E-posta Şablonu – Daha sonra beslemeyi, resimlerin ve içeriğin uygun şekilde biçimlendirildiği bir e-posta şablonuna ayrıştırmamız gerekiyor.

Shopify'da Özel Blog Akışı Oluşturun

Oluşturmak için örnek kodlu bir makale bulabildim. Shopify'da özel feed için   ve temizlemek için epeyce düzenleme yaptı. İşte bir inşa etmek için adımlar özel RSS beslemesi Blogunuz için Shopify'da.

  1. Senin için gidin Online Mağaza ve beslemeyi yerleştirmek istediğiniz temayı seçin.
  2. Eylemler menüsünde, öğesini seçin. Kodu Düzenle.
  3. Dosyalar menüsünde Şablonlar'a gidin ve Yeni bir şablon ekle.
  4. Yeni şablon ekle penceresinde, Yeni bir şablon oluştur için blog.

Klaviyo için Shopify'a sıvı blog beslemesi ekleyin

  1. Şablon türünü seçin sıvı.
  2. Dosya adı için girdik Klaviyo.
  3. Kod düzenleyicide aşağıdaki kodu yerleştirin:

{%- 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. Özel değişkenleri gerektiği gibi güncelleyin. Bununla ilgili bir not, resim boyutunu e-postalarımızın maksimum genişliğine, 600 piksel genişliğe ayarlamış olmamızdır. İşte Shopify'ın görsel boyutlarının bir tablosu:

Shopify Görsel Adı boyutlar
pico 16px x 16px
ikon 32px x 32px
başparmak 50px x 50px
küçük 100px x 100px
kompakt 160px x 160px
orta 240px x 240px
büyük 480px x 480px
büyük 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
usta Mevcut en büyük resim

  1. Feed'iniz, görüntülemek için eklenen sorgu dizesi ile artık blogunuzun adresinde mevcuttur. Müşterimizin durumunda, besleme URL'si:

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

  1. Feed'iniz artık kullanıma hazır! İsterseniz, hata olmadığından emin olmak için bir tarayıcı penceresinde ona gidebilirsiniz. Bir sonraki adımımızda düzgün şekilde ayrıştırıldığından emin olacağız:

Blog Akışınızı Klaviyo'ya Ekleyin

Yeni blog akışınızı kullanmak için Klaviyo, bunu bir Veri Beslemesi olarak eklemelisiniz.

  1. Şu yöne rotayı ayarla Veri Beslemeleri
  2. seçmek Web Beslemesi Ekle
  3. Bir girin Besleme Adı (boşluğa izin verilmez)
  4. Girin Besleme URL'si az önce yarattığın
  5. İstek Yöntemini şu şekilde girin: GET
  6. İçerik Türünü şu şekilde girin: XML

Klaviyo Shopify XML Blog Akışı Ekle

  1. Tıkla Veri Feed'ini Güncelle.
  2. Tıkla Önizleme beslemenin doğru şekilde doldurulduğundan emin olmak için.

Klaviyo'da Shopify Blog Akışını Önizleyin

Blog Akışınızı Klaviyo E-posta Şablonunuza Ekleyin

Şimdi blogumuzu e-posta şablonumuza eklemek istiyoruz. Klaviyo. Bence ve özel bir beslemeye ihtiyaç duymamızın nedeni, görüntünün solda olduğu, başlığın ve alıntının altında olduğu bölünmüş bir içerik alanını seviyorum. Klaviyo ayrıca bunu bir mobil cihazda tek bir sütuna daraltma seçeneğine de sahiptir.

  1. Sürükleyin Bölünmüş Blok e-posta şablonunuza.
  2. Sol sütununuzu bir Resim ve sağ sütununuz bir Metin engellemek.

Shopify Blog Gönderisi Makaleleri için Klaviyo Bölünmüş Blok

  1. Görüntü için seçin Dinamik Görüntü ve değeri şuna ayarlayın:

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

  1. Alternatif Metni şu şekilde ayarlayın:

{{item.title}}

  1. Bağlantı Adresini, e-posta abonesi resmi tıklarsa, onları makalenize getirecek şekilde ayarlayın.

{{item.link}}

  1. seçmek Sağ sütun sütun içeriğini ayarlamak için

Klaviyo Blog Yazısı Başlığı ve Açıklaması

  1. Ekle içerik, başlığınıza bir bağlantı eklediğinizden ve gönderi alıntınızı eklediğinizden emin olun.

<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. seçmek Bölme Ayarları sekmesi.
  2. a'ya ayarla %40 / %60 düzen metin için daha fazla alan sağlamak için.
  3. etkinleştirme Mobilde Yığın ve ayarla Sağdan sola.

Shopify Blog Gönderisi için Klaviyo Bölünmüş Blok Mobilde yığılmış Makaleler

  1. seçmek Seçenekleri Göster sekmesi.

Shopify Blog Yazısı Makaleleri için Klaviyo Bölünmüş Blok Görüntüleme Seçenekleri

  1. İçerik Tekrarı'nı seçin ve Klaviyo'da oluşturduğunuz beslemeyi kaynak olarak için tekrarla alan:

feeds.Closet52_Blog.rss.channel.item

  1. Yı kur Öğe takma adı as madde.
  2. Tıkla Önizleme ve test ve artık blog yazılarınızı görebilirsiniz. Hem masaüstü hem de mobil modda test ettiğinizden emin olun.

Klaviyo Bölünmüş Blok Önizleme ve test.

Ve elbette, yardıma ihtiyacınız olursa Shopify optimizasyon ve Klaviyo uygulamalarla iletişime geçmekten çekinmeyin. Highbridge.

Açıklama: Ben ortağım Highbridge ve bağlı kuruluş bağlantılarımı şunun için kullanıyorum Shopify ve Klaviyo Bu makalede.