Liquid構文の使い方について

EC出品テンプレートを作成する際に利用できるLiquid構文の基本的な説明と実際のユースケースをご紹介して解説します。

EC出品を効率化するためにEC出品テンプレート利用し、出品作業は効率化されたものの、テンプレート数が多く、買取時に入力した情報を出品時に再度選択する必要がある場合には、Liquid構文を使ってEC出品テンプレートを作成することで複数の出品テンプレートを集約して作成が可能になるなどより効率化を図ることが可能です。

こちらでは、在庫やカタログの情報を元により効率的にECテンプレートを作成するために、ユースケース毎のサンプルの構文を用意してあります。

• Liquid構文とは

• Liquidを用いたテンプレート作成

• Liquid構文の活用例

Liquid構文とは、Shopifyなどで使われているLiquid template languageを用い、変数の展開やif文などを実現するものです。

『構文』『変数』『if文』など普段聞きなれない言葉ばかりではありますが、各ユースケースのガイドに従って作成することができます。ユースケースに沿って、次のようによく使われている『if文』の例を元にLiquidについてご確認ください。

上記は対応する箇所を、文字の色や背景色で視覚化し、Liquid構文を日本語に変換したものです。

item.grade.nameは、店頭買取など在庫に指定している【グレード】を指します。 ==は、前後の文字を比較し等しいを意味し【である】を表します。 なお、！＝は、等しくないを意味し【でない】を表します。 条件を表す『if文』は、{% if ～～ %}で始まり、最後は、{% endif %}で締め括ります。

各ECサイトの出品項目をLiquidで指定する場合、表示名ではなくIDを指定 する必要があります。

コンディションやカテゴリなどでは、IDを出力するようにLiquidを記述してください。 例：Amazonのコンディション指定 表示『中古 – 非常に良い』 →ID『UsedVeryGood』を出力

以下の2つの方法で確認できます。

方法①：デフォルトモード → Liquidモードで確認

• 通常モードで選択 → Liquidモードに切り替えるとIDが表示

方法②：Liquidモードで【Ctrl】+【Space】を押す（推奨）

• 表示される選択肢の中で、右側が const のもの を選ぶ

💡 例外：カテゴリ・ブランドなど大量の選択肢は非対応のため 👉 方法①で確認するか、別途ID一覧表を用意

カンマ区切りで複数指定できるカラム（例：商品画像、Shopifyタグなど）では、適切に区切る必要があります。 💡 見分け方：「Liquidモードで空欄にすると ‘カンマ区切りで入力してください’ と表示されるカラム」

例：Shopifyタグの指定

{{ product.title }},あいうえお,{{ item.code }}

🔽 システム内部で次にように展開されます

商品タイトル,あいうえお,IT0000000000

✅ 結果：3つのタグとして認識

「商品タイトル」「あいうえお」「IT0000000000」

配列型の変数 を使用する場合、そのまま出力すると意図しない形になることがあります。 👉 変数例：product.image_urls や product.category.names など 💡 解決策：join フィルターを使用し、適切に区切って出力する

{{ product.image_urls | join: ',' }}

✅ 適切な形式で出力されるように調整

{{ product.category.names }},あああ,いいい

• product.category.names は配列なので、そのまま出力すると 区切りなしで連結 される。

• その結果、「家電テレビ20インチ」 という1つのタグになってしまう。

{{ product.category.names | join: ',' }},あああ,いいい

• join: ',' を適用すると、配列がカンマ区切りの文字列に変換される。

• その結果、タグとして 「家電」「テレビ」「20インチ」 が個別に認識される。

✅ {% comment %} ... {% endcomment %} の間のテキストは Liquid の処理で無視される ✅ コードの横に 対応するカテゴリ名をコメントで書いておく と、後で編集・確認しやすい ✅ Shopify の管理画面やテーマエディタでコードを見たときに、カテゴリの意味が分かりやすくなる

{% if item.grade.name == ‘中古A’ %}

used10 {% comment %} 未使用に近い {% endcomment %}

{% elsif item.grade.name == ‘中古D’ %}

used80 {% comment %} 全体的に状態が悪い {% endcomment %}

{% endif %}

入力項目の下にある【Liquid】をクリック

Liquid入力画面が表示されます。

入力可能な構文、変数、フィルタなどは【Ctrl】キー+【Space】キーをクリック時に表示される選択肢をクリックすることでスムーズな入力が可能です。

▼【Liquid】入力状況で【デフォルト】をクリックすると、通常の入力方法に切り替わります。

▼【デフォルト】入力へ切替後：Liquidで入力中の内容が削除されますので、ご注意ください。

【新規作成する】または【保存する】をクリックして必ず保存します。

保存しない場合は、作成内容が消えてしまいますので、ご注意ください。

利用目的に合わせたヘルプガイドを作成しております。サンプルコードと編集方法が記載されています。編集方法に従って作業していただくだけで作成できるので、参考ガイドURL列を参考にご活用ください

お手数ではございますが、ReCOREのチャットよりお問合せください。

お問合せの際は、以下をご確認のうえお問合せください。

・EC出品テンプレートにおける不明な点 ・設定するECサイト ・お客様より設定操作された具体的な内容

一方で、具体的なHTMLやLiquid構文内容のコード記載内容における詳細な設定方法については、ご案内が難しい場合もございますのでご了承ください。

解説は以上です。

不明な点は、ReCOREチャットよりお問合せくださいませ。