Cách xuất bản nguồn cấp dữ liệu blog Shopify của bạn trong mẫu email Klaviyo của bạn

Cách xuất bản nguồn cấp dữ liệu blog Shopify của bạn trong mẫu email Klaviyo của bạn

Chúng tôi tiếp tục nâng cao và tối ưu hóa ShopifyPlus những nỗ lực tiếp thị qua email của khách hàng thời trang bằng cách sử dụng Klaviyo. Klaviyo có sự tích hợp vững chắc với Shopify cho phép hàng loạt thông tin liên quan đến thương mại điện tử được tạo sẵn và sẵn sàng hoạt động.

Đáng ngạc nhiên, việc chèn của bạn Shopify các bài đăng trên blog vào một email KHÔNG phải là một trong số họ, mặc dù! Làm cho mọi thứ thậm chí còn khó khăn hơn… tài liệu để xây dựng email này không kỹ lưỡng và thậm chí không ghi lại trình soạn thảo mới nhất của họ. Cho nên, Highbridge đã phải đào sâu và tự tìm ra cách thực hiện… và điều đó không hề dễ dàng.

Đây là sự phát triển cần thiết để biến điều này thành hiện thực:

  1. Nguồn cấp dữ liệu blog - Nguồn cấp dữ liệu nguyên tử do Shopify cung cấp không cung cấp bất kỳ tùy chỉnh nào cũng như không bao gồm hình ảnh, vì vậy chúng tôi phải tạo nguồn cấp dữ liệu XML tùy chỉnh.
  2. Nguồn cấp dữ liệu Klaviyo - Nguồn cấp dữ liệu XML mà chúng tôi đã xây dựng cần được tích hợp làm nguồn cấp dữ liệu trong Klaviyo.
  3. Mẫu email Klaviyo - Sau đó, chúng ta cần phân tích cú pháp nguồn cấp dữ liệu thành một mẫu email nơi hình ảnh và nội dung được định dạng đúng.

Xây dựng nguồn cấp dữ liệu blog tùy chỉnh trong Shopify

Tôi đã có thể tìm thấy một bài báo với mã ví dụ để xây dựng một nguồn cấp dữ liệu tùy chỉnh trong Shopify cho Mailchimp và thực hiện một số chỉnh sửa để làm sạch nó. Dưới đây là các bước để xây dựng một nguồn cấp dữ liệu RSS tùy chỉnh trong Shopify cho blog của bạn.

  1. Điều hướng đến Online Store và chọn chủ đề bạn muốn đặt nguồn cấp dữ liệu.
  2. Trong menu Tác vụ, hãy chọn Chỉnh sửa mã.
  3. Trong menu Tệp, điều hướng đến Mẫu và nhấp vào Thêm một mẫu mới.
  4. Trong cửa sổ Thêm mẫu mới, hãy chọn Tạo một mẫu mới cho Blog của chúng tôi..

Thêm nguồn cấp dữ liệu blog lỏng vào Shopify cho Klaviyo

  1. Chọn loại mẫu của chất lỏng.
  2. Đối với tên tệp, chúng tôi đã nhập klaviyo.
  3. Trong trình chỉnh sửa mã, hãy đặt mã sau:

