अपने Klaviyo ईमेल टेम्पलेट में अपना Shopify ब्लॉग फ़ीड कैसे प्रकाशित करें

हम अपने को बढ़ाना और अनुकूलित करना जारी रखते हैं Shopify प्लस फैशन क्लाइंट के ईमेल मार्केटिंग प्रयासों का उपयोग करना Klaviyo. Klaviyo has a solid integration with Shopify that enables a ton of e-commerce-related communications that are pre-built and ready to go.

हैरानी की बात है, अपना सम्मिलित करना Shopify ब्लॉग पोस्ट एक ईमेल में, हालांकि उनमें से एक नहीं है! चीजों को और भी कठिन बनाना... इस ईमेल को बनाने के लिए दस्तावेज पूरी तरह से नहीं हैं और यहां तक ​​कि उनके नवीनतम संपादक का दस्तावेजीकरण भी नहीं करते हैं। इसलिए, Highbridge कुछ खुदाई करनी थी और यह पता लगाना था कि इसे स्वयं कैसे करना है ... और यह आसान नहीं था।

ऐसा करने के लिए आवश्यक विकास यहां दिया गया है:

1. ब्लॉग फ़ीड - Shopify द्वारा प्रदान किया गया परमाणु फ़ीड कोई अनुकूलन प्रदान नहीं करता है और न ही इसमें चित्र शामिल हैं, इसलिए हमें एक कस्टम XML फ़ीड बनाना होगा।
2. क्लावियो डेटा फ़ीड - हमारे द्वारा निर्मित XML फ़ीड को Klaviyo में डेटा फ़ीड के रूप में एकीकृत करने की आवश्यकता है।
3. क्लावियो ईमेल टेम्प्लेट - इसके बाद हमें फ़ीड को एक ईमेल टेम्पलेट में पार्स करने की आवश्यकता होती है जहां छवियां और सामग्री ठीक से बनाई जाती है।

Shopify में एक कस्टम ब्लॉग फ़ीड बनाएं

मैं एक बनाने के लिए उदाहरण कोड के साथ एक लेख खोजने में सक्षम था custom feed in Shopify एसटी Mailchimp and made quite a few edits to clean it up. Here are the steps to build a कस्टम आरएसएस फ़ीड अपने ब्लॉग के लिए Shopify में।

1. अपने नेविगेट करें ऑनलाइन स्टोर और उस थीम का चयन करें जिसमें आप फ़ीड रखना चाहते हैं।
2. क्रियाएँ मेनू में, चुनें कोड संपादित करें.
3. फ़ाइलें मेनू में, टेम्प्लेट पर नेविगेट करें और क्लिक करें एक नया टेम्प्लेट जोड़ें.
4. एक नया टेम्पलेट जोड़ें विंडो में, चुनें एक नया टेम्प्लेट बनाएं एसटी ब्लॉग.

5. टेम्पलेट प्रकार का चयन करें तरल.
6. फ़ाइल नाम के लिए, हमने दर्ज किया klaviyo.
7. कोड संपादक में, निम्न कोड डालें:

