Shopify POSの印刷レシートのコードエディタ
管理画面のコードエディタを使用して、印刷される領収書をカスタマイズできます。領収書を構成するファイルには、Shopify のテンプレート言語である Liquid が含まれています。コードエディタでは、HTML、CSS、Liquid を使用することで、ビジュアルエディタよりも高度なカスタマイズが可能です。
印刷されるレシートで使用されるレシートテンプレートとセクションテンプレートを変更できます。[レシート] テンプレートファイルは、ストアで印刷できるレシートの種類です。[セクション] は、ヘッダーやフッターなど、レシートの一部です。セクションは、複数のレシートで再利用できます。
このページの内容
領収書コードエディタを使用する際の留意事項
領収書コードエディタを使用する前に、以下の留意事項を確認してください。
アクセス制限
- コードエディタは、デスクトップの管理画面からのみ使用できます。
- イタリアまたはフランスの POSロケーションでは、コードエディタを利用できません。
変更が適用される場所
- 行ったコードの変更は、選択したロケーションにのみ適用されます。
- コードエディタでのカスタマイズは、POS Pro ロケーションにのみ適用されます。コードエディタを使用していて、POS Pro 以外のロケーションがある場合は、それらのロケーションのヘッダーとフッターをビジュアルエディタでカスタマイズすることができます。
- 売上レシート、ギフトレシート、ギフトカードの領収書、返品と交換の領収書など、コードエディタにテンプレートがある印刷レシートはカスタマイズできます。
コード言語
- 領収書を構成するファイルには、Shopify のテンプレート言語である Liquid が含まれています。Liquid の使用について、詳しくはこちらをご覧ください。
- 領収書のコードエディタでテンプレートを編集するには、HTML、CSS、および Liquid の知識が必要です。Shopify テーマサポートは領収書テンプレートの大幅な編集は行えませんが、Shopify デザインポリシーの範囲内で、無料の Shopify テーマの微調整を行える場合があります。より複雑な変更については、Shopify パートナーを雇うことをご検討ください。
カスタマイズの制限事項
- コードエディタから異なるプリンターサイズの領収書をプレビューすることはできません。プリンターのサイズでプレビューするには、ビジュアルエディタを使用してください。
- 商品説明は領収書テンプレートの変数として利用できないため、印刷された領収書に追加することはできません。
テンプレートのメンテナンス
- 領収書コードエディタを使用して領収書をカスタマイズすると、既存のテンプレートに
selling_plan_nameなどの新しいプロパティが不足している場合があります。利用可能な最新のプロパティをテンプレートに追加するには、領収書テンプレートをデフォルトにリセットする必要があります。領収書テンプレートをデフォルトにリセットすると、これまでに加えたカスタマイズはすべて削除されます。リセットする前に、カスタマイズしたコードをメモしておいてください。テンプレートをリセットした後、カスタマイズを手動で再度適用する必要があります。
コードエディタにアクセスする
コードエディタを使用してテンプレートを編集できます。まず、デフォルトのビジュアルエディタからコードエディタの使用に切り替える必要があります。また、いつでもビジュアルエディタに戻すことができます。
すべての POS ロケーションがコードエディタの要件を満たしているか、または一部の POS ロケーションが POS Pro を使用していない、もしくはイタリアやフランスを拠点としているなどの理由で一部の POS ロケーションのみが要件を満たしているかによって、エディタを切り替える手順はわずかに異なります。
手順：
すべての POS Pro のロケーション
管理画面から、POS > 設定に移動します。
カスタマイズセクションで、印刷されたレシートをクリックして POS エディタを開きます。
左側のサイドバーで
アイコンをクリックします。[コードを編集] をクリックします。
[印刷レシートのコードを編集する] ダイアログで、変更するコードを編集します。
[保存] をクリックします。
オプション：POS エディタを使用して他の Shopify POS ページの編集を続けるには、ブラウザウィンドウで戻ります。
Lite またはイタリアのロケーション
管理画面から、POS > 設定に移動します。
カスタマイズセクションで、印刷されたレシートをクリックして POS エディタを開きます。
[領収書のカスタマイズ] ページで、[コードエディタ] をクリックします。
領収書テンプレートでカスタムファイルを使用する
管理画面にアップロードした画像アセットなどのファイルを使用して、印刷レシートをカスタマイズできます。
印刷される領収書でファイルを使用するには、事前に管理画面にファイルをアップロードしておく必要があります。ファイルのアップロードについて、詳しくはこちらをご覧ください。
手順：
管理画面から、コンテンツ > ファイルに移動します。
印刷レシートのコードに含めるファイルの横にある
をクリックして、リンクをコピーします。テンプレートにアセットリンクを含めます。
領収書テンプレートをデフォルトにリセットする
コードエディタを使用して、領収書テンプレートをデフォルトのバージョンにリセットできます。
手順：
すべての POS Pro のロケーション
管理画面から、POS > 設定に移動します。
カスタマイズセクションで、印刷されたレシートをクリックして POS エディタを開きます。
[領収書をカスタマイズする] をクリックします。
[コードを編集] をクリックします。
リセットするコードファイルをクリックします。
アイコンをクリックします。[ファイルをデフォルトにリセットする] ダイアログで、[リセット] をクリックします。
Lite またはイタリアのロケーション
管理画面から、POS > 設定に移動します。
カスタマイズセクションで、印刷されたレシートをクリックして POS エディタを開きます。
[領収書のカスタマイズ] ページで、[コードエディタ] をクリックします。
リセットするコードファイルをクリックします。
- アイコンをクリックします。
[ファイルをデフォルトにリセットする] ダイアログで、[リセット] をクリックします。
領収書コードエディタで利用可能な Liquid 変数
Liquid を使用して、印刷される領収書テンプレートと領収書タイプをカスタマイズできます。
領収書コードエディタでは、以下のデータオブジェクトを利用できます。
領収書オブジェクト
| オブジェクト | 説明 |
|---|---|
shop | ストア名などのストア情報が含まれています。 |
location | 住所や電話番号などの店舗のロケーション情報が含まれています。 |
order | 項目、ディスカウント、税、取引情報などの注文データが含まれています。 |
return |
テンプレート return-and-exchange-receipt.liquid とそれに関連する部分的なテンプレート内でのみ利用可能です。
返品された項目、新しい項目、純合計、取引情報など、返品と交換に関するデータが含まれています。
|
gift_card |
テンプレート gift-card.liquid 内でのみ利用可能です。
残高、英数字コード、POS アプリでスキャンできる QR コードのコンテンツなど、ギフトカードのデータが含まれています。
|
注文オブジェクト
| プロパティ | 説明 |
|---|---|
id | 注文の ID。 |
created_at | 注文が作成された日時 (ISO 8601 形式)。 |
source_identifier | 一意の POS または外部サービスの注文 ID。 |
change_due | 注文のお釣り。 |
balance_due | この注文の未払い額。 |
name | Shopify 管理画面の注文ページと注文状況ページに表示される、注文の一意の ID です。たとえば、「#1001」、「EN1001」、「1001-A」などです。この値は、複数のストアで一意ではありません。 |
note | 注文に関連付けられたメモの内容です。 |
line_items | 注文の項目リストです。 |
subtotal_price |
ディスカウント適用後、返品前のすべての項目の価格の合計です。taxesIncluded が true の場合、小計には税金も含まれます。
|
total_price | 返品前の注文の合計金額です。これには税とディスカウントが含まれます。 |
total_tip_received | 注文のすべてのチップ額の合計です。 |
discounts | ディスカウントの合計額です。 |
transactions | 注文に関連付けられた取引のリストです。 |
taxes_included | 注文の小計に税が含まれているかどうかを示します。 |
tax_lines | 返品前の、注文の項目に適用されたすべての税項目のリストです。税項目の価格は、同じ税率と名前を持つすべての税項目の合計金額を表します。 |
customer | 注文を行ったお客様です。 |
shipping_address | 注文の配送先住所です。 |
shipping_groups | 注文の発送グループのリストです。各グループには、一緒に発送される項目が含まれています。 |
返品オブジェクト
| プロパティ | 説明 |
|---|---|
name | Shopify 管理画面の注文ページと注文状況ページに表示される、返品の一意の ID です。たとえば、「#1000-R1」などです。この値は、複数のストアで一意ではありません。 |
created_at | 返品が作成された日時 (ISO 8601形式) です。 |
is_unverified | 返品が未確認の返品として作成されたかどうかを示すブール値。 |
is_exchange | 返品に交換が含まれるかどうかを示すブール値です。これには、ギフトカードへの返金も含まれます。 |
exchange_type |
返品に交換が含まれる場合の、交換のタイプです。指定できる値は、LIKE_FOR_LIKE、NET_REFUNDABLE、NET_PAYABLE です。
|
return_discount | 返金された注文ディスカウントの合計額です。 |
return_subtotal |
ディスカウント適用前の、すべての返品項目の価格の合計です。taxesIncluded が true の場合、小計には税金も含まれます。
|
return_total | 返金可能な合計金額。これには、税、ディスカウント、配送料、チップが含まれます。実際の返金金額ではない場合があります。 |
exchange_subtotal |
ディスカウント適用前の、交換におけるすべての新しい項目の価格の合計です。taxesIncluded が true の場合、小計には税金も含まれます。
|
exchange_total | 交換におけるすべての新しい項目の合計額です。これには税とディスカウントが含まれます。 |
total_cash_rounding_adjustment | 返品または交換に適用された現金取引の端数調整です。 |
total_adjusted_amount | 現金取引の端数調整によって調整された、返品または交換の合計額です。 |
net_total | 現金取引の端数調整前の、返品または交換で実際に支払われた、または返金された合計額です。 |
return_line_items | 返品された項目。 |
exchange_line_items | 交換で追加された新しい項目。 |
return_tax_lines | 返品された項目の税項目です。 |
exchange_tax_lines | 交換における新しい項目の税項目です。 |
shipping_refund_amount | 返金された送料の金額です。 |
tip_refund_amount | 返金されたチップの金額です。 |
transactions | 返品または交換に関連付けられた取引です。 |
発送グループオブジェクト
| プロパティ | 説明 |
|---|---|
destination | 発送される商品の配送先です。 |
products | 発送される商品のリストです。 |
項目オブジェクト
| プロパティ | 説明 |
|---|---|
id | 項目の ID です。 |
name | 商品のタイトルです。該当する場合、バリエーションのタイトルが任意で付加されます。 |
variant_title | 注文作成時のバリエーションのタイトルです。 |
price | 注文作成時の項目の単価です。この値にディスカウントは含まれません。 |
is_gift_card | 項目がギフトカードの購入を表すかどうかを示します。 |
discount | ディスカウント適用によって項目に割り当てられた合計ディスカウント額です。返金および削除された数量に割り当てられたディスカウントも含まれます。 |
total_price | この項目の合計金額です。 |
selling_plan_name | 項目に割り当てられたサブスクリプションプランの名前です。 |
tax_rates | この項目の税項目です。 |
custom_attributes | カスタム機能や特別なリクエストを表す属性のリストです。 |
variant_title | バリエーションの名前です。 |
variant_id | バリエーションの ID です。 |
variant_metafields | マーチャントがバリエーションに関連付けたカスタムフィールドのリストです。 |
staff_member_description | 項目に割り当てられたスタッフメンバーです。 |
product_metafields | マーチャントが商品に関連付けたカスタムフィールドのリストです。 |
返品項目オブジェクト
項目オブジェクトのすべてに加えて、以下のプロパティが含まれます。
| プロパティ | 説明 |
|---|---|
return_reason | 項目の返品理由。 |
return_reason_note | 返品理由に付随する任意のメモです。 |
領収書コードエディタで使用可能な Liquid フィルター
Liquid フィルターを使用すると、領収書テンプレートの情報に調整を加えることができます。たとえば、通貨のフォーマットや、税コードなどの特定のテキストの大文字小文字を変更できます。
フィルターを適用するには、二重中括弧 {{ }} で囲まれた Liquid コードのブロック内で、パイプ文字 | の後にフィルターを追加します。フィルターは Liquid コードのブロックにのみ適用できます。
次の例では、フィルターが税コードを小文字から大文字に調整します。
{{ tax_line.title | upcase }}コードブロックの例では、product はオブジェクト、title はそのプロパティ、upcase は適用されるフィルターです。upcase フィルターは、tax_line.title の値の大文字表記を大文字に変更します。たとえば、tax_line.title の値が Hst の場合、upcase フィルターはその値を HST に変更します。
Liquid フィルターの使用方法の詳細については、Shopify テーマの Liquid リファレンスのフィルターセクションを参照してください。
領収書コードエディタでは、以下のフィルターを利用できます。
| プロパティ | 説明 | |
|---|---|---|
t | 事前定義されたラベルを、ロケーションに割り当てられた言語に翻訳します。 | |
money | 価格をロケーションの通貨でフォーマットします。 | |
escape |
HTML の特殊文字 (<>、'、& など) をエスケープし、それらの文字をエスケープシーケンスに変換します。
| |
barcode | 1D バーコード SVG を生成します。 | |
qrcode | 2D バーコード SVG を生成します。 |
印刷される領収書テンプレートのコードカスタマイズの例
Liquid を使用して、条件付きメッセージを追加できます。この機能は、ビジュアルエディタで単一のロケーションに保存する機能と似ています。たとえば、ビジネスを単一のロケーションで開始し、現在は複数の新しいロケーションがあるとします。その場合に、印刷される領収書で元のストアを強調表示することができます。
コードエディタの [セクション] フォルダーにある header.liquid テンプレートにカスタムメッセージを追加し、Liquid を使用して、旗艦店であるロケーションにのみそのメッセージを表示することができます。
以下のコードは、ロケーションの名前 (この場合は「Home」という名前の最初のロケーション) を確認し、ロケーションがその名前と一致する場合に「1972年開店の最初のストアにようこそ。」というメッセージを表示します。他のロケーションで印刷された領収書には、代わりに「ストアにようこそ。」というメッセージが表示されます。
{% if location.name == 'Home' %}
Welcome to our original store, opened in 1972.
{% else %}
Welcome to our store.
{% end %}コードエディタでコードの変更をプレビューする
管理画面の POS コードエディタで、印刷されるレシートへの変更をプレビューできます。
選択されている Liquid ファイルに応じて、プレビューウィンドウには、そのファイルの影響を受ける領収書のデザインまたはセクションが強調表示されます。デフォルトでは、プレビューウィンドウには最新の POS 注文のコンテンツが表示されます。gift-card.liquid ファイルを除き、すべての Liquid ファイルのプレビューウィンドウで領収書のコンテンツとして使用する特定の注文を選択できます。gift-card.liquid ファイルでは、選択可能なプレビューオプションとしてさまざまなロケーションのみが表示されます。
手順：
すべての POS Pro のロケーション
管理画面から、POS > 設定に移動します。
カスタマイズセクションで、印刷されたレシートをクリックして POS エディタを開きます。
[領収書をカスタマイズする] をクリックします。
[コードを編集] をクリックします。
プレビューするコードファイルをクリックします。領収書が右端のエディタウィンドウに表示されます。
任意：プレビューウィンドウで領収書のコンテンツとして使用する特定の注文を選択するには、以下の操作を行います。
アイコンをクリックします。- すべてのロケーションの POS チャネルで行われた販売が、[プレビューする注文を選択] ダイアログに表示されます。リストから注文を選択するか、検索バーを使用して特定の注文やロケーションを検索します。
- [確定] をクリックします。
任意：
gift-card.liquidファイルをプレビューしている場合は、 アイコンをクリックし、テンプレートをプレビューするロケーションを選択します。
Lite またはイタリアのロケーション
管理画面から、POS > 設定に移動します。
カスタマイズセクションで、印刷されたレシートをクリックして POS エディタを開きます。
[領収書のカスタマイズ] ページで、[コードエディタ] をクリックします。
プレビューするコードファイルをクリックします。領収書が右端のエディタウィンドウに表示されます。
任意：プレビューウィンドウで領収書のコンテンツとして使用する特定の注文を選択するには、以下の操作を行います。
- アイコンをクリックします。
- すべてのロケーションの POS チャネルで行われた販売が、[プレビューする注文を選択] ダイアログに表示されます。リストから注文を選択するか、検索バーを使用して特定の注文やロケーションを検索します。
- [確定] をクリックします。
任意：
gift-card.liquidファイルをプレビューしている場合は、 アイコンをクリックし、テンプレートをプレビューするロケーションを選択します。