Liquidを使用してShopifyメールキャンペーンをカスタマイズする
Liquidは、Shopifyのシンプルで使いやすいプログラミング言語であり、Shopify テーマストアのテーマが構築されているのと同じプログラミング言語です。
カスタムLiquidを使用すれば、カスタムコードのみでメールを作成する、またはテンプレートにカスタムLiquidセクションを追加することにより、Shopifyメールメッセージのクオリティを向上させることができます。これらの方法では、LiquidやHTMLをカスタム作成できます。
カスタムLiquidを使用して、横並びの画像、カスタムボタン、カスタムサイズの画像、カスタムセクションサイズなどのカスタムアセットを表示できます。
留意事項
ShopifyメールメッセージにカスタムLiquidを追加する前に、以下の考慮事項を確認してください。
- コードに追加する変数は、カスタムLiquidで対応しているものに限られます。
- カスタムLiquidセクションの作成に使用できるのは、デスクトップデバイスのみです。
- カスタムLiquidメールには、
unsubscribe_link
変数またはunsubscribe_url
変数が必要です。開封追跡を有効にしている場合、open_tracking
変数も必要になります。必要な変数をメールに追加する方法について、詳しくはこちらをご覧ください。 - 入力するコードには以下の制限があります。 - カスタムLiquidセクションは最大50キロバイト (KB)。 - カスタムコードで作成されたLiquidメールは最大500KB。
カスタムLiquidに対応したLiquid変数
サポートされている変数を使用して、LiquidでShopifyのメールメッセージをカスタマイズできます。次のタイプのテンプレートでサポートされているLiquid変数のリストを確認できます。
すべてのメールテンプレートに対応したLiquid変数
以下の変数を使用し、LiquidでShopifyメールのメッセージをカスタマイズできます。
変数 | 説明 |
---|---|
all_products | ストアのすべての商品。 |
customer.accepts_marketing | 顧客管理がマーケティングに同意する場合は true を返却し、同意しない場合は false を返却する。 |
customer.addresses | 顧客管理に関連付けられているすべての住所を返却する。 |
customer.addresses_count | お客様に関連付けられたアドレスの数を返します。 |
customer.b2b? | お客様がB2Bのお客様の場合はtrue を返し、そうでない場合はfalse を返します。 |
customer.current_location | お客様に対して現在選択されている会社のロケーションを返します。 |
customer.default_address | 顧客管理のデフォルトの住所を返却する。 |
customer.email | お客様のメールアドレスを返します。 |
customer.first_name | 顧客管理の名を返却する。 |
customer.has_account | お客様のメールアドレスがお客様アカウントに関連付けられている場合はtrue を返し、そうでない場合はfalse を返します。 |
customer.has_avatar? | お客様が自分のアカウントに関連付けられたAvatarを持っている場合はtrue を返し、そうでない場合はfalse を返します。 |
customer.id | お客様のIDを返します。 |
customer.last_name | お客様の姓を返します。 |
customer.last_order | テスト注文を除く、お客様が行った最後の注文を返します。 |
customer.name | 顧客管理のフルネームを返却する。 |
customer.orders | お客様が行ったすべての注文を返します。 |
customer.orders_count | 顧客管理が行った注文の合計数を返却する。 |
customer.payment_methods | お客様の保存決済方法を返品する。 |
customer.phone | お客様の電話番号を返します。電話番号は、お客様がチェックアウト時に電話番号を使用した場合、SMS通知にオプトインする設定をしている場合、またはお客様アカウントに手動で電話番号を追加した場合にのみ入力します。 |
customer.store_credit_account.balance |
関連コンテキストに紐づいた通貨でお客様のストアクレジット残高に返金します。例:
|
customer.tags | 顧客管理に関連付けられたタグを返却する。 |
customer.tax_exempt | 顧客管理が税金を免除されている場合は true を返却し、そうでない場合は false を返却する。 |
customer.total_spent | 顧客管理がストアからのすべての注文に費やした合計金額を返却する。 |
email.* |
この変数を使用して、以下のメールプロパティにアクセスできます。 subject は、メールの件名を表示します。preview_text は、メールのプレビューテキストを表示します。 |
open_tracking | この変数によって事前フォーマット済みの開封追跡ブロックを利用できるようになります。この変数は、カスタムコードを使用して生成したメールを作成し、開封追跡を有効にしている場合に必要です。 |
shop.* | この変数を使用して、以下のショップのプロパティにアクセスできます。
name は、ショップ名を表示します。domain は、ショップのプライマリードメインを表示します。url は、ショップのURLを表示します。shopify_domain は、ショップのShopifyドメインを表示します。
|
unsubscribe_url | この変数によって、未加工の登録解除URLを利用し、カスタマイズできるようになります。カスタムコード化されたメールを作成する場合は、unsubscribe_url 変数またはunsubscribe_link 変数を記載する必要があります。unsubscribe_url とunsubscribe_link 両方とも常にプライマリオンラインストアのドメインを指し、他の場所に誘導するように変更することはできません。 |
決済未完了の通知メールに対応したLiquid変数
以下の変数を使用して、LiquidでShopifyのチェックアウト離脱メールメッセージをカスタマイズできます。
変数 | 説明 |
---|---|
abandoned_checkout.* |
この変数を使用すると、以下のチェックアウト離脱のプロパティにアクセスできます。
|
id(checkout ID) | 社内で使用する固有のチェックアウトID。 |
shop | Shopifyのストア名。 |
name | チェックアウト離脱の名前 (チェックアウト番号とも呼ばれる)。 |
total_price | 注文の合計 (小計+送料-配送料ディスカウント+税) |
shipping_price |
配送の価格 例: |
shipping_address | 配送先住所。 |
billing_address | 請求先住所。 |
line_items | チェックアウト離脱の項目すべてのリスト。 |
unavailable_line_items | チェックアウト離脱の利用できない項目すべてのリスト。 |
note | チェックアウト離脱に添付するメモ。 |
landing_site |
お客様が使用したランディングサイトのパス。これは、お客様がストアを訪問したときに、最初にアクセスしたページ。 例: |
landing_site_ref |
ランディングサイトから参照パラメータを抽出する。参照パラメータは、「ref」
{% if landing_site_ref == 'my-tracking-token' %}My action...{% endif %} |
referring_site |
お客様をストアに誘導した参照元のURL。 例: |
created_at | お客様がチェックアウト放棄を作成した日時。 |
closed_at | チェックアウトが終了した日時。 |
customer_locale | お客様のロケールの2文字または3文字の言語コード (必要に応じて地域修飾子が続く)。例: ja、 en-CA |
item_count | すべてのアイテムの個数の合計 |
unique_gateways | チェックアウト時に利用可能な固有の決済サービスのリスト。 |
discount | チェックアウト離脱のカート、または項目適用されるディスカウント。 |
discounts | チェックアウトに適用されるディスカウントのリスト。 |
successfully_applied_discounts | チェックアウトに正しく適用されたディスカウント。 |
discounts_amount |
ディスカウントすべてによって適用されるディスカウント金額。 例: +$5.00 |
discounts_savings |
ディスカウントすべてによって削減できる金額。 例: -5.00ドル |
buyer_accepts_marketing | 返品 trueまたは falseお客様がチェックアウト離脱中にマーケティングを受け入れたかどうかによって異なる。 |
subtotal_line_items | チップの項目を除き、チェックアウト時に小計金額を計算するために使用される項目。 |
requires_shipping | 返品 trueチェックアウトに配送が必要なアイテムが少なくとも1つある場合。 |
subtotal_price | チェックアウト時の項目の小計金額。 |
チェックアウト離脱に関連付けられたメール。 | |
shop_name | ストアの名前 |
tax_lines |
以下の税金タイプごとに分類された税金。 {% for tax_line in tax_lines %} {{ tax_line.title }} ({{ tax_line.rate_percentage }}%) : {{ tax_line.price | money_with_currency }} {% endfor %} |
tax_price | チェックアウトのすべてのアイテムに関する税金の総計。 |
attributes |
チェックアウト離脱に添付する任意の属性。 例: |
shipping_method | チェックアウト時に利用可能な最初の配送方法に関する情報。 |
shipping_methods | チェックアウト時に利用可能な配送方法。 |
free | 返品 true チェックアウトの合計金額が0の場合。 |
free_shipping | 返品 trueチェックアウトで配送が必要ない場合、または配送の価格が0の場合。 |
different_billing_address | 返品 trueまたは false配送先住所が請求先住所と同じかどうかに基づく。 |
customer | お客様出力の属性を含むお客様オブジェクト。 |
gift_cards | チェックアウトに適用されるギフトカード。 |
gift_cards_amount | ギフトカードで支払われるチェックアウト価格の金額。 |
transactions | チェックアウトの取引。 |
shareable_url | 項目にある最初の商品のURL。 |
shareable_title | 最初の項目の商品名。 |
total_tip | お客様がチェックアウト時に追加したチップの合計金額。 |
discount_applications | チェックアウトでアイテムがディスカウントされた理由と方法を説明。 |
cart_level_discount_applications | カートに対するカート固有のディスカウント申請。 |
currency | チェックアウト離脱の通貨。 |
line_items_subtotal_price | 項目のディスカウントが適用された後の、チェックアウトの全項目の価格の合計。 |
サイト離脱とカゴ落ちメールのLiquid変数
abandoned_visit.*
変数には、メールがカゴ落ち、または商品ページ離脱のマーケティングオートメーションの一部である場合にのみ値が入ります。この変数を使用してアクセスできる以下のプロパティを確認します。
変数 | 説明 |
---|---|
abandoned_visit.* |
この変数を使用すると、以下のカゴ落ちまたはサイト離脱のプロパティにアクセスできます。
|
必要な変数を使用する
カスタムLiquidメールを作成する際は、unsubscribe_link
変数またはunsubscribe_url
変数が必要です。開封追跡を有効にしている場合、open_tracking
変数も必要になります。
これらの変数はメールのコード内のどこにでも挿入できますが、以下のようにメールのフッターセクションに追加するのが最も一般的です。
<div id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
カスタムLiquidコードの例
コードエディタにカスタムLiquidとHTMLを追加できます。以下のコードは、メールメッセージにストア名、カスタムボタン、およびカスタムサイズの画像を表示するようにLiquidコードを追加する方法の例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }} Newsletter</title>
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5; color: #333333; background-color: #f5f5f5;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f5f5f5;">
<tr>
<td align="center" style="padding: 20px;">
<table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<!-- Header -->
<tr>
<td align="center" style="background-color: #4a6de5; padding: 30px 20px; color: #ffffff;">
<h1 style="margin: 0; font-size: 28px; font-weight: bold;">{{ shop.name }}</h1>
<p style="margin: 10px 0 0; font-size: 16px;">Your Book Journey with Us</p>
</td>
</tr>
<!-- Content -->
<tr>
<td style="padding: 30px 20px;">
<!-- Greeting Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 22px; color: #222222;">Hello {{ customer.name }}!</h2>
<p style="margin: 0 0 15px; font-size: 15px;">We hope this email finds you well. We noticed you're from {{ customer.default_address.city }}.</p>
{% if customer.email %}
<p style="margin: 0 0 15px; font-size: 15px;">Your registered email is: {{ customer.email }}</p>
{% endif %}
</td>
</tr>
</table>
<!-- Reading Journey Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Your Reading Journey</h2>
<p style="margin: 0 0 15px; font-size: 15px;">Thank you for being a loyal customer! Here's a snapshot of your journey:</p>
<p style="margin: 0 0 15px; font-size: 15px;">You purchased {{ customer.orders_count }} books with us.</p>
{% if customer.last_order %}
<p style="margin: 0 0 15px; font-size: 15px;"> You last read {{customer.last_order.line_items[0].title}}. Great choice! </p>
{% endif %}
</td>
</tr>
</table>
<!-- Recommended Books Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td>
<h2 style="margin: 0 0 15px; font-size: 20px; color: #4a6de5;">Books You Might Love</h2>
<p style="margin: 0 0 15px; font-size: 15px;">Based on your reading preferences, we've handpicked these titles just for you:</p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="50%" style="padding-right: 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
<tr>
<td align="center">
<!-- Image with proper email attributes -->
<img src="https:{{ all_products['product-1-handle'] | image_url: width: 200 }}"
alt="Product 1"
width="200"
height="200"
style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
title="Product 1"
border="0">
<h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-1-handle'].title }}</h3>
<p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-1-handle'].price }}</p>
<a href="{{shop.domain}}{{ all_products['product-1-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
</td>
</tr>
</table>
</td>
<td width="50%" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f9f9f9; border-radius: 4px; padding: 15px;">
<tr>
<td align="center">
<!-- Image with proper email attributes -->
<img src="https:{{ all_products['product-2-handle'] | image_url: width: 200 }}"
alt="Product 2"
width="200"
height="200"
style="display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"
title="Product 2"
border="0">
<h3 style="margin: 0 0 10px; font-size: 16px; color: #333333;">{{ all_products['product-2-handle'].title }}</h3>
<p style="margin: 0 0 10px; font-size: 15px; color: #4a6de5;">${{ all_products['product-2-handle'].price }}</p>
<a href="{{shop.domain}}{{ all_products['product-2-handle'].url }}" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">View Book</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Book Club Section -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom: 30px;">
<tr>
<td style="background-color: #f5f7ff; border-radius: 4px; padding: 25px; text-align: center;">
<h2 style="margin: 0 0 15px; font-size: 18px; color: #333333;">This Month's Top Picks</h2>
<p style="margin: 0 0 20px; font-size: 15px;">Discover what other readers are loving this month:</p>
<a href="{{ shop.url }}/pages/book-club" style="display: inline-block; background-color: #4a6de5; color: #ffffff; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-size: 14px;">Join Our Book Club</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f2f2f2; padding: 30px 20px; text-align: center;">
<p style="margin: 0 0 15px; font-size: 15px;">Best regards,<br><strong>{{ shop.name }} Team</strong></p>
<p style="margin: 0 0 15px; font-size: 12px; color: #999999;">© {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.</p>
<p style="margin: 0 0 15px; font-size: 12px;">{{ open_tracking_block }}</p>
<a href="{{ unsubscribe_url }}" style="color: #999999; font-size: 12px; text-decoration: underline;">{{ unsubscribe_link }}</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>