アプリの特徴
- お客様がサンクスページ・注文状況ページ・メールから自分で発行
- インボイス登録番号と、8%・10%の税率ごとの内訳に対応
- 会社のロゴ・印鑑・テーマカラーを設定できる
- 管理画面から1件ずつでも、まとめてでも印刷
- 帳票は日本語と英語に対応
- Proプラン：備考の出し分け・発行済みタグ・発行回数の制限
- Hydrogenプラン：ヘッドレス（Hydrogen）ストアでも発行
※注意
「新しいお客様アカウント」対応。
「従来のお客様アカウント」には一部対応。（テーマ「Dawn/Rise/Studio」対応済み）
お客様のマイページ（注文状況ページ）に、領収書・請求書・納品書・見積書をダウンロードできるボタンを設置する方法です。お使いのお客様アカウントの種類（新しいお客様アカウント／従来のお客様アカウント）によって手順が分かれます。
お客様が書類を開く場所は3つあります（注文状況ページ・サンクスページ・注文確認メール）。この記事は「注文状況ページ」の設定です。サンクスページと注文確認メールは、別の記事で設定します。
ボタンの文言は「領収書」「請求書」「納品書」「見積書」です。
※呼び方について：「注文詳細ページ」と「注文状況ページ」は同じ画面です。お客様が自分の注文を開いたときに見るページのことです。「サンクスページ」は購入直後に出る画面で、編集画面では「サンキュー」と表示されます。
全体の流れ
はじめに、設定するとお客様に何が起きるのかを説明します。
- お客様が、ログインして注文状況ページ（マイページ）を開きます。
- 注文の情報の近くに、SAKU領収書のボタン（「領収書」「請求書」「納品書」「見積書」）が並んでいます。
- お客様がボタンを押すと、その注文の書類が開きます。
この記事では、注文状況ページにこのボタンを並べる設定を説明します。新しいお客様アカウントでは、次の4つのステップで設定します。
- チェックアウトエディタを開く
- 注文状況ページに「SAKU buttons - Order page」を追加する
- 表示する書類を選んで、保存する
- ボタンの色を変える（必要なとき）
従来のお客様アカウントの場合は、このあとの【従来のお客様アカウント】の手順で設定します。
始める前に用意するもの
- SAKU領収書（インストール済みであること）
- お店で使っているお客様アカウントの種類（新しいお客様アカウント、または従来のお客様アカウント）。分からなくても大丈夫です。下の「まず、お客様アカウントの種類を見分ける」で見分けます。
確認したいときは、Shopify管理画面の「設定」→「お客様アカウント」を開きます。ここで選ばれているほうが、お店で使っている種類です。
まず、お客様アカウントの種類を見分ける
アプリの「Home」で「設定ガイド」のステップ2を開き、「注文詳細ページを開く」を押すと、お店に合った編集画面が別のタブで自動で開きます。開いた画面を見て、下のどちらに進むか決めてください。
- 左側に「SAKU buttons - Order page」などのアプリの一覧が出て、上に「注文状況」「サンキュー」のページ名が出る画面（チェックアウトエディタ）は、新しいお客様アカウントです。→ 下の【新しいお客様アカウント】へ
- テーマ名（Dawnなど）の入ったテーマの編集画面（テーマエディタ）は、従来のお客様アカウントです。→ 下の【従来のお客様アカウント】へ
アプリの「Home」にある「設定ガイド」のステップ2です。
※設定画面の「テーマ設定」にある「テーマに追加」ボタンからも編集画面を開けますが、開くページが異なる場合があります。この記事では、ホームの設定ガイドのボタンを使います。
【新しいお客様アカウント】の場合
1️⃣ チェックアウトエディタを開く
チェックアウトエディタは、チェックアウトやお客様アカウントの画面を編集する画面です。設定ガイドのボタンからすでに開いている場合は、ステップ2に進んでください。
① Shopify管理画面の左下の「設定」を押し、「チェックアウト」を押します。
② 「チェックアウトとお客様アカウントの設定」の「編集」を押します。
チェックアウトエディタが開けば、ステップ1は完了です。
赤枠の「チェックアウト」を押して開いたページで、赤枠の「編集」を押します。
2️⃣ 注文状況ページに「SAKU buttons - Order page」を追加する
① 画面上部のページ切り替えで、「注文状況」を選びます。
お客様アカウントの注文状況ページの編集画面に切り替わります。ボタンが表示されない場合は、上部のページ切り替えで「お客様アカウント：注文状況」を選んでください。
② 「メイン」の「ブロックを追加」を押します。
③ 一覧から、SAKU Receiptの「SAKU buttons - Order page」を押します。
ブロックが左側の一覧に追加されれば、ステップ2は完了です。一覧のブロックをドラッグして上下に動かすと、ボタンを表示する位置を変えられます。
赤枠の順に、ページ切り替えで「注文状況」を選び、「ブロックを追加」から「SAKU buttons - Order page」を選びます。
3️⃣ 表示する書類を選んで、保存する
① 追加したブロックを、左側の一覧で押します。
右側に「ブロック設定」が開きます。
② ボタンを出したい書類をオン（True）にします。
- 領収書：設定なしで、常に表示されます。
- 「Show Invoice (請求書表示)」：請求書のボタンを出すときにオン（True）にします。
- 「Show Delivery Note (納品書表示)」：納品書のボタンを出すときにオン（True）にします。
- 「Show Quotation (見積書表示)」：見積書のボタンを出すときにオン（True）にします。
- 初期値は3つともオフ（False）です。
ボタンは「領収書」→「請求書」→「納品書」→「見積書」の順に、横幅いっぱいのボタンとして並びます。
③ 画面の右上の「保存」を押します。
保存しないとストアには反映されません。「保存」を押して、保存できれば、ステップ3は完了です。
赤枠の順に、左の一覧のブロック、右の「ブロック設定」、右上の「保存」です。
4️⃣ ボタンの色を変える（必要なとき）
ボタンの色は、チェックアウトエディタの左側の「設定」→「色」の「ボタン」で選びます。注文状況ページ全体のボタンの色が一緒に変わります。
※編集画面の中では、ボタンを押しても書類は開きません。実際の購入者のアカウントでログインして、注文ページで確認してください。
【従来のお客様アカウント】の場合
1️⃣ 「印刷ボタン」をオンにする
テーマエディタが開いたら、画面の左端に縦に並んだアイコンの中から「アプリ埋め込み」を選びます。表示された一覧の「印刷ボタン」をオンにします。
※従来のお客様アカウントでは、お客様の「注文の詳細」ページにだけボタンが表示されます。
2️⃣ テーマ・表示する書類・色を選ぶ
「印刷ボタン」を開くと、「SAKUアプリ設定」の見出しの下に次の項目があります。
| 項目 | 内容 |
|---|---|
| テーマ | お使いのテーマに合わせて「Dawn」または「Rise」を選びます（初期値は「Dawn」）。 |
| 領収書ボタン表示 | 初期状態でオンです。 |
| 請求書ボタン表示 | 初期状態でオフです。 |
| 見積書ボタン表示 | 初期状態でオフです。 |
| 納品書ボタン表示 | 初期状態でオフです。 |
| ボタン背景色 | ボタンの色です（初期値は黒）。 |
| ボタンテキスト色 | ボタンの文字の色です（初期値は白）。 |
新しいお客様アカウントと違って、領収書も含めて4種類すべて、表示するかどうかを選べます。
3️⃣ 保存する
右上の「保存」を押します。
※テーマエディタの画面内では、ボタンを押しても書類は開きません。確認は、購入者のアカウントでログインして、実際の注文ページで行ってください。
※「Dawn」「Rise」以外のテーマをお使いの場合は、ボタンが表示されないことがあります。お使いのテーマ名は、Shopify管理画面の「オンラインストア」→「テーマ」の「現在のテーマ」で確認できます。「Dawn」「Rise」以外でボタンが出ないときは、info@saku-apps.com にテーマ名をお知らせください。
設定後のストア表示
お客様がログインして注文を開くと、注文の情報の近くに書類のボタンが並びます。新しいお客様アカウントの例です（お支払い前の注文のため、領収書は灰色、請求書・見積書は押せる状態です）。
新しいお客様アカウントのボタンは、アプリがお支払い状況を確認してから表示されます（確認できなかったときは通常のボタンが表示されます）。確認している間は、ボタンは表示されません。
代金引換・銀行振込などで、まだお支払いが済んでいない注文では、領収書のボタンが灰色になり「お支払い後に領収書を印刷可」と表示されます。請求書・見積書のボタンは使えます。入金を確認して、Shopifyの注文を「支払い済み」にしたあとにページを開き直すと、領収書のボタンが通常に戻ります。
従来のお客様アカウントでは、注文の詳細表の直前に、ボタンの行が表示されます。スマートフォンの幅では、ボタンが2列に並びます。
詳しくは、「代金引換・銀行振込の注文で領収書を発行する方法」をご覧ください。
※Hydrogen（ヘッドレス）ストアの場合（Hydrogenプラン）：新しいお客様アカウントの注文状況ページのボタンは、Hydrogenストアでも開ける帳票の入口へ自動で切り替わります。設定は上の手順と同じです。Hydrogenで独自に作ったマイページには、テーマの「アプリ埋め込み」は使えないため、ストアを制作した会社にReactのボタン部品を組み込んでもらいます。手順は「Hydrogen（ヘッドレス）ストアでの設定ガイド」をご覧ください。
お客様が書類をダウンロードできる場所は「注文状況ページ」「サンクスページ」「注文確認メール」の3つです。あわせて設定すると便利です：注文状況ページ／サンクスページ／注文確認メール
うまくいかないとき
-
ボタンが表示されない
次の点を確認してください。
・チェックアウトエディタ（従来のお客様アカウントはテーマエディタ）で、ブロックまたは「印刷ボタン」を追加して「保存」したか
・従来のお客様アカウントの場合、テーマが「Dawn」か「Rise」か、「アプリ埋め込み」の「印刷ボタン」がオンか
・新しいお客様アカウントなのに、テーマの「アプリ埋め込み」だけをオンにしていないか（新しいお客様アカウントでは、チェックアウトエディタでブロックを追加します）
・編集画面の中ではボタンが確認できないので、購入者のアカウントでログインして確認する -
領収書ボタンが灰色のまま
支払いが完了していない注文です。Shopifyの注文画面で入金を確認して「支払いを回収する」→「支払い済みとしてマークする」を選ぶと、ページを開き直したときに通常のボタンに戻ります。 -
エディタでボタンを押しても書類が開かない
編集画面では書類を表示できません。購入者としてログインし、実際の注文ページで確認してください。
