Cumu pubblicà u vostru Shopify Blog Feed in u vostru mudellu di email Klaviyo

Continuemu à rinfurzà è ottimisimu i nostri ShopifyPlus i sforzi di marketing email di u cliente di moda utilizendu Klaviyo. Klaviyo hà una solida integrazione cù Shopify chì permette una tonna di cumunicazioni ligati à e-commerce chì sò pre-custruiti è pronti per andà.

Sorprendentemente, inserisce u vostru Shopify Blog Posts in un email ùn hè micca unu di elli, però! Facendu e cose ancu più difficili ... a ducumentazione per a custruzzione di stu email ùn hè micca cumpletu è ùn documenta mancu u so novu editore. Allora, Highbridge duverebbe fà un pocu di scavà è capisce cumu fà noi stessu ... è ùn era micca faciule.

Eccu u sviluppu necessariu per fà questu succede:

1. Feed di Blog - L'alimentu atomicu furnitu da Shopify ùn furnisce micca persunalizazione nè include l'imaghjini, cusì avemu da custruisce un feed XML persunalizatu.
2. Klaviyo Data Feed - U feed XML chì avemu custruitu deve esse integratu cum'è un feed di dati in Klaviyo.
3. Template di email Klaviyo - Dopu avemu bisognu di analizà l'alimentazione in un mudellu di email induve l'imaghjini è u cuntenutu sò formate bè.

Custruite un blog persunalizatu in Shopify

Puderaghju truvà un articulu cù codice esempiu per custruisce a alimentazione persunalizata in Shopify di Mailchimp è hà fattu parechje modifiche per pulizziari. Eccu i passi per custruisce a feed RSS persunalizata in Shopify per u vostru blog.

1. Navigate à u vostru Store Online è selezziunate u tema chì vulete mette u feed in.
2. In u menu Actions, selezziunate Mudificà u Codice.
3. In u menù Files, navigate à Templates è cliccate Aghjunghjite un novu mudellu.
4. In a finestra Aggiungi un novu mudellu, selezziunate Crea un novu mudellu di bloggu.

5. Selezziunà u tipu Template liquidu.
6. Per u nome di u File, avemu intrutu klaviyo.
7. In l'editore di codice, mette u codice seguente:

{%- 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. Aghjurnate e variabili persunalizati quantu necessariu. Una nota nantu à questu hè chì avemu stabilitu a dimensione di l'imaghjini à a larghezza massima di i nostri email, 600px wide. Eccu una tabella di e dimensioni di l'imaghjini di Shopify:

Shopify Nome di l'Image	cunsiderate
pic	16px x 16px
icona	32px x 32px
pulenda	50px x 50px
picculu	100px x 100px
fundute	160px x 160px
medie	240px x 240px
grossu	480px x 480px
grande	600px x 600px
1024 X 1024	1024px x 1024px
2048 X 2048	2048px x 2048px
Maestru	A più grande maghjina dispunibule

9. U vostru feed hè avà dispunibule à l'indirizzu di u vostru blogu cù a stringa di dumanda appiccicata per vede. In u casu di u nostru cliente, l'URL di u feed hè:

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

10. U vostru feed hè avà prontu à aduprà! Se vulete, pudete navigà in una finestra di u navigatore per assicurà chì ùn ci sò micca errori. Avemu da assicurà chì analizza bè in u nostru passu prossimu:

Aghjunghjite u vostru Blog Feed in Klaviyo

Per utilizà u vostru novu blog feed in Klaviyo, avete da aghjunghje cum'è un Feed di Dati.

1. Navigate à Flussu di dati
2. selezziunà Aghjunghjite Web Feed
3. Ingressu una Feed Name (ùn sò permessi spazii)
4. Entra in u URL di feed chì avete appena creatu.
5. Entre in u Metudu di dumanda cum'è GET
6. Entre in u tipu di cuntenutu cum'è XML

7. Clicca Aghjurnate u Feed di Dati.
8. Clicca Preview per assicurà chì l'alimentazione hè populata currettamente.

Aghjunghjite u vostru Blog Feed à u vostru mudellu di email Klaviyo

Avà vulemu custruisce u nostru blog in u nostru mudellu di email in Klaviyo. In u mo parè, è a raghjoni per quessa avemu bisognu di un alimentu persunalizatu, mi piace un spaziu di cuntenutu split induve l'imaghjini hè à a manca, u titulu è l'estrattu sò sottu. Klaviyo hà ancu l'opzione di colapsà questu in una sola colonna in un dispositivu mobile.

1. Trascinate un Split Block in u vostru mudellu di email.
2. Pone a vostra colonna di manca à un Image è a vostra colonna dritta à a Testu bluccatu.

3. Per l'imaghjini, selezziunate Immagine dinamica è stabilisce u valore à:

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

4. Pone u Alt Text à:

{{item.title}}

5. Stabilisci l'indirizzu di u ligame per chì, se l'abbonatu di e-mail clicche nantu à l'imaghjini, li porta à u vostru articulu.

{{item.link}}

6. Sceglite u colonna dritta per stabilisce u cuntenutu di a colonna.

7. Aghjustate u vostru cuntenutu, assicuratevi di aghjunghje un ligame à u vostru tìtulu è inserisci u vostru estrattu di 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>

8. Sceglite u Split Settings tabulazione.
9. Pone à a 40% / 60% layout per furnisce più spaziu per u testu.
10. Enable Stack on Mobile è set Diritta à manca.

11. Sceglite u Opzioni di Visualizazione tabulazione.

12. Selezziunà u cuntenutu Repeat è mette u feed chì avete creatu in Klaviyo cum'è a fonte in u Repetite per campu:

feeds.Closet52_Blog.rss.channel.item

13. Fate u settore Articulu alias as bagagliu.
14. Clicca Preview è pruvà è avà pudete vede i vostri posti di blog. Assicuratevi di pruvà in modu desktop è mobile.

È, sicuru, sè avete bisognu di assistenza Shopify ottimisazione è Klaviyo implementazioni, ùn esitate micca à ghjunghje Highbridge.

Divulgazione: Sò un cumpagnu in Highbridge è aghju aduprà i mo ligami affiliati per Shopify e Klaviyo in questu articulu.