コマースクリエイターご利用店舗様専用の記事です

セール商品の商品詳細ページに「セール対象商品」というテキストを共通表示したり、
ポイントUPキャンペーンを行っている商品の商品詳細ページに「キャンペーン対象商品」というバナーを共通表示したりするなど
特定の商品群に対して共通する画像やテキストを表示したい場合、
コマースクリエイターでは「レイアウトパーツの表示条件機能」を利用することで簡単に実現可能です。

　■オンラインマニュアル：レイアウトパーツ

 

ここでは一例として、セール対象商品の商品詳細ページに「★セール対象商品★」というテキストを共通表示する方法をご案内します。

 

設定方法

1．商品にタグを設定する

セール対象商品の商品基本情報編集画面を開き「セール」というタグを設定します。
タグの詳しい設定方法は以下をご参照ください。

■虎の巻　「商品タグ」って何ですか？
http://qa.future-shop.jp/faq/show/2053

 

対象商品が多い場合、CSVを利用して一括登録することもできます。

■マニュアル　商品タグ登録
https://www.future-shop.jp/manual/regist/goodsTag.html

 

2．共通表示したい内容を「フリーパーツ」で作る

commerce creator＞パーツ＞左下の「パーツを追加する」　にて、
フリーパーツを選択し、表示させたい文言や画像を入力したパーツを作成します。

＜例＞

(1)パーツ名　：　セール対象商品用パーツ
(2)置換文字　：　sale_item
(3)表示内容　：　★セール対象商品★

 

3．商品詳細ページにレイアウトパーツを設定する

commerce creator＞テーマ＞利用中テーマの「レイアウト」＞商品詳細レイアウトの をクリックして編集画面を開きます。
メインエリア ＞コンテンツエリア ＞商品詳細エリア の順に開き、
商品詳細エリア内の任意の箇所(「商品画像・商品説明など」や「商品名・価格など商品情報」エリア内でも可)にて
「レイアウトパーツを追加する」をクリックして、レイアウトパーツを追加します。

＜例＞

(2)パーツ名　：　「セール」タグがある商品のみ表示するパーツ
(3)HTML　：HTML要素「div」　class「sale_item_only」

 

 

4．レイアウトパーツに表示条件を設定する

作成したレイアウトパーツの をクリックし、「表示条件を設定する」を選択します。

「表示条件を設定」の画面内で商品タグにチェックを入れ、「セール」と入力し、画面最下部の「OK」をクリックします。

5．表示条件を設定したレイアウトパーツ内に作成したフリーパーツを設置する

表示条件を設定したレイアウトパーツの をクリックし、手順2で作成したフリーパーツを設置します。

以上で完了です。

表示条件には、
商品タグの他に、商品グループ・バンドル割引対象・販売期間などでも設定ができますので、
例えば、
・Tシャツのグループにのみ特定の文言を表示
・まとめ買い割引対象商品にのみバナーを表示
・販売終了間近の商品にのみ特定の文言を表示
といったことも実装いただけます。

■マニュアル　レイアウトパーツ
https://www.future-shop.jp/manual/builder/layout-parts.html


また、今回は「テキスト」の表示についてご紹介しましたが
文言ではなく画像のみを貼る場合はフリーパーツではなくコラムパーツも便利です。