テンプレート&moreでは、スマホでは表示スペースを少なくし、スワイプ(指で横にはらう動作)で商品を見るようにデザインされている商品リストがあります。
スワイプしない表示への変更は可能です。
以下の商品リストはスワイプで商品を表示されるようにデザインされています。
・新商品(NewArrival 新入荷アイテム)
・おすすめ商品(Recommend おすすめアイテム)
・スペシャル商品(Special 注目アイテム)
・最近チェックした商品(Recently チェックしたアイテム)
・商品グループ(Relevant 関連性の高い商品)
スワイプなし表示にする場合は、以下の対応をおこなってください。
※編集の際は、デザインセットのコピーボタンをクリックし、バックアップを保管したうえで作業してください。
■makeshopサポート
ショップデザインバックアップしてますか?!
◆トップページ
(1)ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ 「JavaScript」
に記述されている以下の記述をすべて削除し、保存してください。
$(function() {
slickSetting();
});
function slickSetting() {
if ($(window).width() <= 768) {
$('.module-product-list').slick({
dots: true,
arrows: false,
centerMode: true,
centerPadding: '5vw',
slidesToShow: 3,
responsive: [
{
breakpoint: 580,
settings: {
slidesToShow: 2
}
}
]
});
}
}
(2)ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ 「CSS」
の末尾の
}
の前に、以下のように追記し保存してください。
<追記後>
.module-product-list {
justify-content: space-between;
max-width: 100%;
}
}
(3)ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
1985行目より後ろに記述されている
※行数は目安ですので、前後をご確認ください。
/*ranking*/
の前に以下を追加し保存してください。
<追記後>
.module-product-list { justify-content: space-between; max-width: 100%; } .module-product-list.product-list li { width: 47%; margin: 1rem 0; }
/*ranking*/
◆商品詳細ページ
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細「JavaScript」
123行目付近にある以下の記述を削除し、保存してください。
※行数は目安ですので、前後をご確認ください。
$('.module-product-list').slick({
slidesToShow: 5,
arrows: false,
dots: true,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 580,
settings: {
slidesToShow: 2
}
}
]
});
※前後の必要な記述( } など)は削除しないように注意してください。


