![見出し画像](https://assets.st-note.com/production/uploads/images/126137985/rectangle_large_type_2_ecd23f39ee0d859a903f58d95463c64d.png?width=1200)
[Shopify]クリックするとモーダルOPEN・モーダル内の矢印で次の要素をスライドできる(メタフィールド対応) #115 #temp-u
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
クリックするとモーダルが開くセクション。さらに、モーダル内で前後の要素を切り替えられるようにしてみました!
ベーステーマ:Dawn
※他のテーマでも挿入できると思いますがレイアウト崩れるかもしれないのでその場合はご自身で調整してね
✔️今回のゴール
![](https://assets.st-note.com/production/uploads/images/126135858/picture_pc_bd02c5d72a430cf12c8d760b2c6315de.gif?width=1200)
🔸CMSの特徴
「セクション U-1」を選択
![](https://assets.st-note.com/img/1703968601503-AB7vOYFASY.png?width=1200)
======
共通設定
======
![](https://assets.st-note.com/img/1703969262054-qHL4Pwhw9g.png)
![](https://assets.st-note.com/img/1703969374917-PjDVZSJzs2.png?width=1200)
・アンカー
・見出し
・ハイライトキーワード
→ハイライトにしたいキーワードを「""」と「,」で追加。反映されるのは各ブロックのインデックス横のタイトルのみ。
![](https://assets.st-note.com/img/1703969382593-lkJ0nP0PGh.png)
・各種カラー
・モーダル内のクローズボタン文言
・余白
======
ブロック毎の設定
======
![](https://assets.st-note.com/img/1703969566648-tDIo9euFR7.png)
![](https://assets.st-note.com/img/1703969767497-BbuMeQsku7.png?width=1200)
![](https://assets.st-note.com/img/1703969836251-AVLEiNIvqO.png?width=1200)
![](https://assets.st-note.com/img/1703969849419-P8MhOUi46Y.png?width=1200)
【リスト&モーダル内】
・タイトル
・画像
【モーダル内のみ】
・サブタイトル
・説明文
・リンク
※非表示にしたい場合は各種空欄で設定すればOK
【ご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コードのみのご紹介で解説などはしておりません。
※2023.12時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。(メンバーシップでコメント頂いた場合は修正します)
✔️設定手順
Step1 新規セクション追加
1️⃣管理画面>コード編集>セクション>新規追加
![](https://assets.st-note.com/img/1703968685966-TTVB0Cxjhy.png)
ファイル名はなんでもOK
→私はsection-temp-u-01で作成しました
ここから先は
21,142字
/
2画像
この記事のみ
¥
1,500
期間限定!Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?