{%- 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. Cập nhật các biến tùy chỉnh nếu cần. Một lưu ý về điều này là chúng tôi đã đặt kích thước hình ảnh thành chiều rộng tối đa của email của chúng tôi, rộng 600px. Đây là bảng kích thước hình ảnh của Shopify:

Shopify tên hình ảnh Kích thước
pico 16px x 16px
biểu tượng 32px x 32px
ngón tay cái 50px x 50px
nhỏ 100px x 100px
nhỏ gọn 160px x 160px
Trung bình 240px x 240px
lớn 480px x 480px
tuyệt vời 600px x 600px
1024 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
chủ Hình ảnh lớn nhất hiện có

  1. Nguồn cấp dữ liệu của bạn hiện có sẵn tại địa chỉ blog của bạn với chuỗi truy vấn được thêm vào để xem nó. Trong trường hợp của khách hàng của chúng tôi, URL nguồn cấp dữ liệu là:

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

  1. Nguồn cấp dữ liệu của bạn hiện đã sẵn sàng để sử dụng! Nếu muốn, bạn có thể điều hướng đến nó trong cửa sổ trình duyệt để đảm bảo không có lỗi. Chúng tôi sẽ đảm bảo nó phân tích cú pháp đúng trong bước tiếp theo của chúng tôi:

Thêm nguồn cấp dữ liệu blog của bạn vào Klaviyo

Để sử dụng nguồn cấp dữ liệu blog mới của bạn trong Klaviyo, bạn phải thêm nó làm Nguồn cấp dữ liệu.

  1. Hướng đến Nguồn cấp dữ liệu
  2. Chọn Thêm nguồn cấp web
  3. Nhập Tên nguồn cấp dữ liệu (không được phép có khoảng trắng)
  4. Nhập URL nguồn cấp dữ liệu mà bạn vừa tạo.
  5. Nhập Phương thức Yêu cầu là GET
  6. Nhập Loại Nội dung là XML

Klaviyo Thêm Nguồn cấp dữ liệu Blog Shopify XML

  1. Nhấp chuột Cập nhật nguồn cấp dữ liệu.
  2. Nhấp chuột Xem trước để đảm bảo nguồn cấp dữ liệu được điền chính xác.

Xem trước Nguồn cấp dữ liệu blog của Shopify trong Klaviyo

Thêm nguồn cấp dữ liệu blog của bạn vào mẫu email Klaviyo của bạn

Bây giờ chúng tôi muốn xây dựng blog của mình thành mẫu email của chúng tôi trong Klaviyo. Theo ý kiến ​​của tôi, và lý do tại sao chúng tôi cần một nguồn cấp dữ liệu tùy chỉnh, tôi thích một khu vực nội dung được chia nhỏ trong đó hình ảnh ở bên trái, tiêu đề và đoạn trích ở bên dưới. Klaviyo cũng có tùy chọn thu gọn cột này thành một cột duy nhất trên thiết bị di động.

  1. Kéo một Chia khối vào mẫu email của bạn.
  2. Đặt cột bên trái của bạn thành một Hình ảnh và cột bên phải của bạn đến một bản văn khối.

Klaviyo Split Block cho Shopify Blog Post Bài viết

  1. Đối với hình ảnh, hãy chọn Hình ảnh động và đặt giá trị thành:

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

  1. Đặt Văn bản Thay thế thành:

{{item.title}}

  1. Đặt Địa chỉ liên kết để nếu người đăng ký email nhấp vào hình ảnh, nó sẽ đưa họ đến bài viết của bạn.

{{item.link}}

  1. Chọn hình ba gạch Cột bên phải để thiết lập nội dung cột.

Tiêu đề và mô tả bài đăng trên blog Klaviyo

  1. Thêm của bạn nội dung, hãy đảm bảo thêm liên kết vào tiêu đề của bạn và chèn đoạn trích bài đăng của bạn.

<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. Chọn hình ba gạch Cài đặt tách tab.
  2. Đặt thành Bố cục 40% / 60% để cung cấp thêm chỗ cho văn bản.
  3. Kích hoạt tính năng Ngăn xếp trên thiết bị di động và thiết lập Phải sang trái.

Klaviyo Split Block for Shopify Blog Post Các bài viết được xếp chồng lên nhau trên thiết bị di động

  1. Chọn hình ba gạch Tùy chọn hiển thị tab.

Klaviyo Split Block cho Shopify Blog Đăng bài viết Tùy chọn hiển thị

  1. Chọn Lặp lại nội dung và đặt nguồn cấp dữ liệu mà bạn đã tạo trong Klaviyo làm nguồn trong Lặp lại cho cánh đồng:

feeds.Closet52_Blog.rss.channel.item

  1. Đặt Bí danh mặt hàng as mục.
  2. Nhấp chuột Xem trước và kiểm tra và bây giờ bạn có thể xem các bài đăng trên blog của mình. Đảm bảo kiểm tra nó ở cả chế độ máy tính để bàn và thiết bị di động.

Klaviyo Split Block Xem trước và kiểm tra.

Và tất nhiên, nếu bạn cần hỗ trợ Shopify tối ưu hóa và Klaviyo triển khai, đừng ngần ngại liên hệ với Highbridge.

Tiết lộ: Tôi là đối tác trong Highbridge và tôi đang sử dụng các liên kết liên kết của mình cho ShopifyKlaviyo trong bài báo này.