तपाइँको Klaviyo इमेल टेम्प्लेटमा तपाइँको Shopify ब्लग फिड कसरी प्रकाशित गर्ने

तपाइँको Klaviyo इमेल टेम्प्लेटमा तपाइँको Shopify ब्लग फिड कसरी प्रकाशित गर्ने

हामी हाम्रो सुधार र अनुकूलन गर्न जारी राख्छौं शॉपिफाई प्लस फेसन ग्राहकको इमेल मार्केटिङ प्रयासहरू प्रयोग गरेर Klaviyo। Klaviyo सँग Shopify सँग ठोस एकीकरण छ जसले ई-वाणिज्य-सम्बन्धित संचारहरूको एक टन सक्षम गर्दछ जुन पूर्व-निर्मित र जानको लागि तयार छ।

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

यो हुनको लागि आवश्यक विकास यहाँ छ:

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

Shopify मा कस्टम ब्लग फिड बनाउनुहोस्

मैले उदाहरण कोडको साथ एउटा लेख फेला पार्न सक्षम भएँ a निर्माण गर्न Shopify मा अनुकूलन फिड लागि MailChimp र यसलाई सफा गर्न धेरै सम्पादनहरू गरे। यहाँ एक निर्माण गर्न चरणहरू छन् अनुकूलन RSS फिड तपाईंको ब्लगको लागि Shopify मा।

  1. तपाईंको नेभिगेट गर्नुहोस् अनलाइन स्टोर र तपाईंले फिड राख्न चाहनुभएको विषयवस्तु चयन गर्नुहोस्।
  2. कार्य मेनुमा, चयन गर्नुहोस् कोड सम्पादन गर्नुहोस्.
  3. फाइल मेनुमा, टेम्प्लेटहरूमा नेभिगेट गर्नुहोस् र क्लिक गर्नुहोस् नयाँ टेम्प्लेट थप्नुहोस्.
  4. नयाँ टेम्प्लेट सञ्झ्याल थप्नुहोस्, चयन गर्नुहोस् नयाँ टेम्प्लेट सिर्जना गर्नुहोस् लागि ब्लग.

Klaviyo को लागि Shopify मा तरल ब्लग फिड थप्नुहोस्

  1. टेम्प्लेट प्रकार चयन गर्नुहोस् तरल.
  2. फाइल नामको लागि, हामीले प्रविष्ट गर्यौं क्लावीयो.
  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 छवि नाम आयाम
चोटी 16 16px x XNUMXppx
प्रतिमा 32 32px x XNUMXppx
औंठी 50 50px x XNUMXppx
सानो 100 100px x XNUMXppx
संकुचित 160 160px x XNUMXppx
मध्यम 240 240px x XNUMXppx
ठूलो 480 480px x XNUMXppx
grande 600 600px x XNUMXppx
1024 एक्स 1024 1024 1024px x XNUMXppx
2048 एक्स 2048 2048 2048px x XNUMXppx
मास्टर सबैभन्दा ठूलो छवि उपलब्ध छ

  1. तपाइँको फिड अब तपाइँको ब्लग को ठेगाना मा यो हेर्न को लागी जोडिएको क्वेरीस्ट्रिंग संग उपलब्ध छ। हाम्रो ग्राहकको मामलामा, फिड URL हो:

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

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

Klaviyo मा आफ्नो ब्लग फिड थप्नुहोस्

तपाईंको नयाँ ब्लग फिड प्रयोग गर्नको लागि Klaviyo, तपाईंले यसलाई डाटा फिडको रूपमा थप्नुपर्छ।

  1. नेभिगेट गर्नुहोस् डाटा फिडहरू
  2. चयन गर्नुहोस् वेब फिड थप्नुहोस्
  3. एउटा प्रविष्ट गर्नुहोस् फिड नाम (कुनै ठाउँ अनुमति छैन)
  4. प्रविष्ट गर्नुहोस् फिड URL जुन तपाईंले भर्खरै सिर्जना गर्नुभयो।
  5. यस रूपमा अनुरोध विधि प्रविष्ट गर्नुहोस् प्राप्त
  6. यस रूपमा सामग्री प्रकार प्रविष्ट गर्नुहोस् XML

