Shopify メールに使用できるカスタムLiquidセクションを追加する
カスタムLiquidセクションを追加すると、Shopify メールメッセージにカスタムのLiquidやHTMLを入力できます。
Liquidは、Shopifyのシンプルで使いやすいプログラミング言語であり、Shopify テーマストアのテーマが構築されているのと同じプログラミング言語です。
カスタムLiquidセクションを使用して、横並びの画像、カスタムボタン、カスタムサイズの画像、カスタムセクションサイズなどのカスタムアセットを表示できます。
留意事項
ShopifyメールメッセージにカスタムLiquidを追加する前に、以下の考慮事項を確認してください。
- コードに含める変数は、カスタムLiquidセクションによってサポートされている必要があります。
- 入力するコードのサイズは、50KBを超えることはできません。
- カスタムLiquidセクションの作成に使用できるのは、デスクトップデバイスのみです。
カスタムLiquidセクションで使用できるLiquid変数
以下の変数を使用して、カスタムLiquidセクションで、Shopify メールメッセージをカスタマイズできます。
変数 | 説明 |
---|---|
abandoned_checkout |
この変数を使用すると、以下のチェックアウト離脱のプロパティにアクセスできます。
|
abandoned_visit |
この変数を使用すると、以下のカゴ落ちまたはサイト離脱のプロパティにアクセスできます。
|
data.customer.* |
この変数を使用して、お客様の以下のデータプロパティにアクセスできます。 名 姓 email city state 国 これらのプロパティは、Liquidフィルター、またはLiquid条件の中では使用できません。 |
email.* |
この変数を使用して、以下のメールプロパティにアクセスできます。 subject は、メールの件名を表示します。preview_text は、メールのプレビューテキストを表示します。 |
shop.* |
この変数を使用して、以下のショップのプロパティにアクセスできます。
name は、ショップ名を表示します。domain は、ショップのプライマリードメインを表示します。url は、ショップのURLを表示します。shopify_domain は、ショップのShopifyドメインを表示します。
|
カスタムLiquidコードの例
カスタムLiquidセクションをメールテンプレートに追加すると、コードエディタにカスタムのLiquidやHTMLを追加できます。
以下のコードは、メールメッセージにストア名、カスタムボタン、およびカスタムサイズの画像を表示するようにLiquidコードを追加する方法の例です。
<style>
p#welcome {
margin: 0;
padding: 3rem;
color: white;
font-weight: 700;
font-size: 26px;
font-family: 'Futura';
}
div#image_wrapper img {
max-width: 70%;
border-radius: 60px;
box-shadow: -2px 6px 0px rgba(227, 111, 59, 0.7);
}
div#button_wrapper {
padding: 1rem;
}
div#button_wrapper a {
padding: 1rem 2rem;
border-radius: 24px;
display: inline-block;
background: linear-gradient(120deg, #F6A179, #865CFF);
box-shadow: -2px 4px 0px rgba(96, 54, 173, 0.9);
font-weight: 700;
font-size: 16px;
font-family: 'Futura';
color: white;
}
div#button_wrapper:hover a {
box-shadow: -4px 6px 0px rgba(96, 54, 173, 0.8);
}
div#custom_section {
background: linear-gradient(120deg, #FF9F73, #FFC7AD);
padding:0 0 2rem 0;
border-radius: 4rem;
}
</style>
<div id="custom_section">
<p id="welcome">
Hello from {{shop.name}}<strong></strong>!
</p>
<div id="image_wrapper">
<img src="https://burst.shopifycdn.com/photos/a-trio-of-natural-soaps.jpg" alt="" />
</div>
<div id="button_wrapper">
<a href="">Shop now</a>
</div>
</div>