テーマエディター（OS 3.0テーマ）での商品ページのデザイン方法 – SHOPLINE ヘルプセンター

商品ページは、閲覧が購入に変わる場所であり、顧客の旅路において最も重要な接点の一つです。OS 3.0テーマのテーマエディターを使えば、ズーム可能なメディア、構造化された説明、シンプルな購入ボタン、柔軟なカスタムレイアウトで商品を紹介でき、コードを書く必要はありません。

このガイドでは、商品ページエディターへのアクセス方法、その専用パーツの設定、商品ページのコンテンツ、スタイル、レイアウトのカスタマイズ方法について説明します。

始める前に：ツールを確認しましょう

この記事は、PC版テーマエディター（オンラインストア > デザインからアクセス）内の設定について説明しています。Shopper Appでの商品表示設定をお探しの場合は、「商品詳細ページのデザイン」をご参照ください。

商品ページエディターの使い始め

エディターへのアクセス

テーマエディターにアクセスして商品ページをカスタマイズするには、以下の手順に従ってください：

SHOPLINE管理画面から、オンラインストア > デザインに移動します。
現在のテーマを見つけて、デザインボタンをクリックします。
上部のページセレクターで、商品 > デフォルトを選択します。

専用商品パーツの理解

トップページとは異なり、商品ページには商品カタログから動的データを自動で取得する専用パーツがあります。これらは左側のパーツサイドバーにあります：

商品情報：タイトル、販売価格、税情報などのエッセンシャルなデータを表示します。
バリアントピッカー：サイズ、色、素材などを顧客が選択するために必要です。
購入ボタン：「カートに追加」と「今すぐ購入」のトリガーを含みます。
商品説明：商品管理画面の説明フィールドから内容を同期します。
商品レコメンド：システム生成の「あなたにおすすめ」セクションです。

パンくずリストでナビゲーションを改善

パンくずリストブロックを商品ページに追加すると、顧客がナビゲーション経路（例：ホーム / カテゴリ / 商品）を追跡しやすくなります。現在のページ以外のすべてのノードは完全にクリック可能で、顧客は簡単に前のページ、カテゴリ、またはトップページに戻ることができます。

注：完全な設定手順およびOS 3.0テーマで利用可能なすべてのパンくずリストタイプの概要については、「テーマエディターパーツを使ったストアページのデザイン（OS 3.0テーマ）（近日公開）」を参照してください。

設定方法

SHOPLINE管理画面から、オンラインストア >デザインに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動します。
該当モジュールの下で、＋パーツを追加をクリックし、テーマタブに移動して、パンくずリストブロックを選択します。
お好みのカラースキームを設定し、PC版および/またはモバイルでパンくずリストブロックを有効にするか選択します。完了したら、保存をクリックして設定を適用します。

注：標準のパスベースのナビゲーションには、このパンくずリストブロックの使用を強く推奨します。

商品ページでパンくずリストを設定する際の注意点：

パンくずリストブロック（推奨）：標準的なパスベースのナビゲーション階層を表示し、通常はホーム / {カテゴリタイトル} / {商品タイトル}の形式で表示されます。ほとんどのマーチャントに推奨されるオプションです。
多階層カテゴリパンくずリスト：このパーツは商品ページのみで利用可能で、商品ドメインの多階層分類データに依存します。利用にはマーチャントのホワイトリスト登録が必要です。有効化をご希望の場合はサポートチームまでお問い合わせください。

機能の制限：

テーマの対応状況：この機能はすべてのOS 3.0テーマで利用可能です。

カスタムCSSによるコンテンツとスタイルのカスタマイズ

ホバーによるブロックの追加

OS 3.0テーマでは、商品情報エリア内の任意の場所に正確にパーツを挿入できます。

ホバートリック：既存のブロック間の隙間（例：販売価格と説明の間）にカーソルを移動させると、[＋]アイコンが表示されます。これをクリックしてカスタムコンテンツブロックを追加します。

