エディタを選択して切り替えて、印刷版レシートをカスタマイズする
ビジュアルエディタまたはコードエディタを使用して、印刷版レシートのテンプレートをカスタマイズすることができます。
留意事項
エディタを選択して印刷版レシートをカスタマイズする、およびエディタを切り替える際の考慮事項について、以下を確認してください。
エディタを選択する際の考慮事項
各エディタの違いについては以下を確認してください。
- ビジュアルエディタで行ったカスタマイズは、販売用レシートやギフトレシートなど、すべてのタイプの印刷版レシートに適用されます。コードエディタを使用して、レシートの特定の種類をカスタマイズできます。
- ビジュアルエディタでは、1つのロケーションまたはすべてのロケーションに変更を適用することができます。コードエディタで行われたカスタマイズは、すべてのロケーションに自動的に適用されます。ただし、条件を追加して、特定のロケーションのカスタマイズを表示することができます。Liquidでのコントロールフロータグの使用について詳しくは、こちらをご覧ください。
- コードエディタが有効な場合、Shopify POSアプリからレシートテンプレートをカスタマイズすることはできません。
- 印刷オプションにアクセスするには、ビジュアルエディタでは直接、コードエディタが有効な場合はShopify POSチャネル設定またはPOSアプリからアクセスします。
考慮事項の詳細については、レシートビジュアルエディタを使用する、およびレシートコードエディタを使用するをご確認ください。
エディタを切り替える際の考慮事項
ビジュアルエディタとコードエディタを切り替えて、印刷版レシートをカスタマイズすることができます。コードエディタを切り替える際には、以下の考慮事項を確認してください。
- アクティブなエディタは、管理画面とShopify POSアプリの両方に同時に適用されます。たとえば、管理画面でコードエディタに切り替えた場合、POSアプリを開くと、利用可能な設定がShopify POSアプリに反映されています。
- エディタは管理画面からのみ切り替えることができます。
- デスクトップ上の管理画面からのみ、コードエディタを使用することができます。
- コードエディタはPOS Proロケーションにのみ適用されます。コードエディタを使用する場合に、POS Liteロケーションをお持ちの場合は、ビジュアルエディタを使用してLiteロケーション用にヘッダーとフッターをカスタマイズすることができます。
- カスタマイズは、エディタごとに個別に保存され、エディタを変更しても保持されます。たとえば、ビジュアルエディタでレシートにSKU情報を追加し、コードエディタに切り替えた場合、SKUはレシートに表示されません。ただし、ビジュアルエディタに戻った場合、SKUを表示する設定はビジュアルエディタでは有効となっているため、レシートに表示されます。
コードエディタに切り替える
コードエディタに切り替えて、HTML、CSS、Liquidで印刷版レシートのテンプレートを変更することができます。
コードエディタを使用するには、Shopify POS Proサブスクリプションのロケーションが少なくとも1つ必要です。コードエディタを使用する場合に、POS Liteロケーションをお持ちの場合は、ビジュアルエディタを使用してLiteロケーション用にヘッダーとフッターをカスタマイズすることができます。コードエディタの使用について、詳しくはこちらをご覧ください。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [アプリと販売チャネル] ページで、[Point of sale] をクリックします。
[販売チャネルを開く] をクリックします。
[設定] > [レシートのカスタマイズ] の順にクリックします。
[
...] > [コードを編集] の順にクリックします。[コードを編集] モーダルで、[コードを編集] をクリックして確定します。
ビジュアルエディタに切り替える
ビジュアルエディタに切り替えて、印刷版レシートテンプレートにプリセットのカスタマイズを行うことができます。ビジュアルエディタの使用について、詳しくはこちらをご覧ください。
手順
- 管理画面で、[設定] > [アプリと販売チャネル] の順にクリックします。
- [アプリと販売チャネル] ページで、[Point of sale] をクリックします。
[販売チャネルを開く] をクリックします。
[設定] > [レシートのカスタマイズ] の順にクリックします。
[レイアウトのカスタマイズ] セクションで、[コードエディタ] をクリックします。
...> [ビジュアルエディタに切り替える] の順にクリックします。[ビジュアルエディタに切り替える] モーダルで、[切り替え] をクリックして確定します。