Jak opublikować kanał bloga Shopify w szablonie wiadomości e-mail Klaviyo?

Nieustannie ulepszamy i optymalizujemy nasze ShopifyPlus e-mailowe działania klienta mody przy użyciu Klaviyo. Klaviyo ma solidną integrację z Shopify, która umożliwia mnóstwo komunikacji związanej z e-commerce, która jest wstępnie zbudowana i gotowa do działania.

Co zaskakujące, wstawiając swój Posty na blogu Shopify do e-maila NIE jest jednym z nich! Jeszcze trudniejsze sprawy… dokumentacja do tworzenia tego e-maila nie jest dokładna i nie opisuje nawet najnowszego edytora. Więc, Highbridge musieliśmy trochę kopać i wymyślić, jak to zrobić sami… i nie było to łatwe.

Oto rozwój niezbędny, aby tak się stało:

1. Kanał blogu – Kanał atomowy dostarczony przez Shopify nie zapewnia żadnych dostosowań ani nie zawiera obrazów, więc musimy zbudować niestandardowy kanał XML.
2. Kanał danych Klaviyo – Zbudowany przez nas kanał XML musi być zintegrowany jako źródło danych w Klaviyo.
3. Szablon e-mail Klaviyo – Następnie musimy przeanalizować feed do szablonu wiadomości e-mail, w którym obrazy i treść są odpowiednio sformatowane.

Zbuduj niestandardowy kanał bloga w Shopify

Udało mi się znaleźć artykuł z przykładowym kodem do zbudowania niestandardowy kanał w Shopify dla MailChimp i dokonał kilku zmian, aby to wyczyścić. Oto kroki, aby zbudować niestandardowy kanał RSS w Shopify na swoim blogu.

1. Przejdź do swojego Sklep internetowy i wybierz motyw, w którym chcesz umieścić kanał.
2. W menu Czynności wybierz Edytuj kod.
3. W menu Pliki przejdź do Szablony i kliknij Dodaj nowy szablon.
4. W oknie Dodaj nowy szablon wybierz Utwórz nowy szablon dla blog.

5. Wybierz typ szablonu z ciecz.
6. Jako nazwę pliku wprowadziliśmy klawijo.
7. W edytorze kodu umieść następujący kod:

{%- 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. W razie potrzeby zaktualizuj zmienne niestandardowe. Jedna uwaga na ten temat jest taka, że ​​ustawiliśmy rozmiar obrazu na maksymalną szerokość naszych e-maili, szerokość 600 pikseli. Oto tabela rozmiarów obrazów Shopify:

Shopify Nazwa obrazu	wymiary
pico	16px x 16px
ikona	32px x 32px
kciuk	50px x 50px
mały	100px x 100px
kompaktowy	160px x 160px
średni	240px x 240px
duży	480px x 480px
wielki	600px x 600px
1024 X 1024	1024px x 1024px
2048 X 2048	2048px x 2048px
mistrz	Największy dostępny obraz

9. Twój kanał jest teraz dostępny pod adresem Twojego bloga z dołączonym ciągiem zapytania, aby go wyświetlić. W przypadku naszego klienta adres URL kanału to:

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

10. Twój kanał jest teraz gotowy do użycia! Jeśli chcesz, możesz przejść do niego w oknie przeglądarki, aby upewnić się, że nie ma błędów. Zamierzamy zapewnić prawidłowe przetwarzanie w następnym kroku:

Dodaj swój kanał bloga do Klaviyo

Aby wykorzystać nowy kanał bloga w Klaviyo, musisz dodać go jako źródło danych.

1. Nawigować do Źródła danych
2. Wybierz Dodaj kanał internetowy
3. Wpisz Nazwa kanału (brak spacji)
4. Wpisz Adres URL kanału które właśnie stworzyłeś.
5. Wprowadź metodę żądania jako GET
6. Wpisz typ treści jako XML

7. Kliknij Zaktualizuj kanał danych.
8. Kliknij Podgląd aby upewnić się, że kanał jest prawidłowo wypełniany.

Dodaj swój kanał bloga do szablonu wiadomości e-mail Klaviyo

Teraz chcemy wbudować naszego bloga w nasz szablon wiadomości e-mail w Klaviyo. Moim zdaniem i powodem, dla którego potrzebowaliśmy niestandardowego kanału, podoba mi się podzielony obszar treści, w którym obraz znajduje się po lewej stronie, a tytuł i fragment poniżej. Klaviyo ma również możliwość zwinięcia tego w jedną kolumnę na urządzeniu mobilnym.

1. Przeciągnij Podziel blok do szablonu wiadomości e-mail.
2. Ustaw lewą kolumnę na Obraz a prawa kolumna do Tekst blok.

3. Dla obrazu wybierz Obraz dynamiczny i ustaw wartość na:

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

4. Ustaw tekst alternatywny na:

{{item.title}}

5. Ustaw adres linku, aby jeśli subskrybent e-maila kliknął obraz, przeniesie go do Twojego artykułu.

{{item.link}}

6. Wybierz prawa kolumna aby ustawić zawartość kolumny.

7. Dodaj swój zawartość, pamiętaj, aby dodać link do tytułu i wstawić fragment posta.

<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. Wybierz Ustawienia podziału patka.
9. Ustaw na Układ 40% / 60% aby zapewnić więcej miejsca na tekst.
10. umożliwiać Stosuj na urządzeniu mobilnym i nastaw Od prawej do lewej.

11. Wybierz Opcje wyświetlania patka.

12. Wybierz Powtórz treść i umieść kanał, który utworzyłeś w Klaviyo jako źródło w Powtórz dla pole:

feeds.Closet52_Blog.rss.channel.item

13. Ustaw Alias ​​przedmiotu as pozycja.
14. Kliknij Podgląd i test i możesz teraz zobaczyć swoje posty na blogu. Pamiętaj, aby przetestować go zarówno w trybie stacjonarnym, jak i mobilnym.

I oczywiście, jeśli potrzebujesz pomocy w Shopify optymalizacja i Klaviyo wdrożeń, nie wahaj się z nami skontaktować Highbridge.

Ujawnienie: jestem partnerem w Highbridge i używam moich linków afiliacyjnych do Shopify i Klaviyo w tym artykule.