【シンプルサンクスカスタム】サンクスページに画像や文字を設定する方法

ここでは「SAKUシンプルサンクスカスタム」を使って、購入完了後の「サンクスページ」に、お礼の文字や画像（LINEのQRコードなど）を表示する方法をご説明します。

サンクスページ（購入が終わったときに表示されるページ）は、Shopifyのエディタでは「サンキュー」（英語表示では「Thank you」）と表示されます。同じものです。

設定は大きく2つです。①アプリで「ブロック」（表示する内容のひとかたまり）を作る、②そのブロックをチェックアウトエディタで「サンクスページ」に置く。この2つだけです。

テキスト・画像・カスタムHTML・おすすめ商品のブロックは無料プランでも使えます（作成・表示できるのは2件まで）。LINEのQRコード設置だけなら無料で足ります。

この記事でわかること

• アプリのホーム画面とセットアップガイドの見方
• テキストブロックと画像ブロックの作り方（色・サイズ・変数・画像の選び方）
• ブロックの並び替えと、サンクスページへの配置のしかた
• 無料プランで使えるブロックの数
• うまく表示されないときの確認ポイント

操作する場所：Shopify管理画面 → アプリ →「SAKU Thanks Custom」（ホーム画面）

始める前に用意するもの

• 「SAKUシンプルサンクスカスタム」をインストールしておく。
• プラン：テキスト・画像・カスタムHTML・おすすめ商品のブロックは無料プランで使えます（作成・表示できるのは2件まで）。クーポンのブロックだけはProプランが必要です。
• 画像ブロックを使うとき：ストアの「ファイル」に入っている画像（例：LINEのQRコード）。まだ入っていなくても、手順4でアップロードできます。

全体の流れ

1. アプリで「ブロック」を作る（手順2〜4）。
2. ブロックの順番と「表示中」を確認する（手順5）。
3. チェックアウトエディタでサンクスページに置き、「保存」を押す（手順6）。
4. アプリのホームで、ガイドのステップ2が完了したことを確認する（手順7）。

1️⃣ アプリを開いて、セットアップガイドを確認する

Shopify管理画面の左メニュー「アプリ」から「SAKU Thanks Custom」を開きます。最初に表示されるのが「ホーム」画面です（見出しは「SAKUシンプルサンクスカスタム」）。アプリ内の左メニューには「ブロック管理」「ヘルプ」「料金」の3つがあります。

ホームの下のほうに「セットアップガイド」があります。「はじめてのセットアップ」の中に、順番に進めるステップが並んでいます。右上には「4件中 0件 完了」のように進み具合が出ます。

• 無料プランのステップは2つです。「1. ブロックを作成」「2. ブロックをThank youページに表示する」。
• Proプランと開発ストアでは、さらに「3. 注文状況ページにクーポンブロックを追加」「4. クーポンをメールで送る」（どちらも「任意」）が加わり、4つになります。
• まだ終わっていない最初のステップが、自動で開きます。ほかのステップは、行の右端の矢印をクリックすると開きます。

基本機能は、無料プランでも課金の手続きなしで使えます。この記事では、ステップ1と2を進めます。

2️⃣ ブロックの種類を選ぶ

ホームのステップ1にある「新規ブロック作成」を押します。左メニューの「ブロック管理」を開き、右上の「新規ブロック作成」を押しても同じです。

「新規ブロック作成」という画面が開き、「ブロック種別を選択」に5つの種類が並びます。

ブロックは、無料プランでは2件まで作れます。3件目を作ろうとすると保存のときにエラーになります（詳しくはブロックの並び替え・表示切替・複製・削除のしかたをご覧ください）。クーポンは無料プランでは選べず、料金ページへ移動します。

まず「テキスト」をクリックします。画面の見出しは「新規ブロック作成（テキスト）」になります。ブロックの種類は、作ったあとで変えられません。

おすすめ商品、カスタムHTML、クーポンは、それぞれ別の記事で解説しています。

