![見出し画像](https://assets.st-note.com/production/uploads/images/75141870/rectangle_large_type_2_675658b4daf57e71b06953528ee4cf19.png?width=1200)
[Shopify]コピペで簡単設置!ランディングページ◆テンプレート1
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
2年前からずーーーっとやってみたいと考えていた1ページのランティングページのテンプレート作り。
1ページ全てをコーディングして、NoteにUPする!!と思い始めたNoteですが、飽き性な私は絶対続かないと思い、まずはパーツ作りからと思って始めた、「100本ノック」マガジン。
そろそろノウハウも溜まってきたことですし、ここで掲載したコードを組み合わせて月1ペースぐらいでShopifyでペラ1のランディングページテンプレを作っていこうと思います♪
↓先行して続編マガジン始めちゃいましたが、こういうランディングページのネタを続編としてやりたかったのです。
コピペで簡単に設置できるように1ファイルにCSSも記載するようにしています^^
テーマ:Dawn
✔️今回のテンプレート
eBook販売ページ向けのデザインで構成していますが、ジャンルの違う商品アピールでも全然使えそうですね!!
◆レイアウト PC版
![](https://assets.st-note.com/img/1648362641383-m1GYj5xMTu.png?width=1200)
◆レイアウト モバイル版
![](https://assets.st-note.com/img/1648362801676-eqQnJNahQ5.png?width=1200)
>>デモページ
✔️CMSの特徴
![](https://assets.st-note.com/img/1648855300584-ccjg5ZhukJ.png?width=1200)
【7つのブロック】
・ファーストビュー
・投稿者
・大見出し
・訴求
・投稿者
・Author
・最後の一押し
※表示非表示や位置の移動できます
上記のブロックに沿って、画像とかテキストを入れていくとランディングページができるというテンプレート♪
◆ファーストビュー
![](https://assets.st-note.com/img/1648855482135-vIG92vcSTX.png?width=1200)
![](https://assets.st-note.com/img/1648855496600-lz0Eb10pkP.png?width=1200)
![](https://assets.st-note.com/img/1648855506942-yn7hPGjbvG.png?width=1200)
◆投稿者1
![](https://assets.st-note.com/img/1648855902777-xopO6lcpHr.png?width=1200)
◆大見出し
![](https://assets.st-note.com/img/1648855961416-m7dEKa1tRK.png?width=1200)
![](https://assets.st-note.com/img/1648855968087-D5Vnd3I305.png?width=1200)
![](https://assets.st-note.com/img/1648855974800-NbgagYGVOx.png?width=1200)
◆訴求
![](https://assets.st-note.com/img/1648856876252-7unHLwV8uS.png?width=1200)
![](https://assets.st-note.com/img/1648856885386-ovWSd7Vwlv.png?width=1200)
◆投稿者
![](https://assets.st-note.com/img/1648856896457-7ovcqw6qHu.png?width=1200)
◆Author
![](https://assets.st-note.com/img/1648856947080-JjD6qs70Vy.png?width=1200)
![](https://assets.st-note.com/img/1648856950290-efP6Cc5YIS.png?width=1200)
E Book用のランディングページで作成したのでブロックタイトルはAuthorになっていますが、他の用途でも全然使えます♪
◆最後の一押し
![](https://assets.st-note.com/img/1648857119944-mDZFivYywz.png?width=1200)
![](https://assets.st-note.com/img/1648857169530-dicr9sKqjI.png?width=1200)
✔️設置方法
Step1 新規セクションファイル作成
![](https://assets.st-note.com/img/1648362322234-kcsskgR6Yv.png)
管理画面>テーマ>コード編集>Section>新規追加
ファイル名はなんでもOK!
今回はsales-lp-01としてみました。
Step2 新規Template作成
Template>新規テンプレートを作成
![](https://assets.st-note.com/img/1648362421229-oBj3muPwMO.png)
![](https://assets.st-note.com/img/1648362427655-wtjrLzIiMX.png?width=1200)
1)Pageを選択
2)JSONを選択
3)ファイル名なんでもO K
salesLP01としてみました。
作成したテンプレートJSONファイルに下記をコピペ
{
"sections": {
"main": {
"type": "セクションファイル名",
"settings": {
}
}
},
"order": [
"main"
]
}
"type": "セクションファイル名",
にStep1で作成したファイル名を記入。
この場合は、sales-lp-01です。
保存。
Step3 セクションファイルにテンプレートコードを貼り付け
Step1で作成したセクションファイルに、下記のテンプレートコードをコピペ。
ここから先は
この記事が気に入ったらサポートをしてみませんか?