商品管理_商品詳細ページ

商品管理 > 商品詳細ページ

1.概要

本画面では、商品詳細ページのテンプレートを作成します。

2.テンプレートの作成

テンプレートの作成は、大きく分けて以下の4工程で行います。

①商品テンプレート名の設定

②フリーエリアの設定

③表示項目の設定

④機能パーツの設定

それぞれの工程については、以降の章にて解説します。

2.1.商品テンプレート名の設定

商品テンプレート名を設定します。

図.商品テンプレート名の設定

2.2.フリーエリアの設定

フリーエリアには、商品詳細ページのフリーエリアに表示するメッセージを設定します。設定したメッセージは、商品詳細ページのメインエリアの最上部に表示されます。(HTML入力可)

図.フリーエリア

2.3.表示項目の設定

商品詳細ページに表示する項目の設定を行います。

商品詳細ページには、本画面の「表示項目」欄に表示されている項目が、上から順に表示されます。「並替」をドラッグ&ドロップすると表示順が変更されます。サイトに表示する項目名を変更する場合は、「項目表示名」に表示用の名称を設定します。デバイスごとに表示/非表示を切り替える場合は、「表示デバイス」で各デバイスの表示設定を行います。表示項目を追加する場合は、「追加項目」のリストから追加する項目を選択して追加します。表示項目を削除する場合は、該当項目の「削除」欄にある削除マーク(X)から操作します。

図.表示項目

図.表示項目

2.3.1.項目概要

表示項目欄で取り扱う項目の定義は、次の表の通りです。

表.表示項目欄の項目定義

項目

説明

並替

ドラッグ&ドロップで表示順の並び替えを行う

項目

商品詳細ページに表示する項目

項目表示名

商品詳細ページでの表示用の名称

表示デバイス

クリックすると表示(オレンジ色)/非表示(灰色)が切り替わる。表示(オレンジ色)は、該当デバイスでアクセス時に表示される。非表示(灰色)は、該当デバイスでアクセス時に非表示になる。

削除

クリックすると、該当項目が表示項目から削除される

追加項目リスト

表示項目のリスト。表示項目を追加する場合、リストから対象を選択する。

「追加」ボタン

クリックすると、追加項目リストで選択した項目が表示項目に追加される。

リッチスニペット用メタデータ

利用するにチェックを入れると、商品詳細ページをmicrodataを用いてマークアップする。

※商品詳細ページをマークアップすると、検索エンジンの検索結果がリッチスニペット(拡張された検索結果)で表示される。

2.3.2.カテゴリの詳細設定

カテゴリの詳細設定では、商品詳細ページに表示するパンくずリストの表示件数の設定を行います。カテゴリの「詳細設定」ボタンをクリックすると、詳細設定画面が表示されます。

図.カテゴリの詳細設定

2.3.2.1.項目概要

カテゴリの詳細設定で取り扱う項目の定義は、次の表の通りです。

表.カテゴリの詳細設定の項目定義

項目

説明

表示方法(一件)

商品に設定された商品カテゴリのうち、商品カテゴリの作成日時が最新のカテゴリを1件パンくずリストに表示

表示方法(全件)

商品に設定された商品カテゴリを全件パンくずリストに表示。

パンくずリストの並び順は、商品管理>商品カテゴリ/グループの商品カテゴリ設定にて作成しましたカテゴリの登録順と同じ並び順。

2.3.3.ブロック開始の詳細設定

ブロック開始の詳細設定では、<div>タグに設定するidとclass名の設定を行います。ブロック開始の「詳細設定」ボタンをクリックすると、詳細設定画面が表示されます。

図.ブロックの詳細設定

2.3.3.1.項目概要

ブロックの詳細設定で取り扱う項目の定義は、次の表の通りです。

表.ブロックの詳細設定の項目定義

項目

説明

id

<div>タグに設定するid名

class

<div>タグに設定するclass名

2.3.4.商品画像の詳細設定

商品画像の詳細設定では、商品商品ページでの画像の表示方法を設定します。

図.商品画像の詳細設定

2.3.4.1.項目概要

商品画像の詳細設定で取り扱う項目の定義は、次の表の通りです。

表.商品画像の詳細設定の項目定義

項目

説明

サムネイル

商品管理>登録商品編集の「画像登録」の「サムネイル画像」に設定されている画像を表示

スライド

商品管理>登録商品編集の「画像登録」の「画像と画像説明」に設定されている画像をスライド形式で表示

リスト

商品管理>登録商品編集の「画像登録」の「画像と画像説明」に設定されている画像をリスト形式で表示

2.3.5.フォームの詳細設定

フォームの詳細設定では、<form>タグ内に表示される項目の設定を行います。

