こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回は商品グループを利用して表示している
関連商品の表示をカスタマイズする方法をいくつかご紹介したいと思います!

関連記事 商品詳細ページに関連商品を表示したい【基本編】

こんなお悩みありませんか?

・商品グループ名を目立たせたい/消したい/自分で作った画像にしたい
・商品のサムネイル画像をサイズ変更したい
・商品別特殊表示を表示させたくない
・価格を目立たせたい

商品グループ(関連商品)のタグについて

まずはタグについておさらいです。

【独自デザイン(PC)】>【内部ページ編集I】>【商品詳細画面管理】

エディターエリアに下記のタグを追記して表示します。

カスタマイズするために下記のようにタグをdivで囲っておきましょう!

それでは、それぞれ早速カスタマイズ方法をみていきましょう!

商品グループ名を目立たせたい/消したい/自分で作った画像にしたい

商品グループ名

解決方法

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

▼目立たせたい(例:文字色を赤く、文字サイズを大きめにする)

▼消したい

▼自分で作った画像にしたい

タイトル画像を作成して表示します。

・"画像のURLパス" ←タイトル画像のパスを記述します!
・参考記事:「画像やCSSファイルをアップロードしたい

商品のサムネイル画像をサイズ変更したい

商品グループサムネイル画像

解決方法

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

・横幅を大きく設定し過ぎるとレイアウトが崩れる場合がございますので、設定後は必ずショップ画面をご確認ください。
・もし画像があらくなって表示されてしまった場合は、商品画像の「縮小画像」に登録している画像サイズも大きくして登録しましょう。
参考:オンラインマニュアル「商品画像登録設定

「商品別特殊表示」を表示させたくない

【商品管理】>【商品の設定】>【商品の登録】で
「商品別特殊表示」を入力している場合は自動で表示されます。

商品別特殊表示

↓↓

商品グループ商品別特殊表示

解決方法

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

価格を目立たせたい(例:文字色を赤く、文字サイズを大きめにする)

商品グループの価格

解決方法

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

仕切りの点線を消したい

商品グループ仕切りの点線を消したい

カスタマイズテンプレートを利用している場合は既に仕切り点線を消す指定が入力されています。

解決方法

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

カスタマイズ完了!

ショップをみるで確認してみましょう!

いかがでしたでしょうか。
それぞれのカスタマイズ方法を元に
アレンジしたり、ちょっとしたソースの修正にチャレンジしてみてくださいね。

それではまた!