注：「＋」ボタンが表示されない場合は、カーソルがブロック間の縦の隙間の中央に正確に位置していることを確認してください。

デフォルトテキストの修正または非表示

商品販売価格の下に表示される「税込」や「送料はチェックアウト時に計算されます」などのデフォルトのシステム文言をカスタマイズまたは非表示にしたい場合、SHOPLINEでは2つの効果的な方法を提供しています。テーマのコンテンツ設定内で直接テキストを修正するか、会話型AIコードアシスタントを使ってカスタムCSSを生成する方法です。

方法1：「テーマのコンテンツを編集する」でテキストを非表示にする

この方法では、システムラベルを検索し、テキストを空白文字に置き換えて非表示にできます。

SHOPLINE管理画面からオンラインストアに移動します。現在のテーマを見つけて、三点リーダーアイコン [...]（その他の操作）をクリックし、テーマのコンテンツを編集するを選択します。
上部の検索バーに「shipping」または「tax」と入力し、フィルタリングされた結果から商品 > 商品詳細セクション内の対象テキストフィールドを見つけます。
フィールド内の既存テキストを削除し、半角スペースを1つ入力します。この空白はストアフロントにラベルを完全に非表示にするよう指示します。
更新をクリックして変更を保存します。

方法2：AIコードアシスタント（カスタムCSS）でテキストを非表示にする

より迅速な方法を希望する場合や、テーマのコンテンツを恒久的に変更せずに視覚的な調整を正確に行いたい場合は、組み込みのAIコードアシスタントを利用してカスタムCSSを自動生成し、適用できます。

テーマエディターで、商品ページに移動します。
コンポーネントタイトルの横（または設定パネルのカスタムCSS見出しの横）にあるAIコードアシスタントアイコンをクリックしてアシスタントを開きます。
チャットフィールドに、ストアフロントのスタイル変更を会話形式で説明します。
アシスタントがリクエストを処理し、対応するCSSコードブロックを自動で出力します。
申請をクリックします。生成されたコードがその場でカスタムCSSフィールドに自動入力され、画面右側に即時のビジュアルプレビューが表示されます。
テーマエディターの右上にある保存をクリックして、変更をライブのストアフロントに公開します。

注：AIコードアシスタントを使ってストアフロントのデザインを行う方法の詳細については、"AIコードアシスタントを使ってストアフロントのカスタムCSSを生成する"をご参照ください。

商品ページのビジュアルスタイルを微調整する際は、一貫したストアフロントデザインを維持するために、以下のスタイリング原則とトラブル解決のヒントを念頭に置いてください。

アプリ連携パーツとのスタイルの不一致

おすすめ商品セクションのような機能は、バックエンドのアプリによって駆動され、テーマのコアレイアウトとは独立してレンダリングされることが多いです。

全体デザインの設定（特定の角丸や影など）を構成している場合、これらのスタイルは自動的にこれらのアプリ連携カードに適用されないことがあります。これを解決し、すべてのセクションでビジュアルの一貫性を確保するために、ページ単位のカスタムCSSを適用してカードのスタイルを手動で調整できます。

グローバルCSSとページスコープCSSの選択

カスタムCSSを適用してストアの外観を調整する際は、サイトのレイアウトが崩れないように正しいスコープを選択することが重要です：

ページスコープCSS（商品ページに推奨）： 商品ページ固有の変更（特定の説明ブロックを非表示にする、スタイルの微調整など）には、必ず商品ページの設定サイドバー内でコードを適用してください。これにより変更は商品ページに限定され、トップページやカテゴリページでの意図しないレイアウトの乱れを防げます。
グローバルCSS： 視覚的な変更をオンラインストアのすべてのページに反映させたい場合のみ、グローバル設定にコードを適用してください。

注：CSSを使ったより高度なカスタマイズについては、専用ガイドをご参照ください："ストアフロント用カスタムCSSを生成するAIコードアシスタントの使い方."

テンプレートでユニークなレイアウトを作成する