Klaviyo Shopify XML ब्लग फिड थप्नुहोस्

  1. क्लिक गर्नुहोस् डाटा फिड अपडेट गर्नुहोस्.
  2. क्लिक गर्नुहोस् पूर्वावलोकन फिड सही रूपमा भरिएको सुनिश्चित गर्न।

Klaviyo मा Shopify ब्लग फिड पूर्वावलोकन गर्नुहोस्

तपाइँको ब्लग फिड तपाइँको Klaviyo इमेल टेम्प्लेटमा थप्नुहोस्

अब हामी हाम्रो इमेल टेम्प्लेटमा हाम्रो ब्लग निर्माण गर्न चाहन्छौं Klaviyo। मेरो विचारमा, र किन हामीलाई अनुकूलन फिड चाहिन्छ, मलाई एक विभाजित सामग्री क्षेत्र मन पर्छ जहाँ छवि बायाँमा छ, शीर्षक र अंश तल छ। Klaviyo सँग मोबाइल उपकरणमा एकल स्तम्भमा यसलाई संक्षिप्त गर्ने विकल्प पनि छ।

  1. तान्नुहोस् a विभाजन ब्लक तपाईको इमेल टेम्प्लेटमा।
  2. आफ्नो बायाँ स्तम्भ एक मा सेट गर्नुहोस् छवि र तपाईंको दायाँ स्तम्भ a मा पाठ रोक्नुहोस्

Shopify ब्लग पोस्ट लेखहरूको लागि Klaviyo विभाजन ब्लक

  1. छविको लागि, चयन गर्नुहोस् गतिशील छवि र मान सेट गर्नुहोस्:

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

  1. Alt पाठ यसमा सेट गर्नुहोस्:

{{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. a मा सेट गर्नुहोस् 40% / 60% लेआउट पाठको लागि थप ठाउँ प्रदान गर्न।
  3. सक्रिय गर्नुहोस् मोबाइलमा स्ट्याक गर्नुहोस् र सेट दाँया देखि बाँया.

मोबाइलमा स्ट्याक गरिएको Shopify ब्लग पोस्ट लेखहरूको लागि Klaviyo स्प्लिट ब्लक

  1. चयन गर्नुहोस् प्रदर्शन विकल्पहरू ट्याब

Shopify ब्लग पोस्ट लेख प्रदर्शन विकल्पहरूको लागि Klaviyo विभाजन ब्लक

  1. सामग्री दोहोर्याउनुहोस् चयन गर्नुहोस् र तपाईंले क्लाभियोमा सिर्जना गर्नुभएको फिडलाई स्रोतको रूपमा राख्नुहोस् लागि दोहोर्याउनुहोस् क्षेत्र:

feeds.Closet52_Blog.rss.channel.item

  1. सेट गर्नुहोस् वस्तु उपनाम as वस्तु.
  2. क्लिक गर्नुहोस् पूर्वावलोकन र परीक्षण र तपाईं अब आफ्नो ब्लग पोस्टहरू हेर्न सक्नुहुन्छ। यसलाई डेस्कटप र मोबाइल मोडमा परीक्षण गर्न निश्चित हुनुहोस्।

Klaviyo स्प्लिट ब्लक पूर्वावलोकन र परीक्षण।

र, अवश्य पनि, यदि तपाईंलाई सहयोग चाहिन्छ भने Shopify अनुकूलन र Klaviyo कार्यान्वयन, पहुँच गर्न नहिचकिचाउनुहोस् Highbridge.

खुलासा: म यसका साथी हुँ Highbridge र म मेरो सम्बद्ध लिङ्कहरू प्रयोग गर्दैछु ShopifyKlaviyo यस लेखमा।