ログイン

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メールのメッセージをカスタマイズできます。

Shopify メールに使用できる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?
お客様が自分のアカウントに関連付けられた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ドメインを表示します。
    • addressにはショップの住所が表示され、以下の住所プロパティにアクセスできます。
      • 番地
      • address2
      • city
      • 国
      • 電話番号
      • province
      • zip
    unsubscribe_url
    		この変数によって、未加工の登録解除URLを利用し、カスタマイズできるようになります。カスタムコード化されたメールを作成する場合は、unsubscribe_url変数またはunsubscribe_link変数を記載する必要があります。unsubscribe_urlとunsubscribe_link両方とも常にプライマリオンラインストアのドメインを指し、他の場所に誘導するように変更することはできません。

    決済未完了の通知メールに対応したLiquid変数

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

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

    Shopifyメールに使用できるサイト離脱、カゴ落ち、チェックアウト離脱のLiquid変数の説明
    変数説明
    abandoned_checkout.*

    この変数を使用すると、以下のチェックアウト離脱のプロパティにアクセスできます。

    • urlは、チェックアウト離脱のURLを表示します。
    • line_itemsは、チェックアウト離脱の最初の5項目を表示します。さらに、各line_itemsのオブジェクトには、各商品に関する以下のプロパティが含まれます。
      • コンポーネント
      • image_url
      • 商品_タイトル
      • バリエーション_タイトル
      • quantity
    • line_items.componentsは、チェックアウト離脱のコンポーネントを表示します。さらに、各コンポーネントオブジェクトには、各コンポーネントに関する以下のプロパティが含まれます。
      • image_url
      • quantity
      • 商品_タイトル
      • バリエーション_タイトル
    • remaining_products_countは、チェックアウト離脱に5つを上回る項目がある場合、残りの項目数を表示します。

    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文字の言語コード (必要に応じて地域修飾子が続く)。例： 
    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
    		チェックアウト時の項目の小計金額。
    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 チェックアウトの合計金額が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.*変数には、メールがカゴ落ち、または商品ページ離脱のマーケティングオートメーションの一部である場合にのみ値が入ります。この変数を使用してアクセスできる以下のプロパティを確認します。

    Shopify メールに使用できるLiquid変数の説明
    変数説明
    abandoned_visit.*

    この変数を使用すると、以下のカゴ落ちまたはサイト離脱のプロパティにアクセスできます。

    • urlには、チェックアウト離脱やサイト離脱のURLが表示されます。
    • products_added_to_cartは、離脱したセッション数のカートに追加された最初の5つの商品項目を表示します。さらに、各products_added_to_cartオブジェクトには、各商品に関する以下のプロパティが含まれます。
      • title
      • image_url
      • バリエーション_タイトル
      • quantity
    • products_viewedは、離脱したセッション数の間に確認された最初の5つの商品を表示します。さらに、各products_viewedオブジェクトには、各商品に関する以下のプロパティが含まれます。
      • title
      • 説明
      • image_url
      • URL
      • image_alt_text
    • remaining_cart_products_countは、チェックアウト離脱に5つを上回る項目がある場合、残りの項目数を表示します。

    必要な変数を使用する

    カスタム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>
    お探しの情報が見つかりませんか？いつでもお気軽にお問い合わせください。