3️⃣ テキストブロックを作る

QRコードの画像だけを置きたいときは、この手順3を飛ばして、手順4に進んでください。

画面の左がフォーム、右が「プレビュー」です。入力すると、右のプレビューで見た目を確認できます。

上から順に入力します。

• 「基本設定」の「ブロック名（管理用）」（必須・100文字まで）：自分が見分けるための名前です。サンクスページには表示されません。
• 「基本設定」の「このブロックをサンクスページに表示する」：最初からオンです。オフにすると、ブロックは作られますがサンクスページには出ません。
• 「内容」の「表示タイトル」（任意）：見出しです。太字・リンクが使えます。
• 「内容」の「本文」：ツールバーで「太字」「リンク」「箇条書き」「番号付きリスト」が使えます。文字を選んでから押してください。
• 「色」と「サイズ」：文字の色と大きさを選びます。
• 「表示スタイル」の「このブロックを中央寄せにする」：オンにすると、タイトルも本文もまんなかに寄ります（最初はオフ）。

「色」で選べるのは、標準・淡色・アクセント（ストアのブランド色）・青・緑・オレンジ・赤です。「サイズ」は、見出し・標準・小から選びます。最初は、タイトルが「標準色・見出し」、本文が「標準色・標準」です。サイズを「見出し」にすると色の指定は効きません。

「リンク」を押すと「リンクURLを入力してください（https://...）」という入力欄が出ます。https で始まるURLだけが有効です。

入力できる文字数は、タイトルが200文字、本文が5000文字までです。本文が空だと「本文を入力してください」、超えると「本文は5000文字以内で入力してください」と出ます。

タイトルと本文には、次の「変数」を書けます。購入者ごとに、実際の値に置きかわります。

上の3つ以外の変数を書くと、空欄になります。プレビューには、サンプルの値（ストア名は「サンプルストア」）が入ります。

変数は、そのまま本文の中に半角で入力します。例：「ご注文番号 {{ order_name }} をありがとうございます。」と書くと、購入者の画面では「ご注文番号 #1001 をありがとうございます。」と表示されます。

入力が終わったら、画面の下の「保存」を押します。「キャンセル」を押すと一覧に戻ります。保存していない変更があるときは「未保存の変更があります」というバッジが出ます。保存すると「ブロック管理」の一覧に戻ります。

保存していない変更があるまま離れようとすると、変更を破棄してよいかの確認が出ます。画面の幅が狭いときは、プレビューがフォームの下に回ります。プレビューの下には「簡易プレビューです。実際の表示はサンクスページのデザインに合わせて調整されます。」と出ます。本文などが空のあいだは、「本文を入力するとプレビューが表示されます」のような案内が出ます。

4️⃣ 画像ブロックを作る（QRコードやバナー）

もう一度「新規ブロック作成」を押し、今度は「画像」を選びます。画面の見出しは「新規ブロック作成（画像）」です。

• 「ブロック名（管理用）」を入力します（例：LINE友だち追加バナー）。
• 「内容」の「画像」の下にある「ファイルから選択」を押します。まだ選んでいないときは「画像が選択されていません」と出ます。
• Shopifyの「ファイル」の選択画面が開きます。ストアに保存済みの画像から1枚選びます。画像がまだストアに入っていないときは、開いた画面からアップロードして、パソコンから画像を選びます。アップロードが終わったら、その画像を選んで、選択画面の確定ボタンを押します。
• 選び終わると、ボタンが「画像を変更」に変わり、小さな見本画像が出ます。
• 「画像の代替テキスト」（200文字まで）：画像が表示されないときや、読み上げで使われる説明文です。空欄にすると、ファイルに設定されている代替テキストが自動で入ります。
• 「クリック時のリンクURL（任意）」：画像を押したときに開くページです。https で始まるURLだけが有効です（例：LINE公式アカウントのURL）。
• 「リンクを新しいタブで開く」：最初からオンです。