よくある問題：「商品ページを1つ修正したら、すべての商品に変更が反映された！」これはデフォルト商品テンプレートを編集しているために起こります。特定の商品ラインにユニークな見た目を作成するには：

ページセレクターで商品ページをクリックし、＋テンプレートを作成を選択します。
ユニークなレイアウトをデザインします（例：アパレル専用の「サイズガイド」画像を追加）。
商品 > 商品を編集に進みます。テーマテンプレートのドロップダウンリストから、その特定の商品に新しいテンプレートを割り当てます。

トラブルシューティング：カラーチップ表示の問題

商品ページにカラーチップが2列表示されたり、おすすめ商品セクションからカラーチップが消えたりする場合、これは2つの有効なカラーチップ表示ソースの衝突が原因である可能性が高いです。

なぜこの問題が起こるのか

SHOPLINEは商品ページでカラーチップを表示する方法を2つサポートしています：テーマに組み込まれたカラーパレットと、商品フィルタ＆カラーチップアプリです。両方が同時に有効になっていると、それぞれが独立してレンダリングされ、商品ページにカラーチップが重複して表示されます。

ワンソースルール

衝突を避けるために、一度に有効にできるカラーソースは1つだけです。どちらを使用するか決める前に、両者の主な違いに注意してください：

	テーマ内蔵カラーチップ	商品フィルタ＆カラーチップアプリ
「あなたにおすすめ」セクション	対応	非対応
カスタムテクスチャ／画像カラーチップ	非対応	対応
最適な用途	すべてのセクションでカラーチップを表示したいマーチャント	高度なカラーチップカスタマイズが必要なマーチャント

テーマ内蔵カラーチップの無効化方法

商品フィルタ＆カラーチップアプリを単一のソースとして使用する場合は、衝突を防ぐためにテーマ内蔵のカラーチップを無効にしてください：

SHOPLINE管理画面で、オンラインストア > デザインに移動します。
現在のテーマを見つけて、デザインをクリックし、テーマエディターを開きます。
テーマエディターの左サイドバーでグローバル設定をクリックします。
商品を選択し、カラーチップをクイック追加でカートに入れるをオフに切り替えます。
保存をクリックして変更を適用します。

「あなたにおすすめ」セクションでカラーチップが必要な場合

商品フィルタ＆カラーチップアプリはあなたにおすすめセクションでのカラーチップ表示に対応していません。この表示がストアにとって重要な場合は、代わりにテーマ内蔵のカラーチップを使用してください。設定手順については「カラーチップのクイックカート追加機能（近日公開）」を参照してください。

商品を魅力的に見せる

商品メディアのための強化された拡大鏡カスタマイズの使用

強化された拡大鏡は、商品ページでの画像ズームの操作を商品カテゴリに合わせてカスタマイズできます。適切なズームモードを選択することで、顧客が購入前に商品テクスチャや仕様を詳しく確認でき、購入の自信を高め、返品率を減らすことができます。

ベストプラクティス：業界に合ったズームスタイルの選択

商品属性に合ったズームスタイルを選ぶことは、コンバージョン率に大きな影響を与えます：

3Cエレクトロニクス（例：キーボード、カメラ）： マウスホバーを推奨します。顧客は「インターフェースの種類」や「ボタンのレイアウト」を素早く確認する必要があり、ホバーズームがこれらの技術的な詳細を最も効率的に見る方法です。
家庭用品＆デコレーション： 全画面矢印切り替えを推奨します。これらの商品は構成や雰囲気に依存しています。矢印でシーンを切り替えられるようにすることで、商品の没入感を高めることができます。
高級ファッション＆アクセサリー： クリックして画像の詳細を表示または全画面縦長画像スクロールを推奨します。このセグメントの顧客は、布地の質感や職人技の極端なクローズアップを見る必要があります。

設定方法

