Cara Menerbitkan Suapan Blog Shopify Anda Dalam Templat E-mel Klaviyo Anda

Cara Menerbitkan Suapan Blog Shopify Anda Dalam Templat E-mel Klaviyo Anda

Kami terus meningkatkan dan mengoptimumkan kami ShopifyPlus usaha pemasaran e-mel pelanggan fesyen menggunakan Klaviyo. Klaviyo mempunyai integrasi yang kukuh dengan Shopify yang membolehkan satu tan komunikasi berkaitan e-dagang yang telah dibina dan sedia untuk digunakan.

Yang menghairankan, memasukkan anda Siaran Blog Shopify ke dalam e-mel BUKAN salah satu daripada mereka, walaupun! Menjadikan perkara lebih sukar… dokumentasi untuk membina e-mel ini tidak menyeluruh dan tidak mendokumenkan editor terbaru mereka. Jadi, Highbridge terpaksa melakukan beberapa penggalian dan memikirkan cara melakukannya sendiri… dan ia tidak mudah.

Berikut ialah pembangunan yang diperlukan untuk mewujudkannya:

  1. Suapan Blog – Suapan atom yang disediakan oleh Shopify tidak menyediakan sebarang penyesuaian dan tidak termasuk imej, jadi kami perlu membina suapan XML tersuai.
  2. Suapan Data Klaviyo – Suapan XML yang kami bina perlu disepadukan sebagai suapan data dalam Klaviyo.
  3. Templat E-mel Klaviyo – Kami kemudiannya perlu menghuraikan suapan ke dalam templat e-mel di mana imej dan kandungan diformatkan dengan betul.

Bina Suapan Blog Tersuai Dalam Shopify

Saya dapat mencari artikel dengan contoh kod untuk membina a suapan tersuai dalam Shopify untuk MailChimp dan membuat beberapa suntingan untuk membersihkannya. Berikut adalah langkah-langkah untuk membina a suapan RSS tersuai dalam Shopify untuk blog anda.

  1. Navigasi ke anda Online Store dan pilih tema yang anda ingin letak suapan.
  2. Dalam menu Tindakan, pilih Edit Kod.
  3. Dalam menu Fail, navigasi ke Templat dan klik Tambah templat baharu.
  4. Dalam tetingkap Tambah templat baharu, pilih Buat templat baharu untuk blog.

Tambahkan suapan blog cair ke Shopify untuk Klaviyo

  1. Pilih Jenis templat bagi cecair.
  2. Untuk nama Fail, kami masukkan klaviyo.
  3. Dalam editor kod, letakkan kod 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. Kemas kini pembolehubah tersuai seperti yang diperlukan. Satu nota mengenai perkara ini ialah kami telah menetapkan saiz imej kepada lebar maksimum e-mel kami, lebar 600px. Berikut ialah jadual saiz imej Shopify:

Nama Imej Shopify Ukuran
Pico 16 piksel x 16 piksel
icon 32 piksel x 32 piksel
ibu jari 50 piksel x 50 piksel
kecil 100 piksel x 100 piksel
padat 160 piksel x 160 piksel
sederhana 240 piksel x 240 piksel
besar 480 piksel x 480 piksel
besar 600 piksel x 600 piksel
1024 X 1024 1024 piksel x 1024 piksel
2048 X 2048 2048 piksel x 2048 piksel
master Imej terbesar tersedia

  1. Suapan anda kini tersedia di alamat blog anda dengan rentetan pertanyaan dilampirkan untuk melihatnya. Dalam kes pelanggan kami, URL suapan ialah:

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

  1. Suapan anda kini sedia untuk digunakan! Jika anda mahu, anda boleh menavigasi ke dalam tetingkap penyemak imbas untuk memastikan tiada ralat. Kami akan memastikan ia dihuraikan dengan betul dalam langkah seterusnya:

Tambah Suapan Blog Anda Ke Klaviyo

Untuk menggunakan suapan blog baharu anda Klaviyo, anda perlu menambahkannya sebagai Suapan Data.

  1. Navigasi ke Suapan Data
  2. pilih Tambah Suapan Web
  3. Masukkan Nama Suapan (tiada ruang dibenarkan)
  4. Memasuki URL suapan yang baru awak buat.
  5. Masukkan Kaedah Permintaan sebagai GET
  6. Masukkan Jenis Kandungan sebagai XML

Klaviyo Tambah Suapan Blog XML Shopify

  1. Klik Kemas kini Suapan Data.
  2. Klik Preview untuk memastikan suapan diisi dengan betul.

Pratonton Suapan Blog Shopify dalam Klaviyo

Tambahkan Suapan Blog Anda Pada Templat E-mel Klaviyo Anda

Sekarang kami mahu membina blog kami ke dalam templat e-mel kami Klaviyo. Pada pendapat saya, dan sebab mengapa kami memerlukan suapan tersuai, saya suka kawasan kandungan berpecah di mana imej berada di sebelah kiri, tajuk dan petikan berada di bawah. Klaviyo juga mempunyai pilihan untuk meruntuhkan ini menjadi satu lajur pada peranti mudah alih.

  1. Seret a Blok Pisah ke dalam templat e-mel anda.
  2. Tetapkan lajur kiri anda kepada a Image dan lajur kanan anda ke a teks blok.

Klaviyo Split Block untuk Shopify Blog Post Articles

  1. Untuk imej, pilih Imej Dinamik dan tetapkan nilai kepada:

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

  1. Tetapkan Teks Alt kepada:

{{item.title}}

  1. Tetapkan Alamat Pautan supaya jika pelanggan e-mel mengklik pada imej, ia akan membawa mereka ke artikel anda.

{{item.link}}

  1. Pilih lajur kanan untuk menetapkan kandungan lajur.

Tajuk dan Penerangan Catatan Blog Klaviyo

  1. Tambah anda kandungan, pastikan anda menambah pautan pada tajuk anda dan masukkan petikan siaran 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 Tetapan Pisah tab.
  2. Tetapkan kepada a 40% / 60% susun atur untuk menyediakan lebih banyak ruang untuk teks.
  3. enable Timbunan pada Mudah Alih dan tetapkan Kanan ke kiri.

Klaviyo Split Block untuk Shopify Blog Post Artikel disusun pada Mudah Alih

  1. Pilih Memaparkan Pilihan tab.

Klaviyo Split Block untuk Pilihan Paparan Artikel Catatan Blog Shopify

  1. Pilih Content Repeat dan letakkan suapan yang anda buat dalam Klaviyo sebagai sumber dalam Ulang Untuk bidang:

feeds.Closet52_Blog.rss.channel.item

  1. Menetapkan Alias ​​item as item.
  2. Klik Pratonton dan ujian dan kini anda boleh melihat catatan blog anda. Pastikan anda mengujinya dalam kedua-dua mod desktop dan mudah alih.

Pratonton dan ujian Blok Pisah Klaviyo.

Dan, sudah tentu, jika anda memerlukan bantuan Shopify pengoptimuman dan Klaviyo pelaksanaan, jangan teragak-agak untuk menghubungi Highbridge.

Pendedahan: Saya rakan kongsi Highbridge dan saya menggunakan pautan gabungan saya untuk Shopify dan Klaviyo dalam artikel ini.