定期購買ウィジェットが「表示されない」「崩れる・ずれる」「他のアプリと併用したらおかしい」といった場合に、症状から原因を切り分けて対処できるようになります。
最も多い原因は、「定期購買:Theme設定」がOFFになっているか、テーマを変更した後に新しいテーマで設定・設置をやり直していないことです。
まずは「確認・対処の手順」の STEP 0 からご確認ください。
商品ページに定期購入／定期便のボタン（ウィジェット）が表示されない・出てこない・消えた
ウィジェットは出るが、左寄せになる・レイアウトが崩れる・位置がずれる
スマホ（iPhone）でだけ表示がおかしい
テーマを変更・更新したらウィジェットが表示されなくなった／崩れた
他のアプリ（GemPages・PageFly などのページ作成アプリ等）と併用したら表示がおかしくなった
原因を切り分ける前に、定期購買ウィジェットの表示が何に依存しているかを押さえると、原因を特定しやすくなります。
テーマ単位：「定期購買:Theme設定」のONと、ウィジェットの設置は、テーマごとの設定です。テーマを変更・複製して公開しても、以前のテーマの設定・設置は自動では引き継がれません。
商品詳細ページ限定：ウィジェットは、URLに「/products/」が含まれる商品詳細ページにのみ表示できます。それ以外のページには表示できません。
テーマのCSSの影響を受ける：ウィジェットの見た目（位置・レイアウト）は、テーマ側に設定されたCSSの影響を受けます。
症状 | 主な原因 | 確認する項目 |
|---|---|---|
まったく表示されない | 設定OFF／テーマ変更後の未設置／商品未紐付け／確認画面の誤り | STEP 0、A-1〜A-6 |
テーマ変更・更新の直後に消えた・崩れた | 設定・設置がテーマ単位で引き継がれない／CSS構造の変化 | STEP 0、B-1 |
出るが崩れる・ずれる（左寄せ等） | テーマ側CSSの影響（背景3） | B-1 |
スマホでだけおかしい | 他アプリ／テーマCSSの影響 | C-2、C-3 |
他アプリ併用でおかしい | ページ作成アプリ等との干渉 | C-1、C-3 |
今の症状に近い系統（A / B / C）を、早見表から選んでご確認ください。各項目は上から順に確認するのがおすすめです。
0-1. 「定期購買:Theme設定」がONか
オンラインストア ＞ テーマ ＞ カスタマイズ ＞ アプリ埋め込み で「定期購買:Theme設定」がONかご確認ください。
→OFFだとウィジェットが表示されない等の不具合が出ます。原則ONのままご利用ください。
0-2. テーマを変更・複製して公開した場合は、新しいテーマで設定・設置をやり直す
背景1のとおり、設定・設置はテーマ単位です。テーマを切り替えた（別テーマを新しく公開した・複製して編集版を公開した等）後にウィジェットが消えた場合は、新しく公開したテーマで、改めて「定期購買:Theme設定」をONにし、ウィジェットを設置し直してください（設置手順は A-2 と同じ）。
A-1. 対象商品がプラングループに追加されているか
ウィジェットは、その商品に定期購買プランが紐付いている場合にのみ表示されます。
プラン設定 ＞ 該当プラングループ ＞ 商品の選択 で、閲覧中の商品が追加されているかご確認ください。
A-2. 公開中のテーマにウィジェットを設置済みか
「④ テーマにかんたんインストール」のステップ2（ウィジェットの設置）が、現在公開中のテーマで完了しているかご確認ください。
テーマを変更した場合は引き継がれないため、新しいテーマで設置し直す必要があります（STEP 0-2 参照）。参考：④ テーマにかんたんインストール
A-3. Shopify Paymentが有効になっているか
決済設定が有効でないと、購入導線が正しく表示されないことがあります。
A-4. 確認している画面が正しいか
テーマのカスタマイズ画面・プレビュー画面では、ウィジェットが表示されないことがあります。必ず実際に公開されている商品ページでご確認ください。
A-5. 商品詳細ページで確認しているか（URLに「/products/」が含まれるか）
背景2のとおり、ウィジェットは商品詳細ページ以外には表示できません。商品詳細ページを経由せず定期購入させたい場合は、特集商品セクションや Buy Link をご利用ください。参考：テーマの特集商品セクションから定期購入ができるようにする方法／直接カート/決済ページに遷移させる（Buy Link）
A-6. 同一ページにウィジェットを複数設置していないか
1つの商品ページに定期購買ウィジェットを複数設置すると、動作不良の原因になります。設置は1ページにつき1つにしてください。
背景3のとおり、ウィジェットはテーマ側のCSSの影響を受けます。
B-1. テーマを更新した直後に崩れた（例：左寄せになった） テーマをアップデートすると、テーマ側のCSS構造が変わり、以前に調整した表示位置が新バージョンに引き継がれないことがあります。CSSの再調整が必要です。
※テーマの個別実装に関わるため、ストア様側でテーマCSSファイルにCSSを追記して調整いただくか、難しい場合はご相談ください。（弊社での有償でのご対応も可能です）。
C-1. ページ作成アプリ（GemPages・PageFly 等）上に設置している ウィジェットの表示はページ作成アプリ側の要素構造に依存します。
PageFly：公式連携の設置手順があります。かんたんインストールのステップ3の代わりに、PageFly上にウィジェットを設置してください。
BOX商品：ボタンのリンク先に、BOX設定画面の「BOXページURL」を使用しているかご確認ください。
その他のビルダー：まず C-3 の切り分けを実施し、干渉が確認できた場合は、ビルダー側の仕様に依存するため、切り分け結果を添えてビルダー提供元へご確認ください（弊社ではビルダー側の仕様を確認できないため）。
C-2. 特定の端末（iPhone等）だけ崩れる 他のアプリ、またはテーマ側のCSSの影響が疑われます。C-3 の切り分けをお試しください。
C-3. 干渉の切り分け手順
テーマ編集 ＞ アプリ ＞「定期購買:Theme設定」のチェックを一時的に外す（スクリプトOFF）該当ページを、問題が起きている環境（デバイスやブラウザ）で開き、現象が変わるか確認する
確認後、必ず「定期購買:Theme設定」をONへ戻す
OFFにして改善した → 定期購買アプリと何らかの干渉が起きている可能性
OFFにしても変わらない → 定期購買アプリ以外の要因
※作業は1〜2分程度で、既存の定期購入契約中のお客様への影響はありません。作業中はウィジェットが一時的に非表示になる場合があるため、アクセスの少ない時間帯での実施を推奨します。
Q. テーマを新しくしたら、急にウィジェットが表示されなくなりました。
A. 「定期購買:Theme設定」のONとウィジェット設置はテーマごとの設定です（背景1）。新しく公開したテーマで、改めて設定・設置をやり直してください（STEP 0-2）。
Q. 管理画面のテーマ編集では見えるのに、実際のサイトで見えません（またはその逆）。
A. カスタマイズ画面・プレビュー画面ではウィジェットが表示されないことがあります。実際に公開されている商品ページでご確認ください（A-4）。
Q. トップページやコレクションページに定期購入ボタンを出したいのですが、表示できません。
A. ウィジェットは商品詳細ページ（/products/）にのみ表示できます（背景2）。それ以外のページでは、特集商品セクションや Buy Link をご利用ください（A-5）。
Q. ウィジェットの色・文言・アイコン画像の変更はできますか？
A.ウィジェットのパターンによって異なります。
ラベル（1回決済・定期決済など）の名称：パターン1、2とわず、ノーコードで調整可能
メッセージの表示変更・カラー調整：パターン2でのみノーコードでの調整可能
※CSSを当てていただければ、パターン1でも調整いただける場合がございます。
アイコン画像の変更はできません。
Q. 標準のウィジェットを利用せず、大幅にカスタマイズしたいです
A. 標準の範囲を超える大幅なレイアウト・デザイン変更は、テーマ側のLiquid＋CSSカスタマイズが必要です。ShopifyのLiquidリファレンス（主にSelling plan付近）を参考に実装ください。※Shopifyの提供するリファレンスのため、不明点はShopifyへお問い合わせください
ストア様での対応が難しい場合、弊社で実装を承ることも可能です（有償となります）
上記で解決しない場合は、対象ページのURL・スクリーンショット・myShopify IDを添えてお問い合わせください。