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

ビジネスの拡大に向けて

Shopifyメールメッセージのカスタムコードの作成でサポートが必要な場合は、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でShopifyメールのメッセージをカスタマイズできます。

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

変数	説明
all_products	ストアのすべての商品。
unsubscribe_link	この変数によって、事前フォーマット済みの登録解除リンクのブロックを利用できるようになります。カスタムコード化されたメールを作成する場合は、unsubscribe_link変数またはunsubscribe_url変数を記載する必要があります。
unsubscribe_url	この変数によって、未加工の登録解除URLを利用し、カスタマイズできるようになります。カスタムコード化されたメールを作成する場合は、unsubscribe_url変数またはunsubscribe_link変数を記載する必要があります。
open_tracking	この変数によって事前フォーマット済みの開封追跡ブロックを利用できるようになります。この変数は、カスタムコードを使用して生成したメールを作成し、開封追跡を有効にしている場合に必要です。
data.customer.*	この変数を使用して、お客様の以下のデータプロパティにアクセスできます。 名　 姓 email city state 国 これらのプロパティは、Liquidフィルター、またはLiquid条件の中では使用できません。
email.*	この変数を使用して、以下のメールプロパティにアクセスできます。 subjectは、メールの件名を表示します。 preview_textは、メールのプレビューテキストを表示します。
shop.*	この変数を使用して、以下のショップのプロパティにアクセスできます。 nameは、ショップ名を表示します。 domainは、ショップのプライマリードメインを表示します。 urlは、ショップのURLを表示します。 shopify_domainは、ショップのShopifyドメインを表示します。 addressにはショップの住所が表示され、以下の住所プロパティにアクセスできます。 番地 address2 city 国 電話番号 province zip brandingにはショップのブランディングが表示され、以下のプロパティにアクセスできます。 accent_section_color background_primary_color background_border_color body_text_color button_background_and_link_color button_label_color footer_link_color footer_text_color footer_background_color social_link_facebook social_link_twitter social_link_instagram social_link_pinterest shop_name logoでは、imgタグとして直接レンダリングされます。

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

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

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

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

変数	説明
abandoned_checkout.*	この変数を使用すると、以下のチェックアウト離脱のプロパティにアクセスできます。 urlは、チェックアウト離脱のURLを表示します。 line_itemsは、チェックアウト離脱の最初の5項目を表示します。さらに、各line_itemsのオブジェクトには、各商品に関する以下のプロパティが含まれます。 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コードを追加する方法の例です。

<style>
  body {
    text-align: center;
  }

  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#footer {
    font-weight: 700;
    font-size: 16px;
    font-family: 'Futura';
    padding: 2rem;
  }

  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 id="footer">{{ unsubscribe_link }} {{ open_tracking_block }}</div>
</div>