futureshopの任意商品表示でスライダーを解除する方法(コマースクリエイター)

ECサイト構築

futureshop(コマースクリエイター)で用意されているパーツの「任意商品表示」のスライダー表示ではなく、単に商品が並んでいる状態にするためのCSSです。
下記のCSSを「 テーマ > オリジナルCSS 」か新規パーツを作成して任意商品表示付近に設置してください。

.fs-c-productListCarousel.fs-c-slick {
    display: block;
}
span.fs-c-productListCarousel__ctrl {
    display: none !important;
}
.fs-c-productListCarousel__list {
    display: block;
}
div.slick-track {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-gap: 16px;
    width: 100% !important;
    transform: none !important;
}
div.slick-track::before {
    content: none !important;
}
article.fs-c-productListCarousel__list__item.fs-c-productListItem {
    min-width: 100%;
    margin: 0;
}

複数の任意商品表示パーツがある場合は、全ての任意商品がスライダーではなくなります。
特定の任意商品表示パーツのみにCSSを適応させたい場合は、「任意商品表示パーツ」>「オプションを設定する」から、IDをつけてください。

ご自身での編集が難しい場合は、お問い合わせボタンより一度お問い合わせください。
上記のレビューパーツの作成と設置を550円(税込)でお引き受けいたします。

タイトルとURLをコピーしました