![見出し画像](https://assets.st-note.com/production/uploads/images/77583991/rectangle_large_type_2_946e16824c616aa211eb557c5fd007f1.png?width=1200)
[Shopify]コピペで簡単設置!ランディングページ◆テンプレート2
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
LPテンプレート第2弾♪
メルマガやLINE登録を促すLPなど活用方法は様々。
テーマ:Dawn
✔️今回のテンプレート
◆レイアウト PC版
![](https://assets.st-note.com/img/1651363210010-K1Ob6YUMkZ.png?width=1200)
◆レイアウト モバイル版
![](https://assets.st-note.com/img/1651363128096-YAqqz5Jqfh.png?width=1200)
✔️CMSの特徴
【7つのブロック】
・ファーストビュー
・実績
・お困りごと
・主な機能
・事例
・最後の一押し
・CTA
上記のブロックに沿って、画像とかテキストを入れていくデザインにしましたが、お好みで順番入れ替えとかもできます。
◆共通
![](https://assets.st-note.com/img/1651388718785-TItmx0pwfg.png?width=1200)
テーマカラー
ボタンカラー
ハイライトカラー2種類
ヘッダー・フッターのON /OFF
◆テキストは下記のタグを組み合わせれば表現色々アレンジできます。
(1)改行
PC /SP両方:<br>
PCのみ:<br class="small-hide">
SPのみ:<br class="large-up-hide">
(2)
ハイライト1:<span class="kv_highlight">xxx</span>で囲む
ハイライト2:<span class="highlight">xxx</span>で囲む
(3)小さめフォント:<span class="small">xxx</span>で囲む
(4)大きめフォント:<span class="large">xxx</span>で囲む
(5)太字:<strong></strong>で囲む
◆ファーストビュー
![](https://assets.st-note.com/img/1651387781086-5WEjD9VTkv.png?width=1200)
![](https://assets.st-note.com/img/1651387789637-9cvgpHpZBO.png?width=1200)
![](https://assets.st-note.com/img/1651387992217-NDd61RUJqA.png?width=1200)
◆実績
![](https://assets.st-note.com/img/1651388236767-dgRWcbc9gq.png?width=1200)
![](https://assets.st-note.com/img/1651388243893-f4MzTCNsg0.png?width=1200)
※画像は0〜6個設定可
◆お困りごと
![](https://assets.st-note.com/img/1651388397169-LsGuufGn8y.png?width=1200)
![](https://assets.st-note.com/img/1651388404489-OGaLVGqdMg.png?width=1200)
※設定箇所:4箇所
※4つの要素の表示/非表示の切り替えは不可。
◆主な機能
![](https://assets.st-note.com/img/1651388648237-euDdy1VCGR.png?width=1200)
![](https://assets.st-note.com/img/1651388656696-4OeUdI0Wl2.png?width=1200)
◆事例
![](https://assets.st-note.com/img/1651388684623-qqInTxhoa0.png?width=1200)
![](https://assets.st-note.com/img/1651388691835-q8s6Wzzq82.png?width=1200)
◆最後の一押し
![](https://assets.st-note.com/img/1651388545814-IqagR9lR7p.png?width=1200)
![](https://assets.st-note.com/img/1651388562658-13AONdgvDW.png?width=1200)
![](https://assets.st-note.com/img/1651388571401-WcbApSmL5l.png?width=1200)
◆CTA
![](https://assets.st-note.com/img/1651388607965-628r4NmsOj.png?width=1200)
✔️設置方法
Step1 新規セクションファイル作成
![](https://assets.st-note.com/img/1651364713386-czAGL9ApGH.png)
管理画面>テーマ>コード編集>Section>新規追加
ファイル名はなんでもOK!
今回はsales-lp-02としてみました。
Step2 新規Template作成
Template>新規テンプレートを作成
![](https://assets.st-note.com/img/1651364795660-Gvw1YJBU1j.png)
![](https://assets.st-note.com/img/1651367721894-ehM7bGIgoy.png?width=1200)
1)Pageを選択
2)JSONを選択
3)ファイル名なんでもO K
salesLP02としてみました。
作成したテンプレートJSONファイルに下記をコピペ
{
"sections": {
"main": {
"type": "sales-lp-02",
"settings": {
}
}
},
"order": [
"main"
]
}
"type": "セクションファイル名",
typeにStep1で作成したファイル名を記入。
この場合は、sales-lp-02です。
保存。
Step3 セクションファイルにテンプレートコードを貼り付け
Step1で作成したセクションファイルに、下記のテンプレートコードをコピペ。
ここから先は
この記事が気に入ったらサポートをしてみませんか?