図.フォームの詳細設定

2.3.5.1.項目概要

フォームの詳細設定で取り扱う項目の定義は、次の表の通りです。

表.フォームの詳細設定の項目定義

項目

説明

バリエーション項目が2つある場合の表示方法

商品管理>登録商品編集の「バリエーション設定」でバリエーション項目が2つある場合の表示方法を指定。

詳細は、「2.3.5.2.バリエーション項目が2つある場合の表示方法」を参照

ソーシャルボタンの表示項目

ソーシャルボタンを表示するかどうかを設定。チェックを入れると、該当のソーシャルボタンが表示される。

※Googleプラスは、サービス終了のため、ご利用いただけません。

お気に入りボタンの表示設定

お気に入りボタンを表示するかどうかを設定。

詳細は、「2.3.5.3.お気に入りボタンの表示設定」を参照

小計

小計を表示するかどうかを設定。表示にチェックを入れると、数量を加味した商品金額を表示される。テキストボックスに入力した値は、項目の表示名として表示される。

カートに入れるボタン

カートに入れるボタンをクリック時の動作を選択する。

詳細は、「2.3.5.4.カートに入れるボタンの設定」を参照

並び替え

ドラッグ&ドロップでフォームに表示する項目の表示順を変更する

2.3.5.2.バリエーション項目が2つある場合の表示方法

バリエーション項目が2つある場合の表示方法を設定します。

図.バリエーション項目が2つある場合の表示方法

2.3.5.2.1.「各項目を掛け合わせて表示」で設定した場合

「バリエーション項目1」「バリエーション項目2」を選択リスト内で掛け合わせて表示します。

図.商品詳細ページでの表示例

2.3.5.2.2.「各項目を分けて表示」で設定した場合

「バリエーション項目1」「バリエーション項目2」をそれぞれ別の選択リストで表示します。

図.商品詳細ページでの表示例

2.3.5.2.3.「表組み(テーブル)表示」で設定した場合

「バリエーション項目1」を横軸、「バリエーション項目2」を縦軸にした表形式で表示します。

図.商品詳細ページでの表示例

2.3.5.3.お気に入りボタンの表示設定

お気に入りボタンの表示設定で、「表示」を選択すると、商品詳細ページにお気に入りボタンが表示されます。非会員、会員のいずれでアクセスした場合でもお気に入りボタンは表示されます。ただし、ボタンをクリックして商品をお気に入りに登録できるのは、会員に限定されています。お気に入りボタンをクリックしてお気に入りに登録する際の画面遷移は、「お気に入りボタンの非同期処理」の設定によって変わります。

図.お気に入りボタンの表示設定

2.3.5.3.1.非同期処理を「使う」で設定した場合

会員がログイン済みの場合は、お気に入りボタンをクリックすると お気に入り追加完了メッセージがダイアログで表示され、対象商品が画面遷移なしでお気に入りに登録されます。未ログイン時は、対象商品を一時的に保持し、ログイン成功後に一括でお気に入り登録します。

2.3.5.3.2.非同期処理を「使わない」で設定した場合

会員がログイン済みの場合は、お気に入りボタンをクリックすると対象商品がお気に入りに登録され、商品詳細ページが再表示されます。未ログイン時は、お気に入りボタンをクリックするとログイン画面に遷移します。ログイン成功するとお気に入りに登録され、対象商品の商品詳細ページ画面に戻ります。

2.3.5.3.3.非同期処理の初期値

テンプレートを新規作成時は、お気に入りボタンの表示は「非表示」、非同期処理は「使わない」が初期値です。お気に入りボタンを「表示」で登録していた既存テンプレートは、非同期処理は「使わない」が初期値になります。

2.3.5.3.4.制限事項

ブラウザがIEかつバージョン10以下の場合は、非同期処理を「使う」に設定しても、「使わない」に設定時の動作になります。

2.3.5.4.カートに入れるボタンの設定

カートに入れるボタンをクリックした場合の動作を設定します。

図.カートに入れるボタンの設定

2.3.5.4.1.「非同期処理を使う(ボタン切替タイプ)」で設定した場合

「カートに入れる」ボタンをクリックすると、画面遷移なしで対象商品がカートに追加されます。商品詳細ページの「カートに入れる」ボタンは、「カートを見る」ボタンに変わります。

2.3.5.4.2.「非同期処理を使う(ボタン追加タイプ)」で設定した場合

「カートに入れる」ボタンをクリックすると、画面遷移なしで対象商品がカートに追加されます。商品詳細ページの「カートに入れる」ボタンの下に、「カートを見る」ボタンが追加されます。

2.3.5.4.3.「非同期処理を使わない」で設定した場合

