Shopify メールに使用できるカスタムLiquidセクションを追加する

ビジネスの拡大に向けて

Shopify メールメッセージのカスタムコード作成に関するサポートが必要な場合は、Shopify Expertを雇うことができます。

カスタムLiquidセクションを追加すると、Shopify メールメッセージにカスタムのLiquidやHTMLを入力できます。

Liquidは、Shopifyのシンプルで使いやすいプログラミング言語であり、Shopify テーマストアのテーマが構築されているのと同じプログラミング言語です。

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

留意事項

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

• コードに含める変数は、カスタムLiquidセクションによってサポートされている必要があります。
• 入力するコードのサイズは、50KBを超えることはできません。
• カスタムLiquidセクションの作成に使用できるのは、デスクトップデバイスのみです。

カスタムLiquidセクションで使用できるLiquid変数

以下の変数を使用して、カスタムLiquidセクションで、Shopify メールメッセージをカスタマイズできます。

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

変数	説明
abandoned_checkout	この変数を使用すると、以下のチェックアウト離脱のプロパティにアクセスできます。 urlは、チェックアウト離脱のURLを表示します。 line_itemsは、チェックアウト離脱の最初の5項目を表示します。さらに、各line_itemsのオブジェクトには、各商品に関する以下のプロパティが含まれます。 商品_タイトル バリエーション_タイトル quantity remaining_products_countは、チェックアウト離脱に5つを上回る項目がある場合、残りの項目数を表示します。 abandoned_checkout変数は、メールがチェックアウト離脱のマーケティングオートメーションの一部である場合にのみ値が入ります。それ以外の場合、変数はnullとなります。
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 remaining_cart_products_countは、チェックアウト離脱に5つを上回る項目がある場合、残りの項目数を表示します。 abandoned_visit変数は、メールがカゴ落ち、または商品ページ離脱のマーケティングオートメーションの一部である場合にのみ値が入ります。それ以外の場合、変数はnullとなります。
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セクションをメールテンプレートに追加すると、コードエディタにカスタムの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>