כיצד לפרסם את עדכון הבלוג של Shopify שלך בתבנית הדוא"ל שלך ב- Klaviyo

כיצד לפרסם את עדכון הבלוג של Shopify שלך בתבנית הדוא"ל שלך ב- Klaviyo

אנחנו ממשיכים לשפר ולייעל את שלנו Shopify פלוס מאמצי השיווק בדוא"ל של לקוח אופנה באמצעות קלוויו. ל- Klaviyo יש אינטגרציה מוצקה עם Shopify המאפשרת המון תקשורת הקשורה למסחר אלקטרוני שנבנו מראש ומוכנים לשימוש.

באופן מפתיע, מכניס את שלך פוסטים בבלוג של Shopify עם זאת, לתוך אימייל הוא לא אחד מהם! מה שמקשה עוד יותר... התיעוד לבניית האימייל הזה אינו יסודי ואפילו לא מתעד את העורך החדש שלהם. כך, Highbridge היה צריך לחפור קצת ולהבין איך לעשות את זה בעצמנו... וזה לא היה קל.

להלן הפיתוח הדרוש כדי לגרום לזה לקרות:

  1. עדכון בלוגים – פיד האטום שמסופק על ידי Shopify אינו מספק התאמה אישית ואינו כולל תמונות, ולכן עלינו לבנות עדכון XML מותאם אישית.
  2. פיד נתונים של Klaviyo – פיד ה-XML שבנינו צריך להיות משולב כפיד נתונים ב- Klaviyo.
  3. תבנית דוא"ל של Klaviyo - לאחר מכן עלינו לנתח את הפיד לתבנית דוא"ל שבה התמונות והתוכן מעוצבים כראוי.

בנה עדכון בלוג מותאם אישית ב-Shopify

הצלחתי למצוא מאמר עם קוד לדוגמה לבניית א עדכון מותאם אישית ב-Shopify ל MailChimp וביצע לא מעט עריכות כדי לנקות אותו. להלן השלבים לבניית א הזנת RSS מותאמת אישית ב-Shopify עבור הבלוג שלך.

  1. נווט אל חנות מקוונת ובחר את הנושא שבו תרצה למקם את העדכון.
  2. בתפריט פעולות, בחר ערוך קוד.
  3. בתפריט קבצים, נווט אל תבניות ולחץ הוסף תבנית חדשה.
  4. בחלון הוסף תבנית חדשה, בחר צור תבנית חדשה ל בלוג.

הוסף עדכון בלוג נוזלי ל- Shopify for 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. עדכן את המשתנים המותאמים אישית לפי הצורך. הערה אחת בעניין זה היא שהגדרנו את גודל התמונה לרוחב המרבי של המיילים שלנו, ברוחב של 600 פיקסלים. להלן טבלה של גדלי התמונות של 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 X 1024 1024px x 1024px
2048 X 2048 2048px x 2048px
אב התמונה הגדולה ביותר שקיימת

  1. העדכון שלך זמין כעת בכתובת הבלוג שלך עם מחרוזת השאילתה מצורפת כדי להציג אותו. במקרה של הלקוח שלנו, כתובת האתר של העדכון היא:

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

  1. הפיד שלך מוכן כעת לשימוש! אם תרצה, תוכל לנווט אליו בחלון דפדפן כדי לוודא שאין שגיאות. אנחנו הולכים להבטיח שהוא מנותח כראוי בשלב הבא שלנו:

הוסף את עדכון הבלוג שלך לתוך Klaviyo

כדי להשתמש בעדכון הבלוג החדש שלך קלוויו, עליך להוסיף אותו כהזנת נתונים.

  1. נווט אל הזנות נתונים
  2. בחר הוסף עדכון אינטרנט
  3. הזן שם הזנה (אין להכניס רווחים)
  4. הזן כתובת אתר של עדכון שזה עתה יצרת.
  5. הזן את שיטת הבקשה כ לקבל
  6. הזן את סוג התוכן כ XML

Klaviyo הוסף עדכון בלוג של Shopify XML

  1. נְקִישָׁה עדכן את עדכון הנתונים.
  2. נְקִישָׁה תצוגה מקדימה כדי להבטיח שהפיד מאוכלס כהלכה.

תצוגה מקדימה של עדכון הבלוג של Shopify ב-Klaviyo

הוסף את עדכון הבלוג שלך לתבנית הדוא"ל של Klaviyo שלך

עכשיו אנחנו רוצים לבנות את הבלוג שלנו לתוך תבנית הדוא"ל שלנו קלוויו. לדעתי, והסיבה שבגללה היינו צריכים פיד מותאם אישית, אני אוהב אזור תוכן מפוצל שבו התמונה משמאל, הכותרת והקטע מתחת. ל- Klaviyo יש גם אפשרות לכווץ את זה לעמודה אחת במכשיר נייד.

  1. גרור א בלוק מפוצל לתוך תבנית האימייל שלך.
  2. הגדר את העמודה השמאלית שלך ל-an תמונה והעמודה הימנית שלך לא טקסט לַחסוֹם.

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. בחר פיצול הגדרות TAB.
  2. הגדר ל-a פריסה של 40% / 60%. כדי לספק יותר מקום לטקסט.
  3. אפשר מחסנית בנייד ולהגדיר מימין לשמאל.

Klaviyo Split Block עבור מאמרי פוסט בלוג של Shopify מוערמים בנייד

  1. בחר הצגת אפשרויות TAB.

Klaviyo Split Block עבור Shopify פוסטים בבלוג אפשרויות תצוגה

  1. בחר Content Repeat והכנס את העדכון שיצרת ב- Klaviyo כמקור ב- חזור על שדה:

feeds.Closet52_Blog.rss.channel.item

  1. הגדר את כינוי פריט as פריט.
  2. נְקִישָׁה תצוגה מקדימה ובדיקה וכעת אתה יכול לראות את הפוסטים שלך בבלוג. הקפד לבדוק את זה הן במצב שולחן העבודה והן במצב נייד.

תצוגה מקדימה ובדיקה של Klaviyo Split Block.

וכמובן, אם אתה צריך עזרה Shopify אופטימיזציה ו קלוויו יישומים, אל תהססו לפנות אליהם Highbridge.

גילוי נאות: אני שותף ל Highbridge ואני משתמש בקישורי השותפים שלי עבור Shopify ו קלוויו במאמר זה.