![見出し画像](https://assets.st-note.com/production/uploads/images/69978896/rectangle_large_type_2_ea825802c09f80cc8b0e908d1952bc9e.png?width=1200)
[Shopify]コピペで簡単!Topに戻るスクロールボタンを設置(Dawn)23/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
Topに戻るスクロールボタンのセクションを作りました。今回はスクロールボタンはテキストを挿入するバージョンです。矢印パターンはまた次回ご紹介しようと思っています。
対象テーマ:Dawn
※コードの解説はしておりません。
※コピペですぐに使用できるフルコードをご紹介しています。
✔️今回のゴール
スクロールするとTOPへ戻るボタンが出てきます。
✔️CMSで設定できる機能
![](https://assets.st-note.com/img/1642246205175-xcOAA5Yzgd.png?width=1200)
◆以下の設定ができます。
❶カラー:ボタン&ボタンテキスト
❷ボタンテキスト:自由に変えられます
❸ボタンの形(計4種):
・四角
・角丸
・キュート
・丸
❹フォントサイズ
❺ボタンサイズ
◆4種類のボタン
![](https://assets.st-note.com/img/1642246568064-XCHTiKN8YG.png?width=1200)
![](https://assets.st-note.com/img/1642246671743-qETxxgs9e5.png?width=1200)
![](https://assets.st-note.com/img/1642246655651-6TsXaDVQA4.png?width=1200)
![](https://assets.st-note.com/img/1642246708779-91SfcRjhj2.png?width=1200)
(ころんとしてカワイイ)
![](https://assets.st-note.com/img/1642246795789-h2rdsktLy9.png?width=1200)
✔️設置方法
ここから先は
3,319字
/
3画像
この記事のみ
¥
500
期間限定!Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?