우리는 지속적으로 개선하고 최적화합니다. 쇼피파이 플러스 패션 클라이언트의 이메일 마케팅 노력 클라 비요. Klaviyo는 사전 구축되어 바로 사용할 수 있는 수많은 전자 상거래 관련 커뮤니케이션을 가능하게 하는 Shopify와 긴밀하게 통합되어 있습니다.
놀랍게도, 당신의 Shopify 블로그 게시물 그러나 이메일로 보내는 것은 그 중 하나가 아닙니다! 일을 더 어렵게 만드는 것은… 이 이메일을 작성하기 위한 문서는 철저하지 않으며 최신 편집자도 문서화하지 않습니다. 그래서, Highbridge 땅을 파고 스스로 어떻게 해야 할지 알아내야 했고… 쉽지 않았습니다.
이를 위해 필요한 개발은 다음과 같습니다.
- 블로그 피드 – Shopify에서 제공하는 아톰 피드는 사용자 정의를 제공하지 않으며 이미지를 포함하지 않으므로 사용자 정의 XML 피드를 빌드해야 합니다.
- Klaviyo 데이터 피드 – 우리가 구축한 XML 피드는 Klaviyo에서 데이터 피드로 통합되어야 합니다.
- Klaviyo 이메일 템플릿 – 그런 다음 피드를 이미지와 콘텐츠 형식이 올바르게 지정된 이메일 템플릿으로 구문 분석해야 합니다.
Shopify에서 맞춤형 블로그 피드 구축
예제 코드가 포함된 기사를 찾을 수 있었습니다. Shopify의 사용자 정의 피드 ...에 대한 Mailchimp 그리고 그것을 정리하기 위해 꽤 많은 수정을 했습니다. 다음은 빌드 단계입니다. 사용자 정의 RSS 피드 블로그용 Shopify에서
- 귀하의 온라인 스토어 피드를 배치할 테마를 선택합니다.
- 작업 메뉴에서 코드 편집.
- 파일 메뉴에서 템플릿으로 이동하여 새 템플릿 추가.
- 새 템플릿 추가 창에서 다음을 선택합니다. 새 템플릿 만들기 ...에 대한 블로그.
- 템플릿 유형 선택 액체.
- 파일 이름에 대해 다음을 입력했습니다. 클라비 요.
- 코드 편집기에서 다음 코드를 배치합니다.
{%- 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>- 필요에 따라 맞춤 변수를 업데이트합니다. 이것에 대한 한 가지 참고 사항은 이미지 크기를 이메일의 최대 너비인 600px 너비로 설정했다는 것입니다. 다음은 Shopify의 이미지 크기 표입니다.
| Shopify 이미지 이름 | Dimensions |
| 피코 | 16px X 16px |
| 아이콘 | 32px X 32px |
| 무지 | 50px X 50px |
| 작은 | 100px X 100px |
| 팩트 | 160px X 160px |
| 매질 | 240px X 240px |
| 넓은 | 480px X 480px |
| 큰 | 600px X 600px |
| 1024 X 1024 | 1024px X 1024px |
| 2048 X 2048 | 2048px X 2048px |
| 석사 | 사용 가능한 가장 큰 이미지 |
- 이제 피드를 보기 위해 추가된 쿼리 문자열과 함께 블로그 주소에서 피드를 사용할 수 있습니다. 클라이언트의 경우 피드 URL은 다음과 같습니다.
https://closet52.com/blogs/fashion?view=klaviyo- 이제 피드를 사용할 준비가 되었습니다! 원하는 경우 브라우저 창에서 해당 페이지로 이동하여 오류가 없는지 확인할 수 있습니다. 다음 단계에서 제대로 구문 분석되는지 확인할 것입니다.
Klaviyo에 블로그 피드 추가
새 블로그 피드를 활용하려면 클라 비요, 데이터 피드로 추가해야 합니다.
- 로 이동 데이터 피드
- 이 웹 피드 추가
- 입력 피드 이름 (공백은 허용되지 않습니다)
- 입력 피드 URL 방금 만든 것입니다.
- 요청 방법을 다음과 같이 입력하십시오. 바로
- 콘텐츠 유형을 다음과 같이 입력하십시오. XML
- . 데이터 피드 업데이트.
- . 시사 피드가 올바르게 채워지고 있는지 확인합니다.
Klaviyo 이메일 템플릿에 블로그 피드 추가
이제 우리는 블로그를 이메일 템플릿으로 만들고 싶습니다. 클라 비요. 제 생각에는 사용자 정의 피드가 필요한 이유 때문에 이미지가 왼쪽에 있고 제목과 발췌문이 아래에 있는 분할 콘텐츠 영역이 좋습니다. Klaviyo에는 모바일 장치에서 이것을 단일 열로 축소하는 옵션도 있습니다.
- 드래그 분할 블록 귀하의 이메일 템플릿에.
- 왼쪽 열을 영상 오른쪽 열에 본문 블록.
- 이미지의 경우 동적 이미지 값을 다음과 같이 설정합니다.
{{ item|lookup:'media:content'|lookup:'@url' }}- 대체 텍스트를 다음과 같이 설정합니다.
{{item.title}}- 이메일 구독자가 이미지를 클릭하면 귀하의 기사로 이동하도록 링크 주소를 설정하십시오.
{{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>- 선택 분할 설정 탭.
- 로 설정 40% / 60% 레이아웃 더 많은 텍스트 공간을 제공합니다.
- 사용 모바일 스택 설정하다 오른쪽에서 왼쪽으로.
- 선택 옵션을 표시 탭.
- Content Repeat를 선택하고 Klaviyo에서 생성한 피드를 소스로 넣습니다. 반복 들:
feeds.Closet52_Blog.rss.channel.item- 설정 항목 별칭 as 목.
- . 미리보기 및 테스트 이제 블로그 게시물을 볼 수 있습니다. 데스크톱 및 모바일 모드에서 모두 테스트하십시오.
그리고 물론 도움이 필요한 경우 Shopify 최적화 및 클라 비요 구현하려면 주저하지 말고 Highbridge.
공개 : 나는 파트너입니다 Highbridge 내 제휴사 링크를 사용하고 있습니다. Shopify 및 클라 비요 이 기사에서.
