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

今回はトップページに表示できる「新商品」「おすすめ商品」をカスタマイズする方法をいくつかご紹介したいと思います!

関連記事:トップページに「新商品」「おすすめ商品」を 表示したい【基本編】

こんな要望ありませんか?

「新商品」「おすすめ商品」の
・商品名の表示を変更したい/非表示にしたい
・価格表示を変更したい/非表示にしたい
・タイトル画像を変えたい

「新商品」「おすすめ商品」のタグについて

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

【独自デザイン(PC)】>【トップページ編集】>【中央画面管理】

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

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

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

『新商品』の
「商品名」または「価格」表示を変更したい/非表示にしたい

『新商品』の 「商品名」または「価格」表示

解決方法

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

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

▼商品名の文字色をグレー、文字サイズを大きめにする

↓↓反映後
『新商品』の 「商品名」変更

▼商品名を非表示にする

↓↓反映後
新商品商品名を非表示

▼価格文字色を赤く、文字サイズを大きめにする

↓↓反映後
『新商品』の 「価格」変更

▼価格を非表示にする

↓↓反映後
新商品価格を非表示

『おすすめ商品』の
「商品名」または「価格」表示を変更したい/非表示にしたい

『おすすめ商品』の 「商品名」または「価格」表示を変更

解決方法

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

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

▼商品名の文字色をグレー、文字サイズを大きめにする

↓↓反映後
商品名の文字色をグレー、文字サイズを大きめにする

※カテゴリー名の表示を変更したい場合は別途スタイルを追加する必要があります。

▼商品名を非表示にする

↓↓反映後
おすすめ商品商品名を非表示にする

※カテゴリー名を表示したい場合は別途スタイルを追加する必要があります。

▼価格文字色を赤く、文字サイズを大きめにする

↓↓反映後
『おすすめ』の 「価格」変更

▼価格を非表示にする

↓↓反映後
商品名の価格を非表示

「新商品」「おすすめ商品」のタイトル画像を変えたい

タイトル画像

解決方法

▼タイトル画像を変更

【独自デザイン(PC)】>【トップページ編集】>【タイトルイメージ管理】

「おすすめ商品タイトル」「新製品タイトル」に別の画像を登録します。

タイトルイメージ管理

参考:オンラインマニュアル「タイトルイメージ管理」

今回は例として、「再入荷商品」と名前をつけたタイトル画像を登録してみます。

↓↓変更後
タイトル画像変更後

▼タイトルを非表示にする

修正方法はトップページに「新商品」「おすすめ商品」を 表示したい【基本編】をご参照ください。

カスタマイズ完了!

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

いかがでしたでしょうか。
それぞれのカスタマイズ方法を参考にトップページをアレンジして表示してみましょう。

それではまた!