【Makeshop】スライドショーの左右画像をちょい見せする方法

Makeshopにはトップページにスライドショーを用意することができます。

スライドショーの左右に別画像をちょい見せすることで、キャンペーンやセール情報を設置すれば、ユーザーに向けてアピールになります。

ただこのデザインはテンプレートによっては、初期で用意されているものもありますが、中にはご自身でご用意しなければいけないことも。

そこで今回は簡単にスライドショーを実装できる方法をご紹介します。

クリエイターモードでの設定方法

メインメニュー/ショップデザイン/テンプレート選択・編集【ショップデザイン】→【クリエイターモード】→【トップ】「CSS」に入力してください。

設定条件としては、画像サイズは幅1000px、高さ500pxとしております。

makeshopオンラインマニュアル

トップページイメージの設定 | makeshopオンラインマニュアル PC、スマートフォンのショップページトップ、または中央に大きい画像か、スライド画像を表示することができます。

@media screen and (min-width: 1000px) { 
.bx-wrapper{
	overflow: hidden; 
}
.bx-viewport{
	overflow: visible !important;
	width: 1000px !important; /* スライド画像の横幅 */  
	margin: 0 auto;            
}
#wrap .bx-prev{
	left: 50% !important;
	margin-left:-516px; /*（スライド画像の横幅÷2）+（矢印画像の横幅÷2） */ 
}
#wrap .bx-next{
	right: 50% !important;
	margin-right:-516px; /*（スライド画像の横幅÷2）+（矢印画像の横幅÷2） */
}
}

上記コードの数値部分に関しては、変更していただいても問題ありません。

（スライド画像の横幅÷2）+（矢印画像の横幅÷2）の箇所は、参考値としてスライド画像の横幅を1000pxと仮定、Makeshopで元々用意されている矢印画像のサイズが32pxなので、（1000÷2）+（32÷2）＝516pxという計算より算出しております。

矢印部分やスライド画像のサイズを変更している場合は、適宜変更してください。

まとめ

今回紹介した方法を一度設定すれば、今後は同じサイズの画像を必要に応じて用意すれば、簡単にスライドショーの画像は差し替えできます。

Makeshopのトップページに設置できるスライドショーは簡単に実装できる割に、かなり効果的にユーザーへの宣伝（アピール）効果が狙えます。

1枚目にショップのイメージを伝える画像やセール情報をアピール画像を設置と、時期に合わせて使うことができます。

操作にご不安のある方、MakeshopでECサイトを持ちたい、という方はお気軽にお問い合わせください。