วิธีเผยแพร่ฟีดบล็อก Shopify ของคุณในเทมเพลตอีเมล Klaviyo ของคุณ

วิธีเผยแพร่ฟีดบล็อก Shopify ของคุณในเทมเพลตอีเมล Klaviyo

เรายังคงปรับปรุงและเพิ่มประสิทธิภาพของเราอย่างต่อเนื่อง ShopifyPlus ความพยายามทางการตลาดอีเมลของลูกค้าแฟชั่นโดยใช้ Klaviyo. Klaviyo มีการผสานรวมกับ Shopify อย่างแน่นหนา ซึ่งช่วยให้มีการสื่อสารเกี่ยวกับอีคอมเมิร์ซมากมายที่สร้างไว้ล่วงหน้าและพร้อมใช้งาน

น่าแปลกที่ใส่ .ของคุณ โพสต์บล็อกของ Shopify ลงในอีเมลไม่ใช่หนึ่งในนั้น! ทำให้สิ่งต่างๆ ยากขึ้น... เอกสารประกอบสำหรับการสร้างอีเมลนี้ไม่ละเอียดถี่ถ้วนและไม่ได้จัดทำเป็นเอกสารสำหรับตัวแก้ไขใหม่ล่าสุด ดังนั้น, Highbridge ต้องทำการขุดค้นและหาวิธีทำเอง… และมันไม่ง่ายเลย

นี่คือการพัฒนาที่จำเป็นในการทำให้สิ่งนี้เกิดขึ้น:

  1. บล็อกฟีด – ฟีดอะตอมที่ Shopify ให้มานั้นไม่ได้ให้การปรับแต่งใดๆ และไม่มีรูปภาพ ดังนั้นเราจึงต้องสร้างฟีด XML ที่กำหนดเอง
  2. ฟีดข้อมูล Klaviyo – ฟีด XML ที่เราสร้างขึ้นจำเป็นต้องรวมเป็นฟีดข้อมูลใน Klaviyo
  3. เทมเพลตอีเมล Klaviyo – จากนั้นเราจำเป็นต้องแยกวิเคราะห์ฟีดเป็นเทมเพลตอีเมลที่มีการจัดรูปแบบรูปภาพและเนื้อหาอย่างเหมาะสม

สร้างฟีดบล็อกที่กำหนดเองใน Shopify

ฉันสามารถหาบทความที่มีโค้ดตัวอย่างเพื่อสร้าง a ฟีดที่กำหนดเองใน Shopify for MailChimp และทำการแก้ไขเล็กน้อยเพื่อล้างข้อมูล นี่คือขั้นตอนในการสร้าง ฟีด RSS ที่กำหนดเอง ใน Shopify สำหรับบล็อกของคุณ

  1. ไปที่ของคุณ ร้านค้าออนไลน์ และเลือกธีมที่คุณต้องการวางฟีด
  2. ในเมนูการดำเนินการ เลือก แก้ไขรหัส.
  3. ในเมนูไฟล์ ให้ไปที่เทมเพลตแล้วคลิก เพิ่มเทมเพลตใหม่.
  4. ในหน้าต่างเพิ่มเทมเพลตใหม่ ให้เลือก สร้างเทมเพลตใหม่ for บล็อก.

เพิ่มฟีดบล็อกของเหลวใน Shopify สำหรับ Klaviyo

  1. เลือกประเภทเทมเพลตของ ของเหลว.
  2. สำหรับชื่อไฟล์เราป้อน Klaviyo.
  3. ในตัวแก้ไขโค้ด ให้วางโค้ดต่อไปนี้:

