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

今回は、対象のテンプレートで「おすすめ商品」の表示を変更する方法をご紹介します!
※対象テンプレート:【WIDELY】

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

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

【WIDELY】のPC表示で
・おすすめ商品(RECOMMEND)を新商品と同じように横並びで表示したい

【WIDELY】について

【WIDELY】は、トップページに「おすすめ商品」が縦に並んで表示されます。「おすすめ商品」をひとつひとつアピールしたいショップ様にぴったりのテンプレートです。ですが、「新商品」と同じように横並びに陳列したい場合は、CSSを編集して変更することができます!

WIDELY

おすすめ商品(RECOMMEND)を新商品と同じ横並びで表示したい
(対象テンプレート: WIDELY)

それでは、早速みていきましょう。

設定方法

CSSを調整する

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

内のソースを下記の手順で編集してください。class名を検索して探すとスムーズです。

【1】class名を追加する。

CSSを次のように変更(class名を追加)してください。

▼817行目付近

【2】CSSを削除する。

次の4箇所((a)~(d))のソースを全て削除してください。

(a)▼723行目付近

(b)▼744行目付近

(c)▼783行目付近

(d)▼791行目付近

・CSSはバックアップをしてから編集しましょう。
・大幅にCSSを編集する際は、作業効率が良いHTMLエディタを利用するのがおすすめです。
関連記事:独自デザインバックアップしてますか?!オススメ無料のHTMLエディタ5選!

完了

【WIDELY】ご利用で「おすすめ商品」が横並びで表示されました!

WIDELY

いかがでしたでしょうか。
トップページのファーストビューで商品を横並びにしてたくさん紹介したい場合にカスタマイズ表示してみましょう。

それではまた!