テンプレート「&more」の商品詳細ページで、サブ画像(サムネイル)をグリッド表示にすることは可能です。「商品詳細」の「CSS」欄にソースコードを追記することで対応できます。
初期値では、サブ画像のサムネイルはスライダー形式(横スクロール)で表示される仕様になっています。
編集画面
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄の末尾に、以下のソースコードを追記して保存してください。
/* Slickのスクロール用コンテナを解除 */
.item-image-thumb .slick-list {
overflow: visible !important;
height: auto !important;
padding: 0 !important;
width: 100% !important;
}
/* slick-trackをflex折り返しのグリッドに変更 */
.item-image-thumb .slick-track {
display: flex !important;
flex-wrap: wrap !important;
flex-direction: row !important;
transform: none !important; /* Slickが付けるtranslate3dを無効化 */
width: 100% !important;
height: auto !important;
}
/* Slickが生成するクローン要素(無限スクロール用の複製)を非表示 */
.item-image-thumb .slick-cloned {
display: none !important;
}
/* サムネイルエリアの幅をメイン画像と合わせる */
.item-image-thumb {
width: 100% !important;
}
/* 各サムネイルを12%幅で表示 */
.item-image-thumb .slick-slide {
width: 12% !important;
float: none !important;
height: auto !important;
box-sizing: border-box !important;
margin: 5px;
}※サムネイル1枚あたりの幅は、上記の「width: 12% !important;」の数値で調整できます。ショップ様のお好みの表示になるよう変更してください。
※ソースコードを編集する前に、必ずデザインセットのバックアップを取得してください。保存した内容は上書きされるため、バックアップがない場合は元の状態に戻せないことがあります。
よくある質問:【クリエイターモード】デザインセット(ソースコード)をバックアップする方法を教えてください。
関連記事
■makeshopサポート記事
ショップデザインバックアップしてますか?!


