Συνεχίζουμε να βελτιώνουμε και να βελτιστοποιούμε το δικό μας ShopifyPlus τις προσπάθειες μάρκετινγκ ηλεκτρονικού ταχυδρομείου του πελάτη μόδας χρησιμοποιώντας 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 αναρτήσεις ιστολογίου σε ένα email ΔΕΝ είναι ένα από αυτά, όμως! Κάνοντας τα πράγματα ακόμα πιο δύσκολα… η τεκμηρίωση για τη δημιουργία αυτού του μηνύματος ηλεκτρονικού ταχυδρομείου δεν είναι ενδελεχής και δεν τεκμηριώνει καν τον πιο πρόσφατο επεξεργαστή τους. Ετσι, Highbridge έπρεπε να κάνουμε λίγο σκάψιμο και να καταλάβουμε πώς να το κάνουμε μόνοι μας… και δεν ήταν εύκολο.
Ακολουθεί η ανάπτυξη που απαιτείται για να συμβεί αυτό:
- Ροή ιστολογίου – Η ροή του atom που παρέχεται από το Shopify δεν παρέχει καμία προσαρμογή ούτε περιλαμβάνει εικόνες, επομένως πρέπει να δημιουργήσουμε μια προσαρμοσμένη ροή XML.
- Ροή δεδομένων Klaviyo – Η ροή XML που δημιουργήσαμε πρέπει να ενσωματωθεί ως ροή δεδομένων στο Klaviyo.
- Πρότυπο ηλεκτρονικού ταχυδρομείου Klaviyo – Στη συνέχεια, πρέπει να αναλύσουμε τη ροή σε ένα πρότυπο email όπου οι εικόνες και το περιεχόμενο έχουν διαμορφωθεί σωστά.
Δημιουργήστε μια προσαρμοσμένη ροή ιστολογίου στο Shopify
Μπόρεσα να βρω ένα άρθρο με παράδειγμα κώδικα για να δημιουργήσω ένα custom feed in Shopify for MailChimp and made quite a few edits to clean it up. Here are the steps to build a προσαρμοσμένη ροή RSS στο Shopify για το ιστολόγιό σας.
- Πλοηγηθείτε στο δικό σας Ηλεκτρονικό Κατάστημα και επιλέξτε το θέμα στο οποίο θέλετε να τοποθετήσετε τη ροή.
- Στο μενού Ενέργειες, επιλέξτε Επεξεργασία κώδικα.
- Στο μενού Αρχεία, μεταβείτε στην επιλογή Πρότυπα και κάντε κλικ Προσθέστε ένα νέο πρότυπο.
- Στο παράθυρο Προσθήκη νέου προτύπου, επιλέξτε Δημιουργήστε ένα νέο πρότυπο for blog.
- Επιλέξτε τύπο προτύπου υγρό.
- Για το όνομα αρχείου, καταχωρήσαμε klaviyo.
- Στο πρόγραμμα επεξεργασίας κώδικα, τοποθετήστε τον ακόλουθο κώδικα:
{%- 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>- Ενημερώστε τις προσαρμοσμένες μεταβλητές όπως απαιτείται. Μια σημείωση σχετικά με αυτό είναι ότι έχουμε ορίσει το μέγεθος της εικόνας στο μέγιστο πλάτος των email μας, πλάτος 600 pixel. Ακολουθεί ένας πίνακας με τα μεγέθη εικόνας του Shopify:
| Shopify Όνομα εικόνας | Διαστάσεις |
| pico | 16px x 16px |
| εικονίδιο | 32px x 32px |
| αντίχειρας | 50px x 50px |
| small | 100px x 100px |
| συμπαγής | 160px x 160px |
| medium | 240px x 240px |
| large | 480px x 480px |
| μεγάλος | 600px x 600px |
| 1024 1024 X | 1024px x 1024px |
| 2048 2048 X | 2048px x 2048px |
| κύριος | Η μεγαλύτερη διαθέσιμη εικόνα |
- Η ροή σας είναι πλέον διαθέσιμη στη διεύθυνση του ιστολογίου σας με προσαρτημένη τη συμβολοσειρά ερωτήματος για προβολή της. Στην περίπτωση του πελάτη μας, η διεύθυνση URL ροής είναι:
https://closet52.com/blogs/fashion?view=klaviyo- Η ροή σας είναι τώρα έτοιμη για χρήση! Εάν θέλετε, μπορείτε να πλοηγηθείτε σε αυτό σε ένα παράθυρο του προγράμματος περιήγησης για να βεβαιωθείτε ότι δεν υπάρχουν σφάλματα. Θα διασφαλίσουμε ότι αναλύεται σωστά στο επόμενο βήμα μας:
Προσθέστε τη ροή του ιστολογίου σας στο Klaviyo
Για να χρησιμοποιήσετε τη νέα σας ροή ιστολογίου στο Klaviyo, πρέπει να το προσθέσετε ως ροή δεδομένων.
- Πλοηγηθείτε στο Ροές δεδομένων
- Αγορά Προσθήκη ροής Ιστού
- Εισάγετε ένα Όνομα ροής (δεν επιτρέπονται θέσεις)
- Εισάγετε το URL ροής που μόλις δημιουργήσατε.
- Εισαγάγετε τη μέθοδο αιτήματος ως ΠΑΡΤΕ
- Εισαγάγετε τον Τύπο περιεχομένου ως XML
- Πατήστε Ενημέρωση ροής δεδομένων.
- Πατήστε Προβολή για να βεβαιωθείτε ότι η ροή συμπληρώνεται σωστά.
Προσθέστε τη ροή του ιστολογίου σας στο πρότυπο ηλεκτρονικού ταχυδρομείου Klaviyo
Τώρα θέλουμε να δημιουργήσουμε το ιστολόγιό μας στο πρότυπο email μας Klaviyo. Κατά τη γνώμη μου, και ο λόγος για τον οποίο χρειαζόμασταν μια προσαρμοσμένη τροφοδοσία, μου αρέσει μια διαχωρισμένη περιοχή περιεχομένου όπου η εικόνα είναι στα αριστερά, ο τίτλος και το απόσπασμα είναι από κάτω. Το Klaviyo έχει επίσης την επιλογή να το συμπτύξει σε μια στήλη σε μια κινητή συσκευή.
- Σύρετε ένα Split Block στο πρότυπο email σας.
- Ορίστε την αριστερή σας στήλη σε an Εικόνα και η δεξιά σας στήλη στο α Κείμενο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.
- Για την εικόνα, επιλέξτε Δυναμική εικόνα και ορίστε την τιμή σε:
{{ item|lookup:'media:content'|lookup:'@url' }}- Ορίστε το εναλλακτικό κείμενο σε:
{{item.title}}- Ρυθμίστε τη Διεύθυνση Συνδέσμου έτσι ώστε αν ο συνδρομητής του email κάνει κλικ στην εικόνα, να τη μεταφέρει στο άρθρο σας.
{{item.link}}- Επιλέξτε το δεξιά στήλη για να ορίσετε το περιεχόμενο της στήλης.
- Προσθέστε το περιεχόμενο, φροντίστε να προσθέσετε έναν σύνδεσμο στον τίτλο σας και να εισαγάγετε το απόσπασμά σας.
<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>- Επιλέξτε το Διαχωρισμός ρυθμίσεων Tab.
- Ορισμός σε α 40% / 60% διάταξη για να παρέχει περισσότερο χώρο για κείμενο.
- Ενεργοποίηση Στοίβα στο κινητό και να θέσει Δεξιά προς τα αριστερά.
- Επιλέξτε το Επιλογές Εμφάνισης Tab.
- Επιλέξτε Content Repeat και βάλτε τη ροή που δημιουργήσατε στο Klaviyo ως πηγή στο Επανάληψη Για πεδίο:
feeds.Closet52_Blog.rss.channel.item- Ρυθμίστε το Ψευδώνυμο στοιχείου as είδος.
- Πατήστε Προεπισκόπηση και δοκιμή και τώρα μπορείτε να δείτε τις αναρτήσεις του ιστολογίου σας. Φροντίστε να το δοκιμάσετε και σε λειτουργία επιτραπέζιου και κινητού.
Και, φυσικά, εάν χρειάζεστε βοήθεια Shopify βελτιστοποίηση και Klaviyo υλοποιήσεις, μη διστάσετε να απευθυνθείτε Highbridge.
Αποκάλυψη: Είμαι συνεργάτης του Highbridge και χρησιμοποιώ τους συνδέσμους συνεργατών μου για Shopify και Klaviyo σε αυτό το άρθρο.
