Paano I-publish ang Iyong Shopify Blog Feed Sa Iyong Klaviyo Email Template

Paano I-publish ang Iyong Shopify Blog Feed Sa Iyong Klaviyo Email Template

Patuloy naming pinapahusay at ino-optimize ang aming ShopifyPlus mga pagsusumikap sa marketing ng email ng fashion client gamit ang Klaviyo. Ang Klaviyo ay may matatag na integrasyon sa Shopify na nagbibigay-daan sa isang tonelada ng mga komunikasyong nauugnay sa e-commerce na pre-built at handa nang gamitin.

Nakakagulat, ang pagpasok ng iyong Mga Post sa Blog ng Shopify sa isang email ay HINDI isa sa kanila, bagaman! Ginagawang mas mahirap ang mga bagay-bagay... ang dokumentasyon para sa pagbuo ng email na ito ay hindi kumpleto at hindi man lang nagdodokumento ng kanilang pinakabagong editor. Kaya, Highbridge kinailangang gumawa ng ilang paghuhukay at pag-isipan kung paano ito gagawin sa ating mga sarili... at hindi ito naging madali.

Narito ang pag-unlad na kinakailangan upang magawa ito:

  1. Feed ng Blog – Ang atom feed na ibinigay ng Shopify ay hindi nagbibigay ng anumang pag-customize at hindi rin kasama ang mga larawan, kaya kailangan naming bumuo ng custom na XML feed.
  2. Klaviyo Data Feed – Ang XML feed na aming binuo ay kailangang isama bilang isang data feed sa Klaviyo.
  3. Klaviyo Email Template – Kailangan naming i-parse ang feed sa isang template ng email kung saan ang mga larawan at nilalaman ay maayos na na-format.

Bumuo ng Custom na Blog Feed Sa Shopify

Nakahanap ako ng isang artikulo na may halimbawang code upang bumuo ng isang custom na feed sa Shopify para Mailchimp at gumawa ng ilang mga pag-edit upang linisin ito. Narito ang mga hakbang sa pagbuo ng a pasadyang RSS feed sa Shopify para sa iyong blog.

  1. Mag-navigate sa iyong Online Store at piliin ang tema na gusto mong ilagay ang feed.
  2. Sa menu ng Mga Pagkilos, piliin I-edit ang Code.
  3. Sa menu ng Mga File, mag-navigate sa Mga Template at i-click Magdagdag ng bagong template.
  4. Sa window na Magdagdag ng bagong template, piliin Gumawa ng bagong template para Blog.

Magdagdag ng likidong feed ng blog sa Shopify para sa Klaviyo

  1. Piliin ang Uri ng template ng likido.
  2. Para sa pangalan ng File, ipinasok namin klaviyo.
  3. Sa editor ng code, ilagay ang sumusunod na code:

{%- 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. I-update ang mga custom na variable kung kinakailangan. Ang isang tala dito ay itinakda namin ang laki ng larawan sa max na lapad ng aming mga email, 600px ang lapad. Narito ang isang talahanayan ng mga laki ng larawan ng Shopify:

Pangalan ng Larawan ng Shopify Mga Dimensyon
Pico 16px x 16px
icon 32px x 32px
hinlalaki 50px x 50px
maliit 100px x 100px
siksik 160px x 160px
medium 240px x 240px
malaki 480px x 480px
dakila 600px x 600px
1024 1024 X 1024px x 1024px
2048 2048 X 2048px x 2048px
panginoon Pinakamalaking larawan na magagamit

  1. Available na ngayon ang iyong feed sa address ng iyong blog na may nakadugtong na querystring upang tingnan ito. Sa kaso ng aming kliyente, ang URL ng feed ay:

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

  1. Handa nang gamitin ang iyong feed! Kung gusto mo, maaari kang mag-navigate dito sa isang browser window upang matiyak na walang mga error. Sisiguraduhin naming maayos itong na-parse sa aming susunod na hakbang:

Idagdag ang Iyong Blog Feed Sa Klaviyo

Upang magamit ang iyong bagong blog feed sa Klaviyo, kailangan mong idagdag ito bilang Feed ng Data.

  1. Mag-navigate sa Mga feed ng Data
  2. piliin Magdagdag ng Web Feed
  3. Magpasok ng isang Pangalan ng Feed (walang puwang ang pinapayagan)
  4. Ipasok ang URL ng feed na nilikha mo lang.
  5. Ipasok ang Paraan ng Kahilingan bilang GET
  6. Ilagay ang Uri ng Nilalaman bilang XML

Klaviyo Magdagdag ng Shopify XML Blog Feed

  1. I-click ang I-update ang Feed ng Data.
  2. I-click ang Preview upang matiyak na ang feed ay namumuo nang tama.

Silipin ang Shopify Blog Feed sa Klaviyo

Idagdag ang Iyong Blog Feed Sa Iyong Klaviyo Email Template

Ngayon gusto naming buuin ang aming blog sa aming email template sa Klaviyo. Sa palagay ko, at ang dahilan kung bakit kailangan namin ng custom na feed, gusto ko ang split content area kung saan nasa kaliwa ang larawan, nasa ibaba ang pamagat at sipi. May opsyon din si Klaviyo na i-collapse ito sa isang column sa isang mobile device.

  1. I-drag a Hatiin ang Block sa iyong email template.
  2. Itakda ang iyong kaliwang column sa isang Imahen at ang iyong kanang hanay sa a teksto harangan.

Klaviyo Split Block para sa Shopify Blog Post Articles

  1. Para sa larawan, piliin Dynamic na Larawan at itakda ang halaga sa:

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

  1. Itakda ang Alt Text sa:

{{item.title}}

  1. Itakda ang Link Address upang kung mag-click ang email subscriber sa larawan, dadalhin sila nito sa iyong artikulo.

{{item.link}}

  1. Piliin ang kanang hanay upang itakda ang nilalaman ng hanay.

Klaviyo Blog Post Pamagat at Paglalarawan

  1. Idagdag ang iyong nilalaman, siguraduhing magdagdag ng link sa iyong pamagat at ilagay ang sipi ng iyong post.

<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. Piliin ang Mga Split Setting Tab.
  2. Itakda sa a 40% / 60% layout para magbigay ng mas maraming espasyo para sa text.
  3. Paganahin Stack sa Mobile at itakda Kanan sa Kaliwa.

Klaviyo Split Block para sa Shopify Blog Post Articles na nakasalansan sa Mobile

  1. Piliin ang Mga Pagpipilian sa Display Tab.

Klaviyo Split Block para sa Shopify Blog Post Articles Display Options

  1. Piliin ang Content Repeat at ilagay ang feed na ginawa mo sa Klaviyo bilang source sa Ulitin Para sa bukid

feeds.Closet52_Blog.rss.channel.item

  1. Itakda ang alias ng item as bagay.
  2. I-click ang I-preview at subukan at makikita mo na ang iyong mga post sa blog. Tiyaking subukan ito sa desktop at mobile mode.

Klaviyo Split Block Preview at pagsubok.

At, siyempre, kung kailangan mo ng tulong sa Shopify pag-optimize at Klaviyo mga pagpapatupad, huwag mag-atubiling makipag-ugnayan sa Highbridge.

Pagbubunyag: Kasosyo ako sa Highbridge at ginagamit ko ang aking mga kaakibat na link para sa Shopify at Klaviyo sa artikulong ito.