{%- 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>

8. आवश्यकतानुसार कस्टम चर अपडेट करें। इस पर एक नोट यह है कि हमने छवि आकार को हमारे ईमेल की अधिकतम चौड़ाई, 600px चौड़ा पर सेट किया है। यहाँ Shopify के छवि आकारों की एक तालिका है:

Shopify छवि का नाम	आयाम
पीको	16px एक्स 16px
आइकॉन	32px एक्स 32px
अंगूठा	50px एक्स 50px
छोटा	100px एक्स 100px
सघन	160px एक्स 160px
मध्यम	240px एक्स 240px
बड़ा	480px एक्स 480px
महान	600px एक्स 600px
1024 एक्स 1024	1024px एक्स 1024px
2048 एक्स 2048	2048px एक्स 2048px
मास्टर	उपलब्ध सबसे बड़ी छवि

9. आपकी फ़ीड अब आपके ब्लॉग के पते पर उपलब्ध है और इसे देखने के लिए क्वेरीस्ट्रिंग संलग्न है। हमारे ग्राहक के मामले में, फ़ीड URL है:

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

10. आपका फ़ीड अब उपयोग के लिए तैयार है! यदि आप चाहें, तो यह सुनिश्चित करने के लिए कि कोई त्रुटि नहीं है, आप इसे ब्राउज़र विंडो में नेविगेट कर सकते हैं। हम यह सुनिश्चित करने जा रहे हैं कि यह हमारे अगले चरण में ठीक से पार्स हो:

Klaviyo में अपना ब्लॉग फ़ीड जोड़ें

अपने नए ब्लॉग फ़ीड का उपयोग करने के लिए Klaviyo, आपको इसे डेटा फ़ीड के रूप में जोड़ना होगा।

1. पर जाए डाटा फीड
2. चुनते हैं वेब फ़ीड जोड़ें
3. एक प्रवेश फ़ीड का नाम (कोई रिक्त स्थान की अनुमति नहीं है)
4. दर्ज करें फ़ीड यूआरएल जो आपने अभी बनाया है।
5. अनुरोध विधि इस प्रकार दर्ज करें GET
6. सामग्री प्रकार दर्ज करें: एक्सएमएल

7. क्लिक करें डेटा फ़ीड अपडेट करें.
8. क्लिक करें पूर्वावलोकन यह सुनिश्चित करने के लिए कि फ़ीड सही ढंग से आबाद हो रहा है।

अपने क्लावियो ईमेल टेम्पलेट में अपना ब्लॉग फ़ीड जोड़ें

अब हम अपने ब्लॉग को अपने ईमेल टेम्पलेट में बनाना चाहते हैं Klaviyo. मेरी राय में, और जिस कारण से हमें एक कस्टम फ़ीड की आवश्यकता है, मुझे एक विभाजित सामग्री क्षेत्र पसंद है जहां छवि बाईं ओर है, शीर्षक और अंश नीचे है। Klaviyo के पास मोबाइल डिवाइस पर इसे एक कॉलम में संक्षिप्त करने का विकल्प भी है।

1. खींचें a स्प्लिट ब्लॉक अपने ईमेल टेम्पलेट में।
2. अपने बाएँ स्तंभ को a . पर सेट करें छवि और आपका दायां कॉलम a टेक्स्ट ब्लॉक।

3. छवि के लिए, चुनें गतिशील छवि और मान को इस पर सेट करें:

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

4. Alt टेक्स्ट को इस पर सेट करें:

{{item.title}}

5. लिंक पता सेट करें ताकि यदि ईमेल ग्राहक छवि पर क्लिक करता है, तो वह उन्हें आपके लेख पर लाएगा।

{{item.link}}

6. चयन दक्षिण पक्ष क़तार कॉलम सामग्री सेट करने के लिए।

7. आपका जोड़ें सामग्री, अपने शीर्षक के लिए एक लिंक जोड़ना सुनिश्चित करें और अपना पोस्ट अंश डालें।

<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>

8. चयन स्प्लिट सेटिंग्स टैब.
9. एक पर सेट करें 40% / 60% लेआउट पाठ के लिए अधिक जगह प्रदान करने के लिए।
10. सक्षम मोबाइल पर ढेर और सेट करें दाएं से बाएं.

11. चयन विकल्प प्रदर्शित टैब.

12. कंटेंट रिपीट का चयन करें और क्लावियो में आपके द्वारा बनाए गए फ़ीड को स्रोत के रूप में डालें के लिए दोहराएँ खेत:

feeds.Closet52_Blog.rss.channel.item

13. ठीक आइटम उपनाम as मद.
14. क्लिक करें पूर्वावलोकन और परीक्षण और अब आप अपने ब्लॉग पोस्ट देख सकते हैं। डेस्कटॉप और मोबाइल दोनों मोड में इसका परीक्षण करना सुनिश्चित करें।

और, ज़ाहिर है, अगर आपको सहायता की ज़रूरत है Shopify अनुकूलन और Klaviyo कार्यान्वयन, तक पहुँचने में संकोच न करें Highbridge.

प्रकटीकरण: मैं एक भागीदार हूं Highbridge और मैं अपने सहबद्ध लिंक का उपयोग कर रहा हूँ Shopify और Klaviyo इस लेख में।