テーマエディターでの商品ページのデザイン（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コードブロックを自動で出力します。
＜strong＞申請＜/strong＞をクリックします。生成されたコードがその場でカスタムCSSフィールドに自動入力され、画面右側に即時のビジュアルプレビューが表示されます。
テーマエディターの右上にある保存をクリックして、変更をライブのストアフロントに公開します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ワンソースルール

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

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

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

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

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

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

商品フィルタ＆カラーチップアプリは、「あなたにおすすめ」セクションでのカラーチップ表示をサポートしていません。この表示がストアにとって重要な場合は、代わりにテーマ内蔵のカラーチップに切り替えてください。設定手順については、「OS 3.0テーマの名前付きカラーの理解（近日公開）」を参照してください。

商品を魅力的に見せる

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

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

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

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

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

設定方法

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

注：拡大鏡設定はメディア画像のみをズームし、オーバーレイはズームされません。
拡大鏡の設定で、各デバイスタイプごとにズームスタイルを個別に設定します:
- 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を使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。