![見出し画像](https://assets.st-note.com/production/uploads/images/141261400/rectangle_large_type_2_acd8729e8e9ee25ba88fff243ef073c6.png?width=800)
Shopify|スライドショーに影を付けて立体感を出す(Dawn)
こんにちは、ななこまです。
今回は平面のスライドショーに影を付けて、立体的にしてみました。
テンプレートの編集画面にカスタムcssが付いたおかげで、
コード編集をせずに簡単にデザインを変更できます。
1. テンプレートでスライドショーを追加する
![](https://assets.st-note.com/img/1677723069253-3UC3JbjPOm.png?width=800)
2. スライドショーをクリック→カスタムcssに下記を追加
![](https://assets.st-note.com/img/1677723246421-Hojaskmo9X.png?width=800)
.slideshow {
box-shadow: 10px 10px 15px -15px;
}
↑上記だと薄めの影になりますので、pxを変えてお好みの濃さに調整してください。
これだけで、モバイルでもデスクトップでも、影の付いたスライドショーになります。
![](https://assets.st-note.com/img/1677723497957-vZffjJELQc.png?width=800)
ぜひお試しください☺
この記事が気に入ったらサポートをしてみませんか?