画像は、ストアの「ファイル」から選ぶ方式です。URLを直接入力することはできません。ファイルを登録した直後は、処理が終わるまで選べないことがあります。少し待ってからもう一度お試しください。

画像の縦横の比率は、保存のときに自動で測られ、サンクスページの表示に使われます。

次に、画像の見た目を調整します。上の画像の下側にある「表示スタイル」です。

• 「画像の大きさ（％）」：10〜100で入力します（最初は100）。ブロックの幅に対する割合で、100だと横幅いっぱいです。範囲外の数字は、10〜100に自動で直ります。
• 「画像の配置」：左寄せ（最初）・中央寄せ・右寄せから選びます。

エラーが出たときは、次のとおりです。「画像を選択してください」「httpsで始まる有効なURLを入力してください」（画像やリンクのURLが正しくないとき）「代替テキストは200文字以内で入力してください」。

「保存」を押して完了です。

5️⃣ ブロックの順番と「表示中」を確認する

保存すると「ブロック管理」の一覧に戻ります。ブロックは、上から順にサンクスページに表示されます。

• 順番を変えるには、各ブロックの左端にある、点が並んだアイコン（ハンドル）をドラッグします。ハンドルをクリックしてから、キーボードの上下の矢印キーを押しても動かせます。ハンドルの上下にある矢印のボタンでも動かせます。変えると「並び順を保存しました」と表示されます。
• ブロックの横に緑の「表示中」バッジが付いていれば、サンクスページに表示されます。「非表示にする」を押すと「非表示」になり、サンクスページから消えます。もう一度表示したいときは「表示する」を押します。
• 「編集」で内容を直せます。「複製」でコピーを作れます。コピーは「非表示」の状態で作られます。「削除」は、「削除しますか？」の確認で「削除」を押すと消えます。
• 右側の「プレビュー」では、「PC」「スマホ」を切り替えて見た目を確認できます。

並び替え・複製・削除の詳しい説明はブロックの並び替え・表示切替・複製・削除のしかたです。PC・スマホや顧客タグで出し分けたいときはスマホ・PC／顧客タグでブロックの表示を出し分ける方法をご覧ください。

ここまでで、アプリ側の作業は終わりです。ホームに戻ると、ステップ1に緑のチェックが付いています。

6️⃣ チェックアウトエディタで、サンクスページに置く

ホームのステップ2「ブロックをThank youページに表示する」を開きます。説明の下に、「サンクスページに移動」と「ブロック管理を開く」の2つのボタンがあります。

「サンクスページに移動」を押します。別のタブで、Shopifyのチェックアウトエディタが開きます。サンクスページ（Thank youページ）が選ばれ、左側にアプリの一覧が開いた状態になります。

「SAKU Thanks Custom」の項目の右にある「＋」を押し、「追加先：」から「サンキュー」を選びます。

赤枠のページ切り替え、「ブロックを追加」、「SAKU Thanks Custom」の項目を順に押します。

追加されると、左側に「SAKU Thanks Custom」と「サンキュー」が表示されます。

最後に、チェックアウトエディタの右上にある「保存」を押します。保存しないと、ストアには反映されません。

「SAKU Thanks Custom」には、エディタ側で設定する項目はありません。どのブロックを出すかは、アプリの「ブロック管理」で決めます。

もしステップ2のボタンから開かないときは、Shopify管理画面の「設定」→「チェックアウト」→「カスタマイズ」でエディタを開きます。画面上部のページ切り替えで「サンキュー」（英語表示では「Thank you」）のページを選び、左側の「アプリマーク」から「SAKU Thanks Custom」を追加して「保存」します。

エディタのプレビューは、実際のサンクスページとは少し違います。顧客タグの条件は無視され、「表示中」のブロックがすべて出ます。無料プランでは先頭2件までです。

7️⃣ ガイドのステップ2が完了するのを確認する

アプリのホームに戻ります。次の2つがそろうと、ステップ2に自動でチェックが付きます。

