![見出し画像](https://assets.st-note.com/production/uploads/images/113834440/rectangle_large_type_2_bc56b259dbafa1e53c66943fbbf1fc26.png?width=1200)
[Shopify]ランディングページ◆テンプレート8
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
LINE登録へ促す用のシンプルなLPです。ブロックは3つだけなので上手く組み合わせればユーザーフレンドリーな導線になるのではないかなと思います^^
ベーステーマ:Dawn
※他のテーマでも動作できると思いますがテーマによっては調整が必要になるかも。
✔️今回のテンプレート
====
パソコン
====
横幅は750pxで固定
![](https://assets.st-note.com/img/1692505722505-CNz09He5EM.png?width=1200)
====
スマホ
====
![](https://assets.st-note.com/img/1692505763353-wsQCPmf9cq.png?width=1200)
◆CMSの特徴
![](https://assets.st-note.com/img/1692509194851-h4URt92uew.png?width=1200)
ブロックは4種類
![](https://assets.st-note.com/img/1692506037082-l49WkTXWq6.png?width=1200)
・ファーストビュー
・コンテンツ1️⃣
→背景カラーの選択と画像
・コンテンツ2️⃣
→横幅いっぱいに画像が表示されます
・CTA
💡共通設定
![](https://assets.st-note.com/img/1692506160441-ixxmSNRnXh.png)
![](https://assets.st-note.com/img/1692506173417-pveClpOQWf.png)
・ヘッダー/フッターのON/OFF
💡ファーストビュー
![](https://assets.st-note.com/img/1692506430518-3JRBs1qaZ4.png?width=1200)
・画像の設定のみ
→正方形で表示されます。
💡コンテンツ1
![](https://assets.st-note.com/img/1692506404320-ttXSxn6eqw.png?width=1200)
・画像
・ブロックの背景
・ブロックの上下の余白
💡コンテンツ2
![](https://assets.st-note.com/img/1692506580723-nGk8nzNvlv.png?width=1200)
・画像
→コンテンツ枠いっぱいに画像が表示されます。
→背景カラーの選択はなし
・ブロックの上下の余白
💡CTAボタン
![](https://assets.st-note.com/img/1692506763622-SDTWrAGXaS.png?width=1200)
![](https://assets.st-note.com/img/1692506772938-FXbhbFB4ms.png?width=1200)
・リード文のイメージ(任意)
→画像で挿入
・ボタンテキスト
・リンク
・ボタンの形
・カラー(ブロック背景/ボタン背景/ボタンテキスト)
・ブロックの上下の余白
対象ページのテンプレートを「line01」に設定して使用してください。
![](https://assets.st-note.com/img/1692504625638-8Dc8bIFitb.png?width=1200)
✔️設置方法
Step1 新規Section作成
![](https://assets.st-note.com/img/1692504301290-kSkYuZ9ulT.png)
ファイル名:lp-line01
【ご購入前のご注意】
※返金&サポートはしておりません。
※CSSがおかしい時はご自身で調整して下さい。
※コードのみのご紹介で解説などはしておりません。
※Dawnベースで作成してます。他のテーマでも使用できると思いますがレイアウト崩れなどはあるかもしれません。
※2023.8時点のコードです。メンテナンスは今後する予定はありません。
ここから先は
9,248字
/
3画像
この記事が気に入ったらサポートをしてみませんか?