「カートに入れる」ボタンをクリックすると、カートページに遷移し、対象商品がカートに追加されます。

2.3.6.レビューの詳細設定

レビューの詳細設定では、商品レビューの投稿件数を表示するかどうかの設定、表示件数の指定、ボタンの名称設定を行います。

図.レビューの詳細設定

2.3.6.1.項目概要

レビューの詳細設定で取り扱う項目の定義は、次の表の通りです。

表.レビューの詳細設定の項目定義

項目

説明

商品レビューの投稿件数の表示設定

該当商品に対するレビュー投稿件数を表示するかどうかを設定

商品レビューの表示件数設定

商品詳細ページに表示する商品レビューの件数を設定

「レビュー一覧画面」ボタンの名称設定

商品詳細ページからレビュー一覧画面へ遷移するためのボタンの名称を設定

2.4.機能パーツの設置

商品詳細ページに機能パーツを設置する場合は、リストから対象の機能パーツを選択します。複数の機能パーツを設置する場合は、「機能パーツ追加」リンクをクリックしてください。機能パーツ選択用のリストが追加されます。設置した機能パーツを削除する場合は、リストを「未設定」に変更してください。商品詳細ページには、設置した機能パーツが上から順に表示されます。順番を変更する場合は、リスト内の機能パーツを変更してください。

図.機能パーツの設置

3.テンプレートの適用

テンプレートを作成し、商品に適用すると、商品詳細ページが適用したテンプレートの内容で表示されます。商品へのテンプレートの適用については、「登録商品編集(ページ設定)」のマニュアルをご確認ください。

>>「商品管理_登録商品編集(ページ設定)」へ

4.テンプレートの作成例

テンプレートの作成例を以下に記載します。

4.1.商品レビューを商品ページで閲覧できるようにする

商品ページに「レビュー」項目を追加することで、商品ページでその商品のレビューを表示させることができます。

商品ページの作成方法の詳細は、「1.商品詳細ページのテンプレートを作成する」をご確認ください。

4.1.1.追加項目

追加項目欄のリストから「レビュー」を選択し、「追加」ボタンをクリックします。

図.「レビュー」を追加する

【保存】を押下して設定完了です。

4.2.商品一覧ページや商品詳細ページにPRアイコンを設定したい ~商品詳細ページに表示する~

4.2.1.表示項目

「PR設定」項目を追加します。

図.表示項目に「PR設定」を追加する

【保存】を押下して設定完了です。

下図のように商品詳細ページにアイコンが表示されます。

図.商品詳細ページにPRアイコンが表示される

4.2.3.関連記事

・PRアイコン画像を登録する

>>「商品管理_PR設定」へ

・商品カテゴリページにPRアイコンを設定する

>>「商品管理_商品カテゴリページ」へ

4.3.再入荷リクエスト・再入荷通知機能が使いたい

再入荷リクエスト・再入荷通知機能は、顧客管理 > フリーフォーム設定で再入荷リクエスト・再入荷通知用のフォームを作成し、作成したフォームを商品ページに表示することで利用できます。

再入荷リクエスト・再入荷通知用のフォームの作成方法については、「フリーフォーム設定」のマニュアルをご確認ください。

>>「顧客管理_フリーフォーム設定」へ

4.3.1.商品詳細ページの表示設定

フリーフォームで再入荷リクエスト・再入荷通知用のフォームを作成後、商品詳細ページの表示設定を行います。

商品詳細ページで再入荷リクエスト・再入荷通知機能をつけたい商品ページテンプレートを選び、右の【編集】ボタンをクリックします。

図.商品ページテンプレートの編集ボタンをクリックする

すると、下記のような画面が表示されます。

【追加項目】のタブから、フリーフォームを選択して【追加】ボタンを選択します。

図.追加項目のタブからフリーフォームを追加する

すると、「フリーフォーム」という項目が一番下に追加されます。

図.表示項目にフリーフォームが追加される

フリーフォームが追加されたのを確認して、一旦変更を保存します。

ここから、このフリーフォーム項目を使用して再入荷リクエスト・再入荷通知ボタンを作成していきます。

フリーフォーム項目の【詳細設定】ボタンをクリックします。

すると、下図のような画面が表示されますのでフリーフォームの選択からフリーフォーム設定画面で作成した再入荷リクエスト・再入荷通知用のフリーフォームを選択し、保存します。(下図は、【再入荷通知をする】というフォーム名で作成した例です。)

図.再入荷リクエスト・再入荷通知用のフリーフォームを選択する

表示項目はドラッグ&ドロップで並び替えが出来ますので、表示させたい位置を調整ください。

表示項目の並び替えについては、「2.3.5.1.項目概要」をご確認ください。