アイコン位置変更方法&商品一覧表示項目について
(質問1:アイコン位置変更について)
商品登録・編集管理画面 > その他詳細 > アイコン付与
でチェックを入れたアイコンが、商品一覧ページに表示されますが、
そのアイコンの位置を、「販売価格の下」又は「商品写真の上」に変更できますか?
design.cssの修正箇所など詳しく教えて下さい。
(質問2:商品一覧表示項目追加について)
商品一覧の各商品の販売価格に下に、
下記のような、
項目名(固定)+記入内容(商品ことに異なる)を追加することは可能でしょうか?
例えば、4行形式で、
・年式(初度登録):2011年
・次の車検:2022年4月
・走行距離:8.0万km
・車体色:ブラック
です。
宜しくお願い致します。
商品一覧のアイコンの表示位置を変更する専用の設定はございませんので、
イージーマイショップのスタイルシートを一部編集していただくような対応となります。
店長ナビ>デザイン設定>テンプレートタブにて適用中のテンプレートの[CSS]をクリックし、
[design.css(デザインテンプレート)]内に以下の記述がございます。
〇変更前
.related_item_list .related_item_catalog .item_icon_block,
.item_catalog .item_icon_block { /* 商品一覧カタログ 付加アイコンエリア */
position: absolute;
top: 0; left: 0;
padding: 0;
z-index: 1;
}
こちらの【absolute】を【relative】に変更していただくようお願いいたします。
〇変更後
.related_item_list .related_item_catalog .item_icon_block,
.item_catalog .item_icon_block { /* 商品一覧カタログ 付加アイコンエリア */
position: relative;
top: 0; left: 0;
padding: 0;
z-index: 1;
}
また、ランキングパーツでのアイコンの表示位置に関しましては以下の
スタイルサンプルを利用して調節をお願いいたします。
.related_item_list:not(.vertical) .related_item_catalog .item {
margin-top: 50px;
}
.related_item_list .related_item_catalog .carousel_li .item_icon_block {
top: -45px;
}
※イージーマイショップのサポートにおいては、サンプルとなるスタイルの案内のみとなります。
詳細な調整については、店舗様にて行って頂きますようお願い致します。
※イージーマイショップにて作成されるページの各箇所(商品名やアイコン画像、価格表示など)には、classを充てております。
そのclassに対しスタイルを追加する事で、詳細なデザイン調整が行えます。
基本的には、classの確認を含め、店舗様にて実施いただきますようお願い致します。
classの確認は、変更箇所を右クリックして表示される「要素の検査(IEの場合)」や「検証(Chromeの場合)」などでご確認下さい。
※使用されているテンプレートや変更されているデザイン・スタイル・設定などにより、
追加するスタイルにてレイアウト等が崩れてしまう、または、他の画像等と重なってしまうなどがございます。
その場合、他のスタイルの変更も必要となりますので、店舗様にて調整いただきますようお願い致します。
また、商品に対して任意の項目を設定することは可能ですが、商品一覧ページにおいて表示可能な追加項目は1項目のみとなっております。
※商品詳細ページでは最大30項目表示可能です。
項目の設定については店長ナビ>拡張設定>デザイン設定の文字変更タブより「商品項目名」内にございます、
「自由項目」にて項目名の設定をしていただき保存をしてください。
次に項目を追加したい商品の編集ページにて下部の[その他詳細]にございます、自由項目にて商品情報をご記載ください。
※商品詳細ページでの表示位置は商品名の下になります。(表示位置の変更はできません。)
※商品一覧で表示されるのは1項目のみとなり、商品名上に表示されます。(商品情報のみとなり項目名は表示されません)
最後に、商品一覧ページにて自由項目を表示する設定を行います。
(以降はご利用中の上級モードでの案内となります)
フリーエリア一覧(デザイン設定>レイアウトタブ)を開き[商品一覧・商品フレーム]ボタンを押します。
[商品一覧・フレーム設定]画面の[商品フレーム項目]項目から「商品属性表示:自由項目●」を選択して保存してください。
以上で商品一覧ページにて自由項目を表示させることができますので、以上を参照いただきお試しください。