この記事では、Personalization Studio を使うときによく起きる問題への解決策を紹介します。ライブプレビューの不具合のトラブルシューティング、「パーソナライズ」ボタンが表示されないときの対処、商品をカートに追加する際のエラー解消、対応している Shopify テーマの理解などをカバー。既知の制限もふまえ、手順に沿ってわかりやすく説明します。
Personalization Studio のトラブルシューティングガイド
Personalization Studioとのテーマ互換性
Personalization Studio をスムーズに使うには、互換性のある Shopify テーマが欠かせません。以下で、テーマの互換性をわかりやすくまとめました。
完全対応のテーマ
Craft, Dawn, Debut, Editorial, Minimal, Motion, Prestige, Simple, Spark, Streamline, Studio, Symmetry
部分対応のテーマ：
次のテーマは通常プレビューに対応していますが、軽微な歪みや不安定な動作が起きることがあります：Beyond、Brooklyn、Envy、Impulse、Parallax、Supply
非対応のテーマ：
ロフト、倉庫、フォーカス
ライブプレビューの不具合を解決する
ライブプレビュー機能で問題が起きている場合は、次の手順に従ってください。
正しいセレクタの確認
Webブラウザのデベロッパーツールを開こう。ウェブページ上で右クリックして、"Inspect" または "Inspect Element" を選べばOK。
要素ピッカー（通常は矢印アイコン）を使って、ライブプレビューを表示したい商品ページ上の特定のエリアをハイライトしよう。
セレクター名をコピーします。これは、選択した領域を識別するコードです（例：
.product-media）。
Personalization Studio へのセレクターの統合
Shopifyの管理画面にアクセスして、Personalization Studioアプリに移動しよう。
アプリの埋め込み設定を見つけよう。
コピーしたセレクター名を、ライブプレビュー用の指定フィールドに貼り付けてください。
変更を保存する
.product-media や同様のセレクターが見つからない場合は、.product-gallery、.product-image-container、または .product-page__media のような特定のエリアを確認してみてください。正確な場所は、テーマの構造によって異なることがあります。
「パーソナライズ」ボタンの問題への対処
「パーソナライズ」ボタンが見当たらない、または期待どおりに反応しない場合は、次の対処法を試してみてください:
btn-addtocart CSSクラスセレクターを追加する
「カートに追加」ボタンに btn-addtocart クラスが含まれていることを確認してください。このクラスの追加方法は、Shopify のテーマドキュメントを参照するか、テーマ開発者に問い合わせて確認できます。
Gelatoのオリジナル用カスタマイズタグを検証する
商品説明のHTMLを確認し、次のタグが含まれているかチェックしてください。 。このタグがない場合は、機能を復元するために、商品説明のHTMLに挿入し直してください。
「カートが空です」エラーの解決方法
「カートに商品がありません」というメッセージが、［カートに追加］をクリックした後に表示される場合は、次の手順を実行できているか確認してください。
Shopifyの管理画面にログインしてください。
販売チャネルの「Online Store」に移動し、「Themes」を選択してください。
使用中のテーマを見つけて「カスタマイズ」をクリック。
左側メニューで「App Embeds」タブを開いてください。
「App Embeds」で、Gelato Personalizer を有効にします。
変更を保存しよう。
「パーソナライズ」タブを表示するには、各商品の情報を更新してください。Shopify の管理画面で商品を開き、「保存」をクリックして再公開します。新規商品の場合は、リアルタイム更新が自動で有効になります。
よくある質問
ライブプレビューが、ある商品の画像1枚でしか動かないのはなぜ？
これは既知の制限です。現在、ライブプレビューで表示できる画像は一度に1枚のみです。ただし、将来の改善に向けて、開発チームにフィードバックは共有済みです。
テーマを更新したら「パーソナライズ」ボタンが消えた場合はどうすればいい？
テーマ更新後に「パーソナライズ」ボタンが表示されなくなった場合は、HTML 内のbtn-addtocartクラスと、Gelato のカスタマイズ用タグをもう一度確認してください。これらの要素を更新すると、問題が解決することがよくあります。