Cara Memublikasikan Umpan Blog Shopify Anda Di Templat Email Klaviyo Anda

Cara Memublikasikan Umpan Blog Shopify Anda Di Templat Email Klaviyo Anda

Kami terus meningkatkan dan mengoptimalkan ShopifyPlus upaya pemasaran email klien mode menggunakan Klaviyo. Klaviyo memiliki integrasi yang solid dengan Shopify yang memungkinkan banyak komunikasi terkait e-niaga yang sudah dibuat sebelumnya dan siap digunakan.

Anehnya, memasukkan Anda Postingan Blog Shopify ke dalam email BUKAN salah satunya! Membuat segalanya menjadi lebih sulit… dokumentasi untuk membuat email ini tidak menyeluruh dan bahkan tidak mendokumentasikan editor terbaru mereka. Jadi, Highbridge harus melakukan penggalian dan mencari cara untuk melakukannya sendiri… dan itu tidak mudah.

Inilah pengembangan yang diperlukan untuk mewujudkannya:

  1. Umpan Blog – Umpan atom yang disediakan oleh Shopify tidak menyediakan penyesuaian apa pun juga tidak menyertakan gambar, jadi kami harus membuat umpan XML khusus.
  2. Umpan Data Klaviyo – Umpan XML yang kami buat perlu diintegrasikan sebagai umpan data di Klaviyo.
  3. Templat Email Klaviyo – Kami kemudian perlu mengurai umpan ke dalam template email tempat gambar dan konten diformat dengan benar.

Buat Umpan Blog Khusus Di Shopify

Saya dapat menemukan artikel dengan kode contoh untuk dibuat umpan khusus di Shopify untuk MailChimp dan membuat beberapa pengeditan untuk membersihkannya. Berikut adalah langkah-langkah untuk membangun umpan RSS khusus di Shopify untuk blog Anda.

  1. Arahkan ke Anda Toko Online dan pilih tema yang Anda inginkan untuk menempatkan umpan.
  2. Di menu Tindakan, pilih Edit Kode.
  3. Di menu File, navigasikan ke Template dan klik Tambahkan templat baru.
  4. Di jendela Tambahkan template baru, pilih Buat template baru untuk blog.

Tambahkan umpan blog cair ke Shopify untuk Klaviyo

  1. Pilih jenis Template dari cair.
  2. Untuk nama File, kami memasukkan klaviyo.
  3. Di editor kode, letakkan kode berikut:

{%- 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. Perbarui variabel khusus seperlunya. Satu catatan tentang ini adalah bahwa kami telah mengatur ukuran gambar ke lebar maksimum email kami, lebar 600px. Berikut tabel ukuran gambar Shopify:

Nama Gambar Shopify Ukuran
pico 16px x 16px
icon 32px x 32px
jempol 50px x 50px
kecil 100px x 100px
padat 160px x 160px
medium 240px x 240px
besar 480px x 480px
besar 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
menguasai Gambar terbesar tersedia

  1. Umpan Anda sekarang tersedia di alamat blog Anda dengan string kueri yang ditambahkan untuk melihatnya. Dalam kasus klien kami, URL umpan adalah:

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

  1. Umpan Anda sekarang siap digunakan! Jika mau, Anda dapat menavigasinya di jendela browser untuk memastikan tidak ada kesalahan. Kami akan memastikannya diurai dengan benar di langkah berikutnya:

Tambahkan Umpan Blog Anda Ke Klaviyo

Untuk memanfaatkan umpan blog baru Anda di Klaviyo, Anda harus menambahkannya sebagai Umpan Data.

  1. Navigasi ke Umpan Data
  2. memilih Tambahkan Umpan Web
  3. Masukkan Nama Umpan (tidak ada spasi yang diperbolehkan)
  4. Masukkan URL umpan yang baru saja Anda buat.
  5. Masukkan Metode Permintaan sebagai GET
  6. Masukkan Jenis Konten sebagai XML

Klaviyo Tambahkan Umpan Blog XML Shopify

  1. Klik Perbarui Umpan Data.
  2. Klik Preview untuk memastikan umpan terisi dengan benar.

Pratinjau Umpan Blog Shopify di Klaviyo

Tambahkan Umpan Blog Anda Ke Template Email Klaviyo Anda

Sekarang kami ingin membangun blog kami ke dalam template email kami di Klaviyo. Menurut pendapat saya, dan alasan mengapa kami membutuhkan umpan khusus, saya suka area konten terpisah di mana gambar berada di sebelah kiri, judul dan kutipan di bawah. Klaviyo juga memiliki opsi untuk menciutkannya menjadi satu kolom di perangkat seluler.

  1. Seret a Pisahkan Blok ke dalam template email Anda.
  2. Setel kolom kiri Anda ke Gambar dan kolom kanan Anda untuk a Teks blok.

Klaviyo Split Block untuk Artikel Postingan Blog Shopify

  1. Untuk gambar, pilih Gambar Dinamis dan atur nilainya menjadi:

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

  1. Setel Teks Alt ke:

{{item.title}}

  1. Atur Alamat Tautan sehingga jika pelanggan email mengklik gambar, itu akan membawa mereka ke artikel Anda.

{{item.link}}

  1. pilih kolom kanan untuk mengatur isi kolom.

Judul dan Deskripsi Postingan Blog Klaviyo

  1. Tambahkan kadar, pastikan untuk menambahkan tautan ke judul Anda dan masukkan kutipan posting Anda.

<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. pilih Pengaturan Terpisah Tab.
  2. Setel ke 40% / 60% tata letak untuk memberikan lebih banyak ruang untuk teks.
  3. memungkinkan Tumpukan di Seluler dan mengatur Kanan ke kiri.

Klaviyo Split Block untuk Artikel Postingan Blog Shopify yang ditumpuk di Seluler

  1. pilih Tampilan Pilihan Tab.

Klaviyo Split Block untuk Opsi Tampilan Artikel Postingan Blog Shopify

  1. Pilih Pengulangan Konten dan masukkan umpan yang Anda buat di Klaviyo sebagai sumber di Ulangi Untuk bidang:

feeds.Closet52_Blog.rss.channel.item

  1. Mengatur alias barang as barang.
  2. Klik Pratinjau dan uji dan Anda sekarang dapat melihat posting blog Anda. Pastikan untuk mengujinya dalam mode desktop dan seluler.

Klaviyo Split Block Pratinjau dan uji.

Dan, tentu saja, jika Anda membutuhkan bantuan dalam Shopify pengoptimalan dan Klaviyo implementasi, jangan ragu untuk menghubungi Highbridge.

Pengungkapan: Saya adalah mitra dalam Highbridge dan saya menggunakan tautan afiliasi saya untuk Shopify serta Klaviyo dalam artikel ini.