印刷版レシート用コードエディタ
印刷版レシートは、管理画面のコードエディタを使用してカスタマイズできます。コードエディタを使用すると、HTML、CSS、Liquidを使用してビジュアルエディタよりも高度なカスタマイズを行うことができます。
ここでは、印刷版レシートで使用するレシートテンプレートおよびセクションテンプレートを変更できます。レシートテンプレートファイルはストアで印刷できるタイプのレシートで、セクションはヘッダーやフッターなどのレシートの一部となります。セクションは複数のレシートで共通して使用できます。
目次
レシートコードエディタを使用する際の考慮事項
レシートコードエディタを使用する前に、以下の点を考慮してください。
- デスクトップ上の管理画面からのみ、コードエディタを使用することができます。
- コードの変更は、すべてのPOS Proロケーションに適用されます。ただし、条件を追加することにより、特定ロケーションのカスタマイズ内容を表示することは可能です。Liquidでのコントロールフロータグの使用方法の詳細は、こちらをご覧ください。
- コードエディタに切り替えた場合は、Shopify POSアプリからのレシートテンプレートをカスタマイズすることはできません。ただし、POS Proサブスクリプションプランを契約しているロケーションのShopify POSアプリから、印刷オプションを調整することは可能です。
- コードエディタでのカスタマイズ内容は、POS Proロケーションのみに適用されます。コードエディタを使用する際、POS Liteロケーションがある場合は、ビジュアルエディタを使用してLiteロケーション用にヘッダーとフッターをカスタマイズすることができます。
- レシートを構成するファイルには、Shopifyのテンプレート言語であるLiquidが含まれています。Liquidの使用方法の詳細は、こちらをご覧ください。
- レシートコードエディタでテンプレートを編集するには、HTML、CSS、Liquidに精通している必要があります。Shopifyテーマサポートは、Shopifyのデザインポリシーの範囲内で微調整を行うのに役立ちます。
- 一部のタイプの印刷版レシートはカスタマイズできません。
- イタリアのロケーションでは、コードエディタを利用できません。
レシートタイプの対応状況に関する考慮事項
一部のタイプのレシートは、レシートコードエディタでカスタマイズできません。コードエディタにテンプレートがないタイプのレシートは、カスタマイズに対応していません。
以下のタイプの印刷版レシートはカスタマイズが可能です。
- 販売用レシート
- ギフトカードのレシート
- ギフトレシート
以下のレシートはカスタマイズできません。
- 返品レシート
- 交換レシート
また、イタリアのロケーションでは、全タイプのレシートがカスタマイズに対応していません。
コードエディタを使用する
テンプレートは、コードエディタを使用して編集できます。
手順
管理画面で、[設定] > [アプリと販売チャネル] の順に移動します。
[アプリと販売チャネル] ページで、[Point of sale] をクリックします。
[販売チャネルを開く] をクリックします。
[設定] > [レシートのカスタマイズ] の順にクリックします。
[レシートをカスタマイズ] をクリックします。
[
...] > [コードを編集] の順にクリックします。[コードを編集] ダイアログで、[コードを編集] をクリックします。
レシートテンプレートでカスタムファイルを使用する
レシートは、アップロードしたファイルを使用してカスタマイズできます。レシートに印刷したいカスタム画像がある場合は、管理画面にアップロードして、カスタムレシートに使用することができます。ファイルのアップロードに関する詳細はこちらを参照してください。
手順
管理画面で、[設定] > [アプリと販売チャネル] の順に移動します。
[アプリと販売チャネル] ページで、[Point of sale] をクリックします。
[販売チャネルを開く] をクリックします。
[設定] > [レシートのカスタマイズ] の順にクリックします。
[レシートをカスタマイズ] をクリックします。
[コンテンツページ] をクリックします。
レシートテンプレートに使用するファイルの横にあるリンクをコピーします。
テンプレートにリンクを含めます。
レシートテンプレートをデフォルト状態にリセットする
コードエディタでは、レシートテンプレートをデフォルトバージョンにリセットできます。
手順
管理画面で、[設定] > [アプリと販売チャネル] の順に移動します。
[アプリと販売チャネル] ページで、[Point of sale] をクリックします。
[販売チャネルを開く] をクリックします。
[設定] > [レシートのカスタマイズ] の順にクリックします。
リセットするテンプレートをクリックします。
[リセット] アイコンをクリックします。
[ファイルをデフォルトにリセット] モーダルで、[リセット] をクリックして確定します。
レシートコードエディタで使用可能なLiquid変数
Liquidを使用することにより、印刷版レシートテンプレートおよびレシートタイプをカスタマイズできます。
レシートコードエディタでは、以下のデータオブジェクトを使用できます。
| オブジェクト | 説明 |
|---|---|
shop |
ストア情報 (ストア名など) が含まれます。 |
location |
店舗のロケーション情報 (住所、電話番号など) が含まれます。 |
order |
注文データ (項目、ディスカウント、税、取引情報など) が含まれます。 |
gift_card |
gift_card.liquidテンプレート内でのみ使用できます。ギフトカードのデータ (残高、英数字コード、POSアプリでスキャンできるQRコードの内容など) が含まれます。
|
レシートコードエディタで利用できるLiquidフィルター
Liquidフィルターを使用すると、レシートテンプレート内の情報を調整することができます。たとえば、税コードなどでの通貨形式や特定テキストの大文字と小文字を変更できます。
絞り込みを適用するには、パイプ文字「|」を追加して、二重の中括弧「{{ }}」で囲まれたLiquidコードのブロック内にフィルターを追加します。フィルターは、Liquidコードのブロックのみに適用できます。
以下の例では、フィルターによって税コードが小文字から大文字に変更されます。
{{ tax_line.title | upcase }}このコードブロックの例では、「product」はオブジェクト、「title」はそのプロパティ、「upcase」は適用されるフィルターです。この「upcase」フィルターによって「tax_line.title」の値の文字が大文字に変更されます。たとえば、「tax_line.title」に「Hst」値がある場合は、「upcase」フィルターによって「HST」に変更されます。
「Shopify Themes Liquid」リファレンスの絞り込みセクションで、Liquidフィルターの詳しい使用方法を確認してください。
レシートコードエディタでは、以下のフィルターを使用できます。
| プロパティ | 説明 | |
|---|---|---|
t |
事前定義されたラベルを、ロケーションに割り当てられた言語に翻訳します。 | |
money |
ロケーションの通貨で価格を書式設定します。 | |
escape |
<>、'、&など、HTMLの特殊文字をエスケープし、文字をエスケープシーケンスに変換します。
|
|
barcode |
一次元バーコードSVGを生成します。 | |
qrcode |
二次元バーコードSVGを生成します。 |
印刷版レシートのテンプレートコードのカスタマイズ例
Liquidを使用して条件付きメッセージを追加できます。この機能は、ビジュアルエディタで1か所のロケーションを対象に保存する場合と似ています。たとえば、1か所のロケーションでビジネスを開始した後に、現在は複数か所の新ロケーションがあり、印刷版レシートで元のストアを強調表示したい場合などに使用できます。
この場合は、カスタムメッセージを、コードエディタの「セクション」フォルダの「header.liquid」テンプレートに追加し、Liquidを使用して、フラッグシップのロケーションのみにそのメッセージを表示することができます。
以下のコードでは、ロケーションの名前 (ここでは「Home」) がチェックされ、ロケーションがこの名前と一致する場合に、「Welcome to our original store, opened in 1972.」というメッセージが表示されます。その他のロケーションで印刷するレシートには、代わりに「Welcome to our store.」というメッセージが表示されます。
{% if location.name == 'Home' %}
Welcome to our original store, opened in 1972.
{% else %}
Welcome to our store.
{% end %}