SHOPLINE管理画面から、オンラインストア > デザイン に移動します。互換性のあるOS 3.0テーマ（例：Fashion）を選択し、デザイン をクリックしてテーマエディターに入ります。
テーマエディターで、商品ページ に移動し、変更をプレビューする商品を選択します。
商品モジュールの下で、商品セクションを開き、商品メディアパーツをクリックします。
商品メディアファイルサブブロックをクリックして、拡大鏡の設定にアクセスします。
拡大鏡設定の下で、拡大鏡を有効にするをオンに切り替えます。

注：拡大鏡設定はメディア画像のみをズームします。オーバーレイはズームされません。
拡大鏡の設定で、各デバイスタイプごとにズームスタイルを個別に設定します:
- PC版ズームスタイル:
  - 全画面ロング画像スクロール（デフォルト）: 長く詳細な画像の閲覧に最適です。
  - 全画面矢印切替: 雰囲気重視のライフスタイルショットに最適です。
  - マウスホバー: 特定の商品の部分を技術的に検査するのに最適です。
- モバイルズームスタイル:
  - 全画面矢印切替（デフォルト）: 標準的なモバイル閲覧体験です。
  - 全画面ロング画像スクロール: 全画面モードで縦スクロールが可能です。
  - クリックして画像の詳細を表示: 最大スケールで画像を表示する新しいレイヤーが開きます。顧客はドラッグして詳細を確認し、再度クリックして戻ることができます。
必要に応じて、拡大鏡を表示をオンにして、ズームの視覚的な手がかりとしてメディア上に拡大鏡アイコンを表示します。
保存をクリックして変更を適用します。

機能の制限

テーマの利用可能性: この機能は、Bottleテーマを除くすべてのOS 3.0テーマで利用可能です。
動画の制約: 動画モジュールのユーザーインターフェースが非表示の場合、その特定の動画エレメントに対して拡大鏡は機能しません。
効果の範囲: 拡大鏡効果は生のメディア画像のみに厳密に適用され、テキストオーバーレイやUIエレメントは元のスケールのままです。

動的マーケティングラベルで重要な属性を強調表示

動的マーケティングラベルを使うと、「限定版」や「オーガニック素材」などの柔軟で目を引くテキストラベルを商品ページに直接表示し、重要な商品属性を強調できます。

設定方法

テーマエディターで商品ページに移動し、変更をプレビューしたい商品を選択します。

左のサイドバーで＋コンポーネントを追加をクリックし、カスタムセクションを追加します。そのセクション内にコンテンツコンテナを追加し、さらにリッチテキストブロックを追加します。

ヒント: より柔軟なレイアウトのために、まずコンテンツコンテナを追加し、その中にリッチテキストブロックを追加することをおすすめします。コンテナの位置合わせや移動は、親ブロックを選択して位置合わせ設定を適用してください。コンテナ自体を直接位置合わせしても位置は変わらない場合があります。

リッチテキストブロックをクリックし、右側の設定パネルで背景色、角の丸み、透明度をブランドスタイルに合わせてカスタマイズします。

ヒント: リッチテキストエディター内の動的ソースを追加アイコンを使って、ラベルを特定の商品メタフィールドに接続し、動的なコンテンツ更新を行うことができます。

保存をクリックして変更を適用します。

機能の制限

テーマの利用可能性: この機能は、Bottleテーマを除くすべてのOS 3.0テーマで利用可能です。

商品情報の構造化

多層説明ブロックを使った高度な商品レイアウト

多層説明ブロックを使うと、コードを一切書かずに商品情報エリア内で洗練されたカードスタイルのビジュアルレイアウトを構築できます。プロモーションカード、商品認証、関連商品ハイライトなどの構造化された情報を、プロフェッショナルな視覚的階層で表示するのに最適です。

ベストプラクティス：構造化レイアウトでコンバージョンを向上

この機能の利点を最大限に活用するには、多層説明ブロックを使用して複雑な詳細をスキャンしやすいセクションに整理してください。高額商品には、このコンテナ内にタイトル、リッチテキスト、およびロゴブロックをネストして「信頼カード」（例：ブランドロゴと保証書を並べて表示）を作成することを推奨します。この方法により、初期画面表示内の情報密度が高まり、プロフェッショナルな視覚的階層が生まれ、商品競争力が向上し、直帰率が低減します。

