こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は商品グループを利用して表示している
関連商品の表示をカスタマイズする方法をいくつかご紹介したいと思います！
こんなお悩みありませんか？
・商品グループ名を目立たせたい／消したい／自分で作った画像にしたい
・商品のサムネイル画像をサイズ変更したい
・商品別特殊表示を表示させたくない
・価格を目立たせたい
商品グループ（関連商品）のタグについて
まずはタグについておさらいです。
【ショップデザイン（PC）】>【内部ページ編集I】>【商品詳細画面管理】
エディターエリアに下記のタグを追記して表示します。
|
1 |
[BRANDGROUP] |
カスタマイズするために下記のようにタグをdivで囲っておきましょう！
|
1 2 3 4 |
<!--商品グループ--> <div class="section" id="r_group"> [BRANDGROUP] </div> |
それでは、それぞれ早速カスタマイズ方法をみていきましょう！
商品グループ名を目立たせたい／消したい／自分で作った画像にしたい
解決方法
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
下記のスタイル指定を追記してください。
▼目立たせたい（例：文字色を赤く、文字サイズを大きめにする）
|
1 2 3 4 |
#r_group h3 { color: #ff0000;/*←文字色*/ font-size: 16px;/*←文字サイズ*/ } |
▼消したい
|
1 2 3 |
#r_group h3 { display:none;/*←非表示*/ } |
▼自分で作った画像にしたい
タイトル画像を作成して表示します。
|
1 2 3 4 5 |
#r_group h3 { background: url("画像のURLパス") no-repeat;/*←タイトル画像を指定*/ text-indent: -9999em; height:20px;/*←タイトル画像の高さ*/ } |
・"画像のURLパス" ←タイトル画像のパスを記述します！
・参考記事：「画像やCSSファイルをアップロードしたい」
商品のサムネイル画像をサイズ変更したい
解決方法
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
下記のスタイル指定を追記してください。
|
1 2 3 4 |
#M_group a img{ width:140px;/*←横幅の画像サイズ*/ height:auto !important; } |
・横幅を大きく設定し過ぎるとレイアウトが崩れる場合がございますので、設定後は必ずショップ画面をご確認ください。
・もし画像があらくなって表示されてしまった場合は、商品画像の「縮小画像」に登録している画像サイズも大きくして登録しましょう。
参考：オンラインマニュアル「商品画像登録設定」
「商品別特殊表示」を表示させたくない
【商品管理】>【商品の設定】>【商品の登録】で
「商品別特殊表示」を入力している場合は自動で表示されます。
↓↓
解決方法
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
下記のスタイル指定を追記してください。
|
1 2 3 |
#M_group .spe { display:none;/*←商品別特殊表示を非表示 */ } |
価格を目立たせたい（例：文字色を赤く、文字サイズを大きめにする）
解決方法
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
下記のスタイル指定を追記してください。
|
1 2 3 4 |
#M_group .price{ color: ##ff0000;/*←文字色*/ font-size: 16px;/*←文字サイズ*/ } |
仕切りの点線を消したい
カスタマイズテンプレートを利用している場合は既に仕切り点線を消す指定が入力されています。
解決方法
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
下記のスタイル指定を追記してください。
|
1 2 3 |
#r_group #M_group .line img { display: none;/*←仕切り点線を非表示 */ } |
カスタマイズ完了！
ショップをみるで確認してみましょう！
いかがでしたでしょうか。
それぞれのカスタマイズ方法を元に
アレンジしたり、ちょっとしたソースの修正にチャレンジしてみてくださいね。
それではまた！
