Liquidを使用して Shopify Messagingキャンペーンをカスタマイズする

Liquidは、Shopifyのシンプルで使いやすいプログラミング言語であり、Shopify Theme Storeのテーマを構築しているのと同じプログラミング言語です。

カスタムの Liquid を使用すると、完全にカスタムコード化されたメールを作成するか、テンプレートにカスタム Liquidセクションを追加することで、Shopify Messagingメッセージを強化できます。これらのオプションでは、カスタムの Liquidまたは HTMLを入力できます。

カスタム Liquidを使用すると、横並びの画像、カスタムボタン、カスタムサイズの画像、カスタムセクションサイズなどのカスタムアセットを表示できます。

このページの内容

考慮事項

Shopify Messagingメッセージにカスタム Liquidを追加する前に、以下の考慮事項を確認してください。

コードに含める変数は、カスタムLiquidでサポートされている必要があります。
カスタム Liquidセクションは、デスクトップデバイスでのみ作成できます。
カスタム Liquidメールでは、unsubscribe_link または unsubscribe_url 変数が必須です。開封追跡を有効にしている場合は、open_tracking 変数も必須です。メールへの必須変数の追加について詳しくはこちら。
入力するコードには、次の制限があります。
- カスタム Liquidセクションは最大 50 KB。
- カスタムコードの Liquidメールは最大 500 KB。

Liquidを使用してカスタムコードのメールを作成する

メール作成時にカスタム Liquidコードを使用する場合、カスタム Liquidセクションを追加するか、Shopify Messagingキャンペーンを作成する際に [独自にコーディング] を選択して、完全にカスタム Liquidコードからメールを作成することができます。

カスタムLiquidでサポートされているLiquid変数

サポートされている変数を使用して、Shopify Messagingのメールメッセージを Liquidでカスタマイズできます。以下の種類のテンプレートでサポートされている Liquid変数の一覧を確認できます。

すべてのメールテンプレートでサポートされているLiquid変数

Liquidを使用して Shopify Messagingのメールメッセージをカスタマイズするには、以下の変数を使用できます。

Shopify MessagingでサポートされているLiquid変数の説明
変数	説明
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?	お客様のアカウントにアバターが関連付けられている場合は `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.store_credit_account.balance \| money_with_currency}}`
customer.tags	お客様に関連付けられているタグを返します。
customer.tax_exempt	お客様が非課税の場合は `true` を、そうでない場合は `false` を返します。
customer.total_spent	ストアでのすべての注文でお客様が費やした合計金額を返します。
email.*	この変数では、以下のメールプロパティにアクセスできます。 `subject` は、メールの件名を表示します。 `preview_text` は、メールのプレビューテキストを表示します。
open_tracking	この変数では、事前フォーマット済みの開封追跡ブロックにアクセスできます。カスタムコードのメールを作成し、開封追跡を有効にしている場合、この変数は必須です。
shop.*	この変数では、以下のストアプロパティにアクセスできます。 `name` は、ストア名を表示します。 `domain` は、ストアのプライマリードメインを表示します。 `url` は、ストアの URL を表示します。 `shopify_domain` は、ストアの Shopify ドメインを表示します。 `住所` ストアの住所を表示します。これにより、以下の住所プロパティにアクセスできます。 `address1` `address2` `city` `country` `phone` `province` `zip`
unsubscribe_url	この変数では、未加工の登録解除 URL にアクセスでき、カスタマイズも可能です。カスタムコードのメールを作成する場合、`unsubscribe_url` または `unsubscribe_link` 変数を含める必要があります。`unsubscribe_url` と `unsubscribe_link` はどちらも、常にプライマリオンラインストアのドメインを指し、他の場所を指すように変更することはできません。

決済未完了の通知メールでサポートされている Liquid 変数

以下の変数を使用して、チェックアウト離脱の Shopify Messaging メールメッセージを Liquid でカスタマイズできます。

abandoned_checkout 変数は、メールがチェックアウト離脱マーケティングオートメーションの一部である場合にのみ入力されます。それ以外の場合、変数は null になります。