設定方法

SHOPLINE管理画面から、オンラインストア > デザインに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動し、変更をプレビューする商品を選択します。
商品情報セクションにカーソルを合わせ、＋コンテンツを追加をクリックし、多層説明ブロックを選択します。

多層説明ブロックをクリックして設定にアクセスします。このブロック内にタイトル、リッチテキスト、ロゴなどの汎用ブロックを追加して、希望のレイアウトを作成します。

注：右側の設定パネルでタイトルを更新すると、左側のサイドバーメニューの名前も自動的に同期されるため、複数のブロックを簡単に識別・管理できます。

また、折りたたみ表示オプションを切り替えて、説明をデフォルトで閉じるか完全に表示するかを設定できます。
ネストされたブロックを並べ替えて、「インライン画像とテキストの整列」や「カードベース」の視覚効果など、好みのレイアウトを実現します。
保存をクリックして変更を適用します。

機能の制限

テーマの対応状況：この機能は、Bottleテーマを除くすべてのOS 3.0テーマでサポートされています。
レイアウトの範囲：このブロックは商品情報セクション内の構造的レイアウト用に設計されており、外部ファイルのアップロードやAPI連携はサポートしていません。
コンテンツのスケーリング：モバイルパフォーマンスを維持するために、単一の多層説明コンテナ内のネストされたブロック数を制限し、小さい画面でもレイアウトがすっきり読みやすくなるようにしてください。

商品情報を強化するためのテキストラベルとツールチップの活用

テキストラベルブロックとそのインタラクティブなツールチップサブブロックは、商品ページ上で専門的な説明を邪魔にならない形で提供することができます。テキストラベルは「詳しくはこちら」や「配送情報」などの視覚的なアンカーとして機能し、ツールチップはホバーで起動するバブル内に補足情報を表示し、主要なコンバージョン経路を集中させてすっきりと保ちます。

ベストプラクティス：専門的な視覚的階層の強化

スキンケアや医療グレードの商品など専門的な商品には、成分説明や効果の詳細をテキストラベルブロック内に設定することを推奨します。ツールチップサブブロックの即時バブルプロンプトを活用することで、技術的な詳細をより専門的かつ階層的に提示でき、顧客が商品価値を素早く理解し、意思決定の過程を短縮するのに役立ちます。

設定方法

SHOPLINE管理画面から、オンラインストア > デザインに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動し、変更をプレビューしたい商品を選択します。

商品情報セクションにカーソルを合わせ、＋コンテンツを追加をクリックし、テキストラベルを選択します。

ヒント：レイアウトの柔軟性を高めるために、まず商品情報セクションの下にコンテンツコンテナを追加し、その中にテキストラベルブロックを追加することができます。コンテナの位置合わせや移動は、親ブロックを選択して位置合わせ設定を適用してください。コンテナ自体を直接位置合わせしても位置は変わらない場合があります。

テキストラベルブロックをクリックして、希望のテキスト（例：「詳しくはこちら」）を入力し、ブランドスタイルに合わせて背景色を調整します。
サイドバーのテキストラベルブロック内で、ツールチップサブブロックにカーソルを合わせ、＋コンテンツを追加をクリックし、リッチテキストを選択します。エディターを使って説明用のバブルコンテンツを作成します。

保存をクリックして変更を適用します。

機能の制限

テーマの対応状況: この機能は、Bottleテーマを除くすべてのOS 3.0テーマでサポートされています。
コンテンツの最善の方法: ツールチップサブブロックはリッチテキストとリンクをサポートしていますが、スムーズなユーザージャーニーを維持するために、簡潔で効果的な説明に最適です。
APIとアップロード: この機能はテーマエディター内で直接管理されており、外部APIやファイルアップロードの統合はサポートしていません。

購入アクションの促進

購入ボタングループで商品ページを最適化