{%- 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. อัปเดตตัวแปรที่กำหนดเองตามความจำเป็น ข้อควรทราบประการหนึ่งเกี่ยวกับเรื่องนี้คือ เราได้กำหนดขนาดรูปภาพเป็นความกว้างสูงสุดของอีเมลของเรา กว้าง 600px นี่คือตารางขนาดรูปภาพของ Shopify:

Shopify ชื่อรูปภาพ ขนาด
Pico 16px x 16px
ไอคอน 32px x 32px
นิ้วหัวแม่มือ 50px x 50px
เล็ก 100px x 100px
กะทัดรัด 160px x 160px
กลาง 240px x 240px
ใหญ่ 480px x 480px
ยิ่งใหญ่ 600px x 600px
1024 1024 X 1024px x 1024px
2048 2048 X 2048px x 2048px
เจ้านาย ภาพที่ใหญ่ที่สุดที่มีอยู่

  1. ฟีดของคุณพร้อมใช้งานตามที่อยู่ของบล็อกแล้ว โดยจะมีสตริงการสืบค้นต่อท้ายเพื่อดู ในกรณีของลูกค้าของเรา URL ของฟีดคือ:

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

  1. ฟีดของคุณพร้อมใช้งานแล้ว! หากต้องการ คุณสามารถไปที่หน้าต่างเบราว์เซอร์ได้เพื่อให้แน่ใจว่าไม่มีข้อผิดพลาด เราจะตรวจสอบว่ามีการแยกวิเคราะห์อย่างถูกต้องในขั้นตอนต่อไป:

เพิ่มฟีดบล็อกของคุณลงใน Klaviyo

เพื่อใช้ฟีดบล็อกใหม่ของคุณใน Klaviyoคุณต้องเพิ่มเป็นฟีดข้อมูล

  1. นำทางไปยัง ฟีดข้อมูล
  2. เลือก เพิ่มฟีดเว็บ
  3. ป้อน ชื่อฟีด (ไม่อนุญาตให้มีช่องว่าง)
  4. ป้อน URL ฟีด ที่คุณเพิ่งสร้างขึ้น
  5. ป้อนวิธีการขอเป็น GET
  6. ป้อนประเภทเนื้อหาเป็น XML

Klaviyo เพิ่มฟีดบล็อก XML ของ Shopify

  1. คลิก อัปเดตฟีดข้อมูล.
  2. คลิก ดูตัวอย่าง เพื่อให้แน่ใจว่าฟีดมีการเติมข้อมูลอย่างถูกต้อง

ดูตัวอย่างฟีดบล็อกของ Shopify ใน Klaviyo

เพิ่มฟีดบล็อกของคุณไปยังเทมเพลตอีเมล Klaviyo ของคุณ

ตอนนี้เราต้องการสร้างบล็อกของเราลงในเทมเพลตอีเมลของเราใน Klaviyo. ในความคิดของฉัน และเหตุผลที่เราต้องการฟีดแบบกำหนดเอง ฉันชอบพื้นที่เนื้อหาแบบแยกส่วนโดยที่รูปภาพอยู่ทางซ้าย ชื่อเรื่องและข้อความที่ตัดตอนมาอยู่ด้านล่าง Klaviyo ยังมีตัวเลือกที่จะยุบสิ่งนี้เป็นคอลัมน์เดียวบนอุปกรณ์มือถือ

  1. ลาก แยกบล็อก ลงในเทมเพลตอีเมลของคุณ
  2. ตั้งค่าคอลัมน์ด้านซ้ายเป็น an ภาพ และคอลัมน์ขวาของคุณถึง a ข้อความ กลุ่ม

Klaviyo Split Block สำหรับบทความโพสต์บล็อกของ Shopify

  1. สำหรับรูปภาพ ให้เลือก ภาพพลวัต และตั้งค่าเป็น:

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

  1. ตั้งค่าข้อความแสดงแทนเป็น:

{{item.title}}

  1. ตั้งค่าที่อยู่ลิงก์เพื่อที่ว่าหากผู้สมัครสมาชิกอีเมลคลิกที่รูปภาพ ระบบจะนำพวกเขามาที่บทความของคุณ

{{item.link}}

  1. เลือก คอลัมน์ขวา เพื่อกำหนดเนื้อหาคอลัมน์

ชื่อโพสต์และคำอธิบายของบล็อก Klaviyo

  1. เพิ่มของคุณ เนื้อหาอย่าลืมเพิ่มลิงก์ไปยังชื่อของคุณและแทรกข้อความที่ตัดตอนมาจากบทความของคุณ

<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. เลือก แยกการตั้งค่า แถบ
  2. ตั้งเป็น เลย์เอาต์ 40% / 60% เพื่อให้มีพื้นที่สำหรับข้อความมากขึ้น
  3. ทำให้สามารถ สแต็คบนมือถือ และตั้งค่า จากขวาไปซ้าย.

Klaviyo Split Block สำหรับ Shopify Blog Post Articles stacked on Mobile

  1. เลือก แสดงตัวเลือก แถบ

Klaviyo Split Block สำหรับ Shopify Blog Post Articles Display Options

  1. เลือกการทำซ้ำเนื้อหาและใส่ฟีดที่คุณสร้างใน Klaviyo เป็นแหล่งที่มาใน ทำซ้ำสำหรับ สนาม:

feeds.Closet52_Blog.rss.channel.item

  1. ตั้ง นามแฝงรายการ as ชิ้น.
  2. คลิก ดูตัวอย่างและทดสอบ และตอนนี้คุณสามารถดูโพสต์ในบล็อกของคุณได้แล้ว อย่าลืมทดสอบทั้งในโหมดเดสก์ท็อปและมือถือ

Klaviyo Split Block ดูตัวอย่างและทดสอบ

และแน่นอน หากคุณต้องการความช่วยเหลือใน Shopify การเพิ่มประสิทธิภาพและ Klaviyo การใช้งานอย่าลังเลที่จะติดต่อ Highbridge.

การเปิดเผยข้อมูล: ฉันเป็นหุ้นส่วนใน Highbridge และฉันกำลังใช้ลิงค์พันธมิตรของฉันสำหรับ Shopify และ Klaviyo ในบทความนี้.