NEW
NEW
アプリの特徴
【無料プラン】
サンクスページに「画像」「テキスト」「カスタムHTML」「おすすめ商品」「クーポン」を表示
LineQRコード設置だけなら無料で実装可能！
※ブロック２つまで無料で表示可能
【Proプラン】
サンクスページにクーポンを設置し、クーポン発行（かつメールでクーポンをお届け）と引き換えにメルマガ配信の同意を得て、購読者を増やす施策が可能
※注意
新バージョンのサンクスページに移行済みのストアが対象
HTMLやCSSがよく分からないときは、このブロックは使わず、「テキスト」ブロックを使ってください。太字・リンク・箇条書きが、ボタンを押すだけで使えます（記事「サンクスページに画像や文字を設定する方法」）。この記事は、HTMLを書ける方向けです。
【言葉の説明】「ブロック」は、サンクスページに表示する内容のひとかたまりです（このアプリの「ブロック管理」で作ります）。「アプリブロック」は、Shopifyのチェックアウトエディタに置く「SAKU Thanks Custom」のことです。アプリブロックを置くと、作ったブロックがサンクスページに表示されます。
サンクスページに、自由な文章をHTMLで表示する「カスタムHTML」ブロックの使い方です。使えるタグや装飾（CSS）には制限があります。できること・できないことを、この記事で確認してください。カスタムHTMLブロックは、無料プランでも使えます（作成・表示できるブロックは2件まで）。
この記事でわかること
- カスタムHTMLブロックの作り方
- 使えるタグ・使える変数・使えるCSS
- 入力エラーが出たときの直し方
- サンクスページでの表示
操作する場所：Shopify管理画面 → アプリ →「SAKU Thanks Custom」 →「ブロック管理」→「新規ブロック作成」→「カスタムHTML」
1️⃣ 「カスタムHTML」のブロックを作る
左メニューの「ブロック管理」→「新規ブロック作成」を開き、「ブロック種別を選択」の中の「カスタムHTML」（説明は「許可されたタグでHTMLを表示します。」）をクリックします。画面の見出しは「新規ブロック作成（カスタムHTML）」です。
「基本設定」の「ブロック名（管理用）」（必須・100文字まで）を入力します。サンクスページには出ません。「このブロックをサンクスページに表示する」は、最初からオンです。このブロックには、「表示タイトル」の欄はありません。タイトルは、HTMLの本文の中に書きます。
赤枠の「基本設定」で、ブロック名の入力と表示のオン・オフを設定します（画面はクーポンブロックの例です。カスタムHTMLにも同じ「基本設定」があります）。
2️⃣ 「HTML本文」を入力する
「内容」の「HTML本文」に、HTMLを入力します（8行の入力欄・10000文字まで）。使えるタグは、次の8つだけです。
| タグ | 意味 |
|---|---|
| p | 段落 |
| br | 改行 |
| strong | 太字 |
| em | 斜体 |
| a | リンク（https のURLだけ） |
| ul | 箇条書きの全体 |
| ol | 番号付きリストの全体 |
| li | リストの1項目 |
入力例です。
<p><strong>配送について</strong></p>
<ul>
<li>通常2〜3営業日で発送します。</li>
<li>ご不明点は<a href="https://example.com/contact">お問い合わせ</a>ください。</li>
</ul>- script など、使えないタグは、保存のときに削除されます。
- Liquid（{% %} や {{ product.title }} など）は使えません。
- 変数は、次の3つだけ使えます。購入者ごとに、実際の値に置きかわります。
| 書き方 | 表示される内容 |
|---|---|
| {{ order_name }} | 注文番号（「#1001」のように「#」付き） |
| {{ confirmation_number }} | 確認番号 |
| {{ shop_name }} | ストア名 |
上の3つ以外の変数は、空欄になります。プレビューでは、サンプルの値で表示されます。
3️⃣ 「CSS」で見た目を整える（任意）
「表示スタイル」の「CSS（このカスタムHTML内のみ）」に、装飾を入力できます（6行の入力欄・5000文字まで）。このCSSは、このHTMLブロックの中だけに効きます。
Shopifyのチェックアウトの仕組みの制限で、装飾に使える指定が決まっています。
| 種類 | 使えるもの |
|---|---|
| セレクタ（どこに効かせるか） | :host（ブロック全体）、p、strong、em、a |
| プロパティ（何を変えるか） | color、background、padding、border、border-radius、gap、font-size、font-weight、font-style |
効くプロパティは、セレクタごとに違います。:host は背景・枠・余白・角丸・間隔、p は文字色・文字サイズ・斜体の解除、strong と em は文字色・太さ・斜体、a は文字色（標準色のみ）だけが効きます。たとえば a { color: red; } は効きません。
入力した値は、チェックアウトのデザインに合わせた、決まった段階に丸められます。たとえば次のようになります。
- color：black・gray・blue・green・orange・red のような色の名前が使えます（一部の16進の色もあります）。ほかの色は、効きません。
- background：white・gray・transparent など、少ない種類だけが使えます。
- padding、border-radius、gap：「12px」のような数字は、近い段階に丸められます。
- font-size：14px以下は「小」、それより大きいと「標準」になります。
- font-weight は bold、font-style は normal だけが効きます。
url()、calc()、var() などは使えません。
入力例です。
:host { padding: 12px; background: gray; border-radius: 8px; }
strong { color: red; }プレビューには、CSSは反映されません（「CSSはプレビューに反映されません（このHTMLブロック内にのみ適用されます）」と表示されます）。CSSの効き具合は、サンクスページで確認してください。
4️⃣ 保存して、エラーを確認する
画面の下の「保存」を押します。エラーが出たときは、次のとおり直します。
| エラー | 直し方 |
|---|---|
| HTMLを入力してください | 「HTML本文」が空です。入力してください。 |
| HTMLは10000文字以内で入力してください | HTML本文を短くします。 |
| CSSは5000文字以内で入力してください | CSSを短くします。 |
| 表示できる内容がありません。許可タグ（p, br, strong, em, a, ul, ol, li）で入力してください | 使えるタグで入力します。使えないタグだけだと、表示できる内容が残りません。 |
| 対応しているCSSがありません。:host, p, strong, em, a に color, background, padding, border などを指定してください | CSSを入力したのに、使えるセレクタ・プロパティがひとつもないときに出ます。上の表の範囲で書きます。 |
【忘れずに】このあと、サンクスページに「SAKU Thanks Custom」を置く作業が必要です。置かないと、何も表示されません。置いていないときは、①「ホーム」のセットアップガイドのステップ2「サンクスページに移動」を押す、②開いた画面で「SAKU Thanks Custom」の右の「＋」を押し、「追加先：」から「サンキュー」を選ぶ、③右上の「保存」を押す、の順に行います。詳しくは記事「サンクスページに画像や文字を設定する方法」の手順6をご覧ください。
設定後のストア表示
サンクスページには、許可されたタグの段落・リスト・太字・斜体・リンクが表示されます。CSSは、チェックアウトのデザインに合わせた設定に変換されて、枠・背景・余白・文字色などに反映されます。
うまくいかないとき
-
Liquidを書いたのに動かない
カスタムHTMLでは、Liquidは使えません。使える変数は、{{ order_name }}、{{ confirmation_number }}、{{ shop_name }}の3つだけです。 -
CSSを書いたのに効かない
使えるセレクタは :host、p、strong、em、a だけです。効くプロパティは、セレクタごとに違います（たとえば a { color: red; } は効きません）。色や数字は、決まった段階に丸められます。プレビューには、CSSは反映されません。サンクスページで確認してください。 -
scriptやstyleタグが消える
安全のため、許可されたタグ以外は、保存のときに削除されます。装飾は、「CSS」の欄に書いてください。 -
リンクが効かない
リンクのURLは、https で始まるものだけが有効です。
