この記事では、ShopifyのテーマでGelatoのPersonalization Studioを設定する方法を案内します。ライブ商品プレビューの有効化、要素を戦略的に非表示にするコツ、そしてテーマが標準対応していなくても、商品ページやカートページに編集ボタンをスムーズに組み込む手順をカバーします。
ライブの製品プレビューを表示
お客さまが、自分用にパーソナライズした商品が目の前で形になるのを想像してみてください。実現するステップはこちらです。
位置特定のために検査する
ウェブブラウザの開発者ツールを開いてください（ウェブページを右クリックして「検証」または「要素を検証」を選択）。
要素ピッカー（一般的には矢印アイコン）を使って、商品ページ上でライブプレビューを表示したい正確な場所を選んでください。
セレクター名をコピーします。これは、選択した領域を識別するコードです（例：「.product-media」）。
セレクターを統合する
Shopifyの管理画面にアクセスして、「Personalization Studio」アプリに移動してください。
アプリの埋め込み設定を見つける
コピーしたセレクター名を、ライブプレビュー用の指定フィールドに貼り付けてください。
設定を保存する。
魔法のような体験を
商品ページを更新してみてください。ほら、ライブプレビューが動き始めます。
ヒント： 正確にターゲットするには、'col-2'、'col-4'、'container' のような汎用セレクターは避けましょう。より具体的なセレクターを使ってください。
要素をシームレスに非表示にする
不要な要素を非表示にして、製品ページをすっきり見やすく保ちましょう。やり方はこうです。
見て選ぶ
ブラウザのデベロッパーツールを開く（右クリック → 検証）。
非表示にしたい要素を特定するには、要素ピッカーを使ってください。
その特定の要素のセレクター名をコピーします。
セレクターを設定する
Personalization Studio のアプリ埋め込み設定に移動します。
要素を非表示にするための指定セクションを見つけてください。
コピーしたセレクター名を、用意されたフィールドに貼り付けてください。
設定を保存する。
消える瞬間を目撃しよう
ページを更新すると、選択した要素は消えます。
パーソナライズされたプレビューでカートページを強化しよう
カートページにパーソナライズされた商品のプレビューを直接表示して、買い物体験をぐっと高めよう。手順は次のとおりです。
検査して見極める
ブラウザのデベロッパーツールを開き、カートページに移動しよう。
要素ピッカーを使って、パーソナライズされたプレビューを表示したいエリアを選ぼう。たいていは、カートアイテムの画像コンテナーの中だよ。
セレクター名をコピーし、プレビュー表示を最適化するために、画像要素そのものを確実にターゲットするよう注意してください。
セレクターを設定する
Personalization Studio のアプリ埋め込み設定に移動します。
コピーしたセレクター名を、カートページのプレビュー用の指定フィールドに貼り付けてください。
設定を保存する。
カートでプレビュー
カートページを再読み込みしてください。カート内の商品にパーソナライズされた商品プレビューが表示され、選んだオリジナル内容を視覚的に確認できます。
ヒント： 正確なパーソナライズ済みプレビューのためには、div 全体ではなく、カート画像をピンポイントで指定しよう。たとえば、cart-item の div 内にある画像タグを狙うのがおすすめ。例：".cart-item img"。
カートページに編集ボタンを置いて、編集をもっと自由に
お客様がカートに商品を追加した後でも、自由に変更できるようにしましょう。カートページに「編集」ボタンを追加するためのステップバイステップガイドはこちらです。
検査して特定する
ブラウザの開発者ツールを開き、カートページに移動してください。
要素ピッカーを使って、各カートアイテムに「編集」ボタンを表示させたい正確な位置を選択しよう。
セレクター名をコピーします。カート内アイテムの一覧から正しい要素を狙うために、:nth-child() のような疑似セレクターを使う場合があります。
セレクターを統合する
Personalization Studio アプリの設定で、カートページの編集ボタンに関するセクションを探してみてください。
コピーしたセレクター名を指定のフィールドに貼り付けてください。
設定を保存する。
更新して見直す
カートページを更新してください。これで「編集」ボタンがちょうどいい位置に表示され、カートから離れずにパーソナライズした商品の内容を変更できるようになります。
セレクターを極めて、狙いを正確に
セレクターは、ウェブ開発という広い世界でのGPS座標のようなもの。効果的に使うコツは次のとおりです。
"div:nth-child()" を理解する： この組み合わせは、グループ内の特定の要素を正確に特定するためのカギです。':nth-child()' セレクターは、親要素にネストされた個々の子要素を狙って指定するのに役立ちます。
親要素を特定する： まず、ターゲットにしたい子要素を内包するコンテナとして機能する親要素を見つけます。たとえば、'cart-item' クラスを持つ div が、画像・タイトル・価格など複数の子要素を含んでいる場合があります。
子要素を数える： 親要素を特定したら、その中にある子要素を数えよう。':nth-child()' セレクターに指定する数値は、狙いたい子要素の位置に対応する。例えば、':nth-child(2)' は指定した親要素内の2番目の子要素を選択する。
Personalization Studio でネイティブにサポートされているテーマの一覧は、こちらをクリックしてください。