![見出し画像](https://assets.st-note.com/production/uploads/images/103524224/rectangle_large_type_2_6d8c84ae38ead42d5cad79bd3b6ade95.png?width=1200)
[Shopify]Swiper.jsでおしゃれなスライドセクションを作ってみるPart2(Dawn)87/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
Swiper第2弾。CDN でおしゃれなスライドセクションを作ってみます。スライドごとに背景カラーも変更できます^^
対象テーマ:Dawn
✔️今回のゴール
デモページ:https://malins-100.myshopify.com/
(stahsk40jw1Mf)
![](https://assets.st-note.com/img/1682001533942-qtpFY3P6lj.png?width=1200)
![](https://assets.st-note.com/img/1682001537405-cbWSdUpY4r.png?width=1200)
◆CMSの特徴
====
共通設定
====
![](https://assets.st-note.com/img/1682001254378-QM2m8R3KQP.png?width=1200)
![](https://assets.st-note.com/img/1682001302021-ZvQ8qZDiGV.png?width=1200)
![](https://assets.st-note.com/img/1682001361567-bvqnwho3rE.png?width=1200)
====
共通設定
====
![](https://assets.st-note.com/img/1682001392254-HDVlAUtMq5.png?width=1200)
✔︎設定手順
◆事前準備 Swiper.jsのCDN を挿入
管理画面>テーマ>コード編集>レイアウト>theme.liquidを開く
下記のCDN のタグを</header>の直前にコピペ。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
![](https://assets.st-note.com/img/1681998980113-GvqJCYDnNK.png?width=1200)
【ご注意】
※返金&サポートはしておりません。
※最新のDawnテーマ対象です。
※コードのみのご紹介で解説などはしておりません。
※2023.4.20時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。
ここから先は
11,473字
/
1画像
この記事のみ
¥
1,200
期間限定!Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?