このガイドでは、Shopify ストア内のページ上にあるパーソナライズ要素の見た目をオリジナルに調整する方法を、まとめて紹介します。お客様に合った魅力的なショッピング体験を届けるために役立つ、CSS セレクターとベストプラクティスを一緒に見ていきましょう。
ShopifyのCSS構造を理解する
Shopifyページ上の各パーソナライズ要素は、特定のCSSフレームワーク内で構造化されています。こうした構造により、狙いどおりのスタイリングができ、パーソナライズされた各要素のデザインが一貫します。ここでは主要なコンポーネントを分解して見ていきましょう。
メインコンテナ
メインコンテナーは、すべてのパーソナライズ用コンポーネントを包むラッパーとして機能します。パーソナライズセクション全体にグローバルなスタイルを適用するには、次のクラスを使ってください。
.g-selector-container: このクラスはメインのラッパーを表します。
パーソナライズの種類
テキスト、画像、バリアントなどの異なるパーソナライズの種類は、追加のクラスで区別されます。これにより、コンテンツの種類に応じて特定のスタイルを適用できます。
.g-selector-variants：サイズや色などの製品バリアントに基づくパーソナライズ用。.g-selector-text：テキストベースのオリジナル設定用。.g-selector-image：ユーザーがアップロードした画像など、画像を使ったパーソナライズ向け。.g-selector-collection：カラーのスウォッチやパターンなど、複数のオプションを表示するために使用します。.g-selector-condition：条件付きのパーソナライズロジック用。ユーザーの以前の選択に基づいて、オプションが表示されます。
要素名のラベル
各パーソナライズの種類には、ラベルまたはタイトル用の子要素が含まれます。次のセレクターを使って、このラベルをオリジナルに設定できます。
.g-selector-label：このセレクターを使って、パーソナライズのオプションを説明するテキスト（例：「サイズを選ぶ」「色を選ぶ」）のスタイルを設定します。
Shopify のボタンと状態をオリジナルにカスタマイズする
ボタンはパーソナライズで重要な要素です。バリアントや条件を選ぶ場面でよく使われます。見た目をオリジナルにする方法は次のとおりです。
ボタンコンテナとボタン
.g-selector-buttons：このクラスは、特定のオプションに対応するすべてのボタンを保持するコンテナを表します。.g-selector-button：このクラスは、コンテナー内の各ボタン個別に適用されます。
ボタンの状態
ボタンのさまざまな状態をスタイリングして、ユーザーに視覚的なフィードバックを伝えられます。
.g-selector-button-active：このクラスは、ユーザーが現在ボタンを選択しているときに適用されます。.g-selector-button-disabled: ボタンが利用できない、またはクリックできないときに適用されるクラスです。
Shopifyで画像サムネイルをスタイリングする
色見本など、画像ベースの選択を含むパーソナライズには、次のクラスを使えます。
.g-selector-collection-thumbnail：このクラスは、コレクション内の各画像サムネイルに適用されます。このクラスをオリジナルに調整して、画像のサイズ、枠線、レイアウトを変更できます。
Shopify での CSS オリジナルカスタマイズ例
以下は、CSS を使ってセレクターの見た目をオリジナルにカスタマイズする例です。ブランドとの一貫性を保ち、さまざまなデバイスでレスポンシブに動作するように意識しよう。
/* 一般的なコンテナのスタイリング */.g-selector-container { padding: 20px; border: 1px solid #e0e0e0; background-color: #f9f9f9; } /* ラベルのスタイリング */.g-selector-label { font-size: 14px; color: #333; margin-bottom: 8px; } /* ボタン */.g-selector-button { background-color: #007bff; color: #fff; padding: 10px; border: none; cursor: pointer; } .g-selector-button-active { background-color: #28a745; } .g-selector-button-disabled { background-color: #ccc; cursor: not-allowed; } /* サムネイルのカスタマイズ */.g-selector-collection-thumbnail { width: 100px; height: 100px; border: 2px solid #ddd; margin: 5px; }
Shopifyでのオリジナルカスタマイズのベストプラクティス
一貫性を保つ：サイト全体のブランディングに合うようにオリジナルのカスタマイズを行い、統一感のあるユーザー体験にしよう。
すべてのデバイスでテスト：デスクトップとモバイルの両方で、オリジナルのカスタマイズの表示をテストしましょう。
アクセシビリティを高める：テキストやボタンに高コントラストの色を使い、すべてのインタラクティブ要素に適切なフォーカス状態を設定して、誰にとっても使いやすいサイトにしよう。