• 「表示中」のブロックが1件以上ある。
• チェックアウトエディタに、サンクスページ用のアプリブロックが置かれている（アプリが自動で検出します）。

アプリが検出できない状態のときだけ、チェックボックスを自分で押して完了にできます。手動で付けたチェックは、完了アイコンを押すと未完了に戻せます。

すべてのステップが終わると、見出しが「セットアップ完了」になり、「完了」のバッジと「すべてのステップが完了しました。ブロックはサンクスページに表示されています。ブロック管理からいつでも編集できます。」が出ます。ボタンは「ブロック管理を開く」と「サンクスページに移動」です。

設定後のストア表示

実際に購入して、サンクスページ（購入完了ページ）を確認してください（やり方はサンクスページからメルマガ会員を増やすの手順7をご覧ください）。ブロックは、ブロック管理の並び順どおり、上から縦に並びます。ブロックのあいだには、標準の余白が入ります。表示するブロックが0件のときは、何も表示されません。

下は、ログインせずに購入した注文の、実際のサンクスページです。お礼の文章（注文番号が入っています）、LINEのバナー、おすすめ商品、配送のご案内が並んでいます。この注文はゲスト購入（未入金の支払い方法）だったため、クーポンのブロックは表示されていません。

• テキストブロック：タイトルと本文が表示されます。段落・太字・斜体・リンク・箇条書きが使えます。注文番号などの変数は、その注文の値に置きかわります。
• 画像ブロック：指定した大きさと配置で表示されます。リンクを設定した場合は、画像全体がリンクになります。「新しいタブで開く」の設定も反映されます。画像のURLが無効なときは、ブロックごと表示されません。
• テスト注文でも、これらの通常のブロックは確認できます。クーポンだけは別の条件があります（クーポンが表示されない・発行されないときをご覧ください）。
• 「PC」と「スマホ」は、ブラウザのウィンドウ幅ではなく、ブロックが表示される領域の幅で判定されます。領域の幅が450pxより広いとPC、450px以下だとスマホとして扱われます。

うまくいかないとき

• ガイドのステップ2にチェックが付かない
  ①ブロックがすべて「非表示」になっていないか、②チェックアウトエディタでアプリブロックを追加して「保存」したか、を確認します。③アプリが検出できないときは、チェックボックスで手動完了にできます。④公開中のチェックアウト構成が取れない場合は、リンクがエディタのトップに移動します。その場合は、ページ切り替えで「サンキュー」を選んでください。
• 「サンクスページに移動」を押してもアプリの一覧が開かない
  エディタのトップに移動した可能性があります。上の手順のとおり、ページ切り替えで「サンキュー」を選び、左側の「アプリマーク」から「SAKU Thanks Custom」を追加してください。
• 作ったブロックがサンクスページに出ない
  ほとんどは、アプリブロックの置き忘れ、保存し忘れ、ブロックが「表示中」でない、無料プランで3件目以降、のどれかです。確認の順番をブロックが表示されないときの確認ポイントにまとめています。
• 3つ目のブロックが作れない
  無料プランでは作成できるのは2件までです。不要なブロックを削除するか、Proプランにアップグレードしてください（プランの違いと変更方法）。
• 画像の選択画面が開かない／画像が選べない
  選択画面が使えないときは、何も起きません。URLを直接入れる方法はありません。ページを再読み込みしてもう一度お試しください。登録したばかりのファイルは、処理が終わるまで選べないことがあります。
• アプリの画面が英語で表示される
  Shopify管理画面の言語が日本語以外のときは、アプリも英語で表示されます。管理画面の言語を日本語にしてください。サンクスページの文言も、購入者の言語が日本語以外のときは英語になります（ブロックに自分で入力した文章は、そのまま表示されます）。
• 「アプリを開けません」と出る
  Shopify管理画面からアプリを開き直してください。このアプリには、ストア名を手入力するログイン画面はありません。