購入ボタングループブロックは、すべての購入関連要素を一つのまとまりに集中させ、より集中したショッピング体験を作り出し、コンバージョン率を向上させます。以前は購入要素が個別のブロックとして管理されていたため、レイアウトのずれやカスタマイズ中の誤削除が起こる可能性がありました。購入ボタングループブロックを使うことで、エディター内でグループ全体を一つのユニットとしてドラッグでき、数量セレクターとカート追加ボタンを横並びに配置したプロフェッショナルな単一行レイアウトを設定できます。これは世界のトップeコマースブランドでよく使われる高コンバージョンのデザインです。

設定方法

SHOPLINE管理画面で、オンラインストア > デザインに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動します。
左のサイドバーで商品 > 商品情報セクションを開き、組み込みの購入ボタンパーツを見つけます。
＜strong＞配置＜/strong＞で、＜strong＞数量セレクター＜/strong＞と＜strong＞ショップボタン＜/strong＞のレイアウト方向を選択します：
- 左右: 同じ行に横並びで配置します（コンパクトで高コンバージョンの見た目に推奨）。
- 縦: 上下に積み重ねて配置します。
＜strong＞購入ボタン＜/strong＞パーツをクリックして、ボタングループ全体の設定を行います。
グループ全体をドラッグして、＜strong＞商品情報＜/strong＞セクション内の希望の位置に移動します。
＜strong＞保存＜/strong＞をクリックして変更を適用します。

機能の制限

段階的価格設定: このパーツは現在、段階的価格の表示に対応していません。
配置制限: このパーツは商品ページのみでの下部固定に対応しています。ポップアップやカテゴリページなど他のページでの下部固定には対応しておらず、これらのページに追加しても購入ボタンは自動的に含まれません。

モバイルデバイスでの購入ボタン配置の管理

モバイルデバイスでは、購入ボタングループが画面下部に固定されており、顧客がスクロールせずに購入を完了できるようになっています。ストアで商品アップセル＆追加購入アプリを使って商品ページにバンドルやセット商品を表示している場合、固定された購入ボタンがスクロール時にそのアプリのコンテンツと重なることがあります。

この重なりが発生した場合は、ボタンのモバイル位置を下部固定からインライン配置に切り替えてください：

テーマエディターで商品ページに移動し、購入ボタンパーツを選択します。
モバイル購入ボタン位置を見つけ、固定フッターからページ内組み込みに変更します。
変更を適用するために保存をクリックします。

ページレイアウトのカスタマイズ

商品ページ内での柔軟な左右レイアウトの有効化

コンテンツコンテナは、商品ページ内に新しい構造レイヤーを導入し、商品情報ブロックを縦一列に制限されずに左右に並べて配置できるようにします。これにより、数量セレクターを購入ボタンの横に配置したり、お気に入り登録ボタンを商品タイトルの隣に置くなど、カスタム開発なしでモダンなレイアウトデザインが可能になります。

設定方法

SHOPLINE管理画面でオンラインストア > デザインに進みます。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで商品ページに移動します。
商品 > 商品情報の下で、商品情報にカーソルを合わせ、＋コンテンツを追加をクリックし、テーマの中からコンテンツコンテナを選択します。このコンテナは中間のレイアウトレイヤーとして機能します。
コンテナにカーソルを合わせ、＋コンテンツを追加をクリックして、左右に並べたい商品情報ブロック（例：タイトル、販売価格、数量セレクター）を追加します。ブロックはドラッグ＆ドロップで順序を調整できます。
コンテンツコンテナをクリックして、ブロックの配置、マージン、サイズなどのレイアウトを設定します。レイアウトコントロールを使って複数のパーツを横並びに配置できます。
変更を適用するために保存をクリックします。

機能の制限

テーマの利用可能性: この機能は、Bottleテーマを除くすべてのOS 3.0テーマでサポートされています。
配置制限: 左右レイアウトコントロールは、商品情報セクションのコンテンツコンテナ内でのみ利用可能です。これは、商品ページテンプレート全体の垂直配置を上書きするものではありません。

この記事はAIを使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。