Shopify Messagingでサポートされている、サイト離脱、カート放棄、チェックアウト離脱の Liquid 変数の説明
変数	説明
abandoned_checkout.*	この変数では、チェックアウト離脱の以下のプロパティにアクセスできます。 `url` は、チェックアウト離脱の URL を表示します。 `項目` チェックアウト離脱の最初の5つの項目を表示します。さらに、各 `項目` オブジェクトには、各商品に関する以下のプロパティが含まれています。 `components` `image_url` `product_title` `variant_title` `quantity` `line_items.components` チェックアウト離脱のコンポーネントを表示します。さらに、各 `コンポーネント` オブジェクトには、各コンポーネントに関する以下のプロパティが含まれています。 `image_url` `quantity` `product_title` `variant_title` `remaining_products_count` は、チェックアウト離脱に6つ以上の項目がある場合に、残りの項目数を表示します。
id (checkout ID)	内部で使用されるチェックアウトの一意の ID です。
shop	Shopify ストア名です。
name	チェックアウト離脱の名前です。チェックアウト番号とも呼ばれます。
total_price	注文の合計金額 (小計 + 送料 - 送料ディスカウント + 税) です。
shipping_price	送料です。例: `{{ shipping_price \| money }}`
shipping_address	配送先住所です。
billing_address	請求先住所です。
line_items	チェックアウト離脱に含まれるすべての項目のリストです。
unavailable_line_items	チェックアウト離脱に含まれる、利用できないすべての項目のリストです。
note	チェックアウト離脱に添付されているメモです。
landing_site	お客様が使用したランディングサイトのパスです。これは、お客様がストアにアクセスした際に最初にアクセスしたページです。例: `/products/great-product?ref=my-tracking-token`
landing_site_ref	ランディングサイトから参照パラメーターを抽出します。参照パラメーターには、`ref`、`source`、`r` などがあります。 `landing_site` が `/products/great-product?ref=my-tracking-token` の場合、 `landing_site_ref` は `my-tracking-token` です。参照パラメーターが特定の値と等しい場合は、特定のアクションを実行できます。 {% if landing_site_ref == 'my-tracking-token' %} My action... {% endif %}
referring_site	お客様をストアに誘導した参照元の URL です。例: `https://www.google.com/?s=great+products`
created_at	お客様が放棄したチェックアウトを作成した日時です。
closed_at	チェックアウトが終了した日時です。
customer_locale	お客様のロケール用の2文字または3文字の言語コードで、必要に応じて、その後に地域修飾子が続きます。以下に例を挙げます。 en 、 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	チェックアウト時の項目の小計です。
email	チェックアウト離脱に関連付けられているメールです。
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	チェックアウト離脱に添付されていた属性です。例：`{{ attributes.gift-note }}`
shipping_method	チェックアウトで利用可能な最初の配送方法に関する情報です。
shipping_methods	チェックアウトで利用可能な配送方法です。
free	返します true if the total price of the checkout is zero.
free_shipping	返します true チェックアウトで発送が必要ない場合、または配送料がゼロの場合に返されます。
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.* 変数は、メールがカゴ落ちまたは商品ページ離脱のマーケティングオートメーションの一部である場合にのみ入力されます。この変数がアクセス権を付与するプロパティについては、以下を確認してください。

Shopify MessagingでサポートされているLiquid変数の説明
変数	説明
abandoned_visit.*	この変数は、カゴ落ちまたはサイト離脱の以下のプロパティにアクセスできるようにします。 `url` は、カゴ落ちまたはサイト離脱の URL を表示します。 `products_added_to_cart` は、サイト離脱時にカートに追加された最初の5つの商品項目を表示します。さらに、各 `products_added_to_cart` オブジェクトには、各商品に関する以下のプロパティが含まれています。 `title` `image_url` `variant_title` `quantity` `products_viewed` は、サイト離脱中に閲覧された最初の5つの商品を表示します。さらに、各 `products_viewed` オブジェクトには、各商品に関する以下のプロパティが含まれています。 `title` `description` `image_url` `url` `image_alt_text` `remaining_cart_products_count` は、チェックアウト離脱に6つ以上の項目がある場合に、残りの項目数を表示します。

必須変数の使用

カスタム 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>