6種類のブロックはどう使い分けますか
| 種類 | 主な用途 |
|---|---|
| テキスト | お礼、案内、注意事項を表示する。見出し、見出しアイコン、本文（2,000文字まで）、文字サイズ、配置（左・中央）を設定できます |
| 画像バナー | バナーや商品画像を表示する。「画像を選択」からアップロードします（推奨サイズ1200×400px、JPG・PNG・WebP・GIF、2MBまで）。外部の画像URLは指定できません。代替テキスト、リンクURL（任意）、角丸表示を設定できます |
| クーポン | 次回購入に使えるクーポンコードを案内する。クーポン自体は、Shopify管理画面の「割引」で先に作成しておきます。お客様はボタンでコードをコピーできます |
| SNSリンク | Instagram、X、LINE、TikTok、YouTubeへのリンクをアイコンで表示する。URLを入力したものだけが表示されます |
| ボタン | 商品、コレクション、外部ページへ誘導する。リンクURLは https:// から入力します。スタイル（塗り・枠線）と背景色・文字色を選べます |
| カスタムHTML | 必要な場合にカスタムHTMLとCSSを表示する（HTMLは5,000文字、CSSは3,000文字まで）。保存時にscriptやiframeなど安全でない記述は自動で取り除かれ、CSSはそのブロック内だけに適用されます。テキスト変数は置き換わらず、{{first_name}} のような記述はそのまま表示されます |
利用できる種類と個数はプランによって異なります。Freeプランで使えるのはテキストと画像バナーの2種類で、カスタムHTMLを含むほかの種類はBasic以上のプランで使えます。
複数ブロックの見た目を整えるには
次の項目は、ThankBuilderの管理画面ではなく、チェックアウトエディタまたはお客様アカウントエディタで、配置したアプリブロックごとに設定します。
- 見出し（任意）
- ブロックのまとまりの上に表示する見出しです。空欄の場合は表示されません。
- 表示する
ブロック （カンマ区切り） - 表示したいブロックのコード（B1、B3など）をカンマ区切りで入力します。書いた順が表示順です。空欄の場合は、すべてのブロックが管理画面の並び順で表示されます。大文字と小文字は区別しません。
- ブロックの
下に 区切り線を 表示 - オンにすると、各ブロックの下に線が入ります（最後のブロックを除く）。
- 各ブロックを
枠 （カード）で 囲む - オンにすると、各ブロックをそれぞれ枠で囲みます。「カードにまとめて表示」がオンのときは使えません。
- カードに
まとめて 表示 - 複数のブロックを1枚のカードにまとめます。マイページ（注文一覧・プロフィール）では最初からオン、サンクスページと注文状況ページでは最初はオフです。
読みやすくするコツ
- 1つのブロックには1つの目的だけを持たせます。
- 左メニューの「ブロック」画面では、行をドラッグして並び順を変えられます。並び替えはすぐにストアへ反映され、「表示するブロック」が空欄のときの表示順になります。
- ボタンの直前に、移動先でできることを書きます。
- 画像だけに情報を載せず、代替テキストも設定します。
- 保存後、スマートフォンの横幅でも表示を確認します。