テーマ管理

テーマ管理 カスタマイズ 商品詳細画面

カスタマイズ機能は対応したテーマテンプレート(ec_force_basic_theme)のみで利用可能です。
テーマ管理にテーマ(ec_force_basic_theme)を追加する方法は、テーマ管理 テーマを追加を参照ください。
2021/07以前に提供したすべてのテーマは本機能に対応していません。

カスタマイズ:商品詳細画面でできること

商品詳細画面のカスタマイズができます。
商品詳細のカスタマイズでの設定値は「商品詳細画面」に反映されます。スクリーンショット 2024-07-02 12.45.24.png

カスタマイズ機能は対応したテーマテンプレート(ec_force_basic_theme)のみで利用可能です。
テーマ管理にテーマ(ec_force_basic_theme)を追加する方法は、テーマ管理 テーマを追加を参照ください。
2021/07以前に提供したすべてのテーマは本機能に対応していません。

セクション

商品詳細画面の各セクションでは、以下項目をカスタマイズできます。

ヘッダー

Caution!!

ヘッダーの設定は全画面共通の設定で反映されます。
※詳細はテーマ管理 カスタマイズ トップ画面をご確認ください。

コンテンツ 商品詳細画面に表示される項目の表示順や表示/非表示を切り替えることができます。
カテゴリ 各商品に設定された商品カテゴリを表示します。
商品名 各商品に設定された商品名を表示します。
商品タグ 各商品に設定された商品ラベルを表示します。
メーカー 各商品に設定されたメーカーを表示します。
商品詳細 各商品に設定された詳細内のテキストを表示します。
テキストの内容は商品管理から設定できます。
レビュー評価 各商品に投稿されたレビューの平均点を表示します。
レビューが投稿されていない商品は、自動的に非表示になります。
価格 各商品に設定された価格を表示します。
通常価格に打ち消し線を表示 チェックをすると「通常価格」に打ち消し線が引かれます。
付与予定ポイント 各商品に設定された付与予定ポイントを表示します。
ポイント機能が「有効」な場合に表示させることができます。
規格 各商品に設定された規格の切り替えプルダウンを表示します。
規格が設定されていない商品は、自動的に非表示になります。
スクリーンショット 2025-10-03 15.28.57.png
カラーパレットを表示する チェックで規格設定にて「カラーピッカー:有効」の規格がカラーパレット形式で表示されます。
規格(SKUリスト) 各商品に設定された規格の組み合わせのSKUが一覧でリスト表示されます。
規格が設定されていない商品は自動的に非表示になります。
※こちらを表示にした場合、以下の項目が非表示となります。
・「規格」のプルダウン
・数量
・店舗在庫を確認するボタン
※SKUリストの最大表示数は50件です。51件以降は表示されません。スクリーンショット 2025-10-30 20.39.45.png
数量セレクタ 数量セレクタを表示します。
在庫数 各SKUごとの在庫数を表示します。
※SKUは最大で10SKUまで表示可能です
在庫数が21個以上〜無制限のSKUについては「在庫あり」と表示されます。
また、任意で在庫の表示単位を設定できます。
在庫数については、在庫管理から設定できます。
キャンペーンカウントダウン [オプション]キャンペーン機能の対象商品の場合、キャンペーンのカウントダウンタイマーが表示されます。
併売商品 併売商品を設定している場合、単品商品と定期商品の切り替えボタンを表示します。
ショップの機能設定の「併売商品複数設定」が「有効」の場合に「関連商品」タブを表示させることができます。
「併売商品複数設定」が「有効」の場合は表示位置を変更することができません。
スクリーンショット 2024-06-12 16.00.57.png
関連商品 チェックを入れることで、併売商品のタブに「関連商品」タブが表示されるようになります。
表示位置 「関連商品」タブの表示位置を「先頭」「末尾」のどちらかに設定ができます。
項目名 「関連商品」の文言を変更できます。
カート追加ボタン(画面遷移なし) 画面遷移しないでカートに商品を追加するボタンです。
ボタンを押すと、商品詳細ページを表示したままカートに商品が追加されます。
ボタン文言は「言語の編集」から変更できます。
カート追加ボタン(画面遷移あり) 購入手続きに進むボタンです。
ボタン文言は「言語の編集」から変更できます。
カート追従ボタンの表示 チェックするとスマートフォンでのアクセス時にカート追加ボタンがスクロールで追従するようになります。
店舗在庫を確認するボタン 店頭受取機能が有効且つ、店頭受取が可能な商品でのみ店頭受取店舗の在庫情報が確認できるようになるボタンです。
※店頭受取機能に関してはこちらをご確認ください。
お気に入りに追加 ユーザーが商品をお気に入りに追加するためのボタンです。
SKU詳細 各商品の各SKUに設定された詳細を表示します。
SNSシェア 商品ページをSNSにシェアするためのアイコンです。
注意喚起文 各商品に設定した注意喚起文のテキストを表示します。
テキストの内容は商品管理から設定できます。

開閉表示(モバイルのみ)にチェックを入れ、開閉見出しを入力するとSPでの表示のみ項目が折りたたまれて表示されます。
自由入力1~10 各商品に設定した自由入力1~10それぞれのテキストを表示します。
テキストの内容は商品管理から設定できます。

開閉表示(モバイルのみ)にチェックを入れ、開閉見出しを入力するとSPでの表示のみ項目が折りたたまれて表示されます。
カスタムHTML1~3 すべての商品詳細画面に共通して表示する項目を設定できます。
商品テキスト(商品カテゴリ) 各商品に紐付けられた商品カテゴリに設定されているテキストを表示します。
テキストの内容は商品カテゴリー管理から設定できます。
画像表示形式 画像の表示形式を選択できます。
デフォルトは「スライドショーで表示」です。
「縦に並べて表示」の場合は、以下2つの設定を追加することができます。
1) 画像の縦間隔
商品画像間の間隔を 0px〜100px で設定することができます。
2) 右側要素の固定化(PCのみ)
PC画面時、画像スクロールが完了するまで画面右側の商品情報領域が固定化されるようになります。
※商品画像領域が商品情報領域よりも長い場合に有効
シェア見出し SNSシェアセクションの見出し文言を設定します。
商品カテゴリー 商品詳細画面にカテゴリーの一覧及びリンクを表示するか切り替えられます。
※カテゴリー機能の詳細はこちらを参照してください。
見出し 商品カテゴリーセクションの見出し文言を設定できます。
小見出し 商品カテゴリーセクションの小見出し文言を設定できます。
スクリーンショット 2024-07-02 19.40.58.png
セレクション 商品詳細画面にセレクションページの一覧及びリンクを表示するか切り替えれます。
※セレクション機能の詳細はこちらを参照してください。
見出し セレクションセクションの見出し文言を設定します。
小見出し セレクションセクションの小見出し文言を設定します。
タイトルを表示する 各セレクションページのタイトルを表示します。
特集ページ一覧への導線を表示 「もっと見る」ボタンの表示/非表示を設定します。
行当たりのアイキャッチ表示件数 セレクションページのアイキャッチ画像を行当たりで何件表示するか設定します。
表示件数は、1~2件で設定可能です。
表示行数 セレクションページの表示行数の設定を行います。
表示行数は、1件〜5件で設定可能です。

スクリーンショット 2024-05-30 20.38.54.png

ランキング ランキング対象商品が存在しない場合はランキングセクションが非表示となります。
※ランキング機能の詳細はこちらを参照してください。

■ランキング対象商品が存在しないケース
・「ショップの機能設定 > ランキング表示対象外商品」にて全商品が除外設定されている
・商品管理にて商品のステータスが全て非表示である
見出し ランキングセクションの見出しを設定します。
小見出し ランキングセクションの見出しを設定します。


表示項目
商品詳細表示 商品の詳細の表示/非表示を設定します。
商品名表示 商品名の表示/非表示を設定します。
商品価格表示 商品価格の表示/非表示を設定します。
商品カテゴリー表示 商品カテゴリーの表示/非表示を設定します。


表示件数
ランキング表示件数 ランキング表示件数の設定を行います。
表示件数は、1件〜5件で設定可能です。

スクリーンショット 2024-09-06 10.28.03.png

レビュー
レビュー表示 レビューの表示有無を設定します。

ecfdev-13456_faq_1.png

見出し レビューセクションの見出し文言を設定します。

ecfdev-13456_faq_2.png

背景 レビューセクションの背景色を設定します。

ecfdev-13456_faq_3.png

関連商品
関連商品表示 関連商品の表示有無を設定します

_____________FAQ_7.png

※ショップの機能設定「ショップ管理 > 各種設定」の「関連商品の表示」の設定が優先されます。
見出し 関連商品セクションの見出し文言を設定します。

_____________FAQ_8.png

小見出し 関連商品セクションの小見出し文言を設定します

_____________FAQ_9.png

背景 関連商品セクションの背景色を設定します

スクリーンショット 2021-09-06 10.34.45.png

レコメンド
見出し レコメンドセクションの見出し文言を設定します。

スクリーンショット 2024-09-09 2.39.04.png

小見出し レコメンドセクションの小見出し文言を設定します

スクリーンショット 2024-09-09 2.39.04のコピー.png

表示形式 レコメンドセクションの表示形式を設定します

スクリーンショット 2024-09-09 2.39.04のコピー2.png

表示項目 レコメンドセクションの表示項目を設定します

スクリーンショット 2024-09-09 2.39.12.png

表示件数 レコメンドセクションの表示件数を設定します

スクリーンショット 2024-09-09 2.39.16.png

※行あたりの商品表示件数が2件以上の場合でも、スマートフォンでは1行あたり2件の表示になります。
バナー

Caution!!

バナーセクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

バナーを追加する

バナーを追加する 複数のバナーを追加することができます。
※最大20個まで追加可能

レイアウト

セクション見出し バナーセクションに見出しを設定することができます。
PCの表示件数(1行あたり) PC時の1行あたりのバナー表示件数を設定することができます。
※設定可能範囲は1~4件
※表示件数によって画像の推奨サイズがございます。
SPの表示件数(1行あたり) SP時の1行あたりのバナー表示件数を設定することができます。
※設定可能範囲は1~2件
※表示件数によって画像の推奨サイズがございます。

new_banner_section.png

バナー内の設定値について

PC画像 バナーとして表示する画像を設定します。
PCのみに適用されます。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
SP画像 バナーとして表示する画像を設定します。
SPのみに適用されます。
※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
バナーのリンク先 バナーを押下した際の遷移先を設定します。

スクリーンショット 2024-07-02 13.12.10.png

フッター

Caution!!

フッターの設定は全画面共通の設定で反映されます。
※詳細はテーマ管理 カスタマイズ トップ画面をご確認ください。

注意事項

テーマカスタマイズは、ecforceが提供するテーマテンプレート(ec_force_basic_theme)でのみ利用可能です。

  • 対象となるテーマテンプレート(ec_force_basic_theme)以外では本機能を利用できません。 対象外のテーマでは「カスタマイズ」をクリックした際に「このテーマはカスタマイズ機能に対応していません。」とのメッセージが表示され、テーマカスタマイズ画面に遷移できない状態になります。
  • 「アクション > コードの編集」からファイル編集をしたテーマはサポート対象外です。
  • カスタマイズ対応テーマのファイル構造の変更(ファイル名変更・ファイルの追加や削除)は非推奨です。

設定値の優先順位

管理画面と重複している設定項目はカスタマイズの設定が優先されます。

この記事の目次

このセクションの記事

テーマ管理