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

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

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

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

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

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

エディターへのアクセス

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

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

専用商品パーツの理解

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

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

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

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

注：完全な設定手順およびOS 3.0テーマで利用可能なすべてのパンくずリストタイプの概要については、「Theme Editorパーツを使ったストアページのデザイン（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コードアシスタントを使用する方法の詳細については、「ストアフロント用カスタムCSSを生成するためのAIコードアシスタントの使用」をご参照ください。

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

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

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

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

グローバルCSSとページ限定CSSの選択

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

ページ限定CSS（商品ページに推奨）：特定の説明ブロックを非表示にするなど、商品ページ固有の変更を行う場合は、必ず商品ページ設定のサイドバー内でコードを適用してください。これにより変更は商品ページに限定され、トップページやカテゴリページのレイアウトに予期せぬ影響を与えません。
グローバルCSS：ストアのすべてのページに視覚的変更を反映させたい場合のみ、全体設定にコードを適用してください。

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

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

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

ページセレクターで、商品ページ > + テンプレートを作成をクリックします。
独自のレイアウトをデザインします（例：アパレル専用の「サイズガイド」画像を追加するなど）。
商品に移動し、新しい商品を作成するか、テンプレートを割り当てたい既存の商品を選択します。
テーマテンプレートセクションで、ドロップダウンメニューをクリックし、商品に割り当てるテンプレートを選択します。

トラブル解決：カラーチップ表示の問題

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

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

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

一つのソースルール

衝突を避けるために、同時に有効にするカラーチップソースは一つだけにしてください。どちらを使用するか決める前に、両者の主な違いを確認してください：

	テーマ組み込みカラーパレット	商品フィルタ＆カラーチップアプリ
おすすめ商品セクション	対応	非対応
カスタムテクスチャ／画像カラーチップ	非対応	対応
最適な対象	すべてのセクションでカラーチップを表示したいマーチャント	高度なカラーチップカスタマイズが必要なマーチャント

テーマ組み込みカラーパレットを無効にする方法

カラーチップアプリを唯一のソースとして使用する場合は、衝突を防ぐためにテーマの組み込みカラーパレットを無効にしてください：

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

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

商品フィルタ＆カラーチップ アプリは、おすすめ商品 セクションでのカラーチップ表示をサポートしていません。この表示がストアにとって重要な場合は、テーマに組み込まれているパレットに切り替えてください。設定方法については、「名前付きカラーを使用したカラーチップの設定（OS 3.0 テーマ）」を参照してください。

商品の魅力を伝える

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

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

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

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

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

設定方法

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

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

機能の制限

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

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

動的マーケティングラベルを使用すると、商品ページ上に柔軟で目を引くテキストラベル（例：「限定版」や「オーガニック素材」）を直接表示して、重要な商品属性を強調できます。また、ラベルを商品バリエーションのメタフィールドに連携させることで、顧客が異なるバリエーションを選択した際にテキストが自動的に更新されます。例えば、同じ商品の綿の色オプションには「洗濯機使用可」、絹のオプションには「手洗いのみ」と表示することが可能です。

設定方法

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

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

注：レイアウトの柔軟性を高めるために、まずコンテンツコンテナを追加し、そのコンテナ内にリッチテキストパーツを追加することができます。コンテナの位置を揃えたり移動したりするには、その親パーツを選択して配置設定を適用してください。コンテナ自体を直接揃えても位置は変わらない場合があります。

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

ヒント：

リッチテキストエディター内の動的ソースを追加アイコンを使用して、ラベルを特定の商品メタフィールドに接続し、動的なコンテンツ更新を行うことができます。
また、商品バリエーションメタフィールドに接続することも可能です。顧客がバリエーションを切り替えた際にラベルが自動で更新されるようにするには、ページにバリエーションピッカーコンポーネントが追加されていることを確認してください。

保存をクリックして変更を申請します。

注：バリエーションメタフィールドの表示に関する完全な設定詳細（対応データタイプや動的ソースのガイダンスを含む）については、「OS 3.0 テーマエディターでの動的ソース（メタフィールド）の設定」をご覧ください。

機能の制限

テーマの対応状況：この機能は、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テーマを選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、商品ページに移動します。
左のサイドバーで商品>商品情報セクションを開き、組み込みの購入ボタンコンポーネントを見つけます。
配置で、数量セレクターとショップボタンのレイアウト方向を選択します：
- 左右: 同じ行に横並びで配置します（コンパクトで高コンバージョンの見た目に推奨）。
- 縦: 上下に積み重ねて配置します。
購入ボタンコンポーネントをクリックして、ボタングループ全体の設定を行います。
グループ全体を商品情報セクション内の希望の位置にドラッグします。
保存をクリックして変更を適用します。

機能の制限

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

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

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

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

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

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

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

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

設定方法

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

機能の制限

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

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