※2021年のアップデ，トに伴い，この記事の内容は古くなっております。記事で解説されている液体の基本的な内容は変わっておりませんが，最新情報は開発者サ电子邮箱ト(英語)でご確認ください。
オンライン起業家はどこかの時点で,商品を販促し,マーケティングのリードをつかみ,キャンペーンを立ち上げるために,ランディングページを必要とします。こうしたクラアントのニズに対して，開発者は専門性を活かしたサポトができます。
特定のオディエンスをねらったランディングペジにおいて，“ユザ中心のデザン”は不可欠です。開発者は,クライアントがサービスを提供するユーザーのことを念頭において,レイアウトやページの機能を作成する必要があります。
考え抜かれた静的セクションによって，カスタマShopifyで構築することが可能です。ここに，クラ恭顺器アントはコンテン恭顺器を挿入できます。つまり,開発者はページのデザインに集中し,クライアントはどの商品とコピーをランディングページに表示させるかを決定できるのです。
Shopifyでランディングページを作成することは,新規顧客獲得のためにポートフォリオサイトを必要としている開発者にとっても有益です。ケ，ススタディ，過去のプロジェクト，持っているスキルをカスタムセクションに追加しましょう。
この記事では,既存テーマをカスタマイズする方法と,クライアントがストアコンテンツを入れられるランディングページのテンプレート作成法を見ていきます。また，液体タグとセクション設定によって柔軟なランディングページを実現し,キャンペーン時にオプションをクライアントに提供する方法もご紹介します。
カスタムペ，ジテンプレ，トの作成
テ，マにランディングペ，ジを加える最初のステップは，特定キャンペ，ンのための独自の液体テンプレトファルを作成することです。代替テンプレ，トを使うと，特定のランディングペ，ジ用液体ファ@ @ルを作成できます。これはクラ@ @アントが管理からペジに割り当てることができ，テマエディタでカスタマズすることも可能です。
管理画面のテンプレートエディターで新しいテンプレートを追加すると,エディターが自動でデフォルトのテンプレートコードを読み込みます。
管理画面のテンプレートエディターで新しいテンプレートファイルを作成すると,テーマのデフォルトのテンプレートが自動で生成されます。
この例では，追加要素を入力テキストの下に表示させたいので，新しいセクションは液体オブジェクト{{页面。内容}}の下に含まれることになります。とはいえ，クラ恭顺器アントのためにコンテン恭顺器やセクションの最適なポジションをいろいろ試してみましょう。
请注意：もしクライアントが複数のランディングページをホストすることを望んでいるなら,あなたはランディングページごとに異なるページテンプレートと固有のセクションを作成する必要があります。既知のセクションの制限は，1。そのため，1つのセクションの変更がほかのバージョンに波及するのを避けるため,個別のセクションを作成する必要があるのです。
ランディングペ，ジにコンテン，を追加
次に,クライアントがランディングページに掲載したいコンテンツは何かを正確に把握しておく必要があります。これは，何らかの商品や打ち出したいコレクション、またはオーディエンスを引き寄せたいブログ記事になるかもしれません。
今回の例では,コレクションにフォーカスし,特集コレクションのセクションをページに追加したいと思います。だいたいのテーマはすでに特集コレクションのセクションをもっていて,テーマエディターからアクセスできます。
これらの既存セクションは通常は動的セクションなので,ホームページに追加できますが,静的セクションとしてほかのページに追加することも可能です。スニペットの場合と同様，セクション液体タグを使ってテンプレトファルにセクションを入れられます。これはヘッダーやフッターなどの静的セクションでよく使用されるものですが,ランディングページにも使用できます。
今回の例で使用しているのはテ，マは，叙述です。特集コレクションを表示させる動的セクションをすでにもっています。セクションフォルダ，でこの液体ファ▪▪ルを見▪▪けたら，そのコ▪▪ドを新しいセクション内にコピ▪して，fall-featured-collection.liquidなどの適切な名前を付けます。
次に，セクション設定からプリセットを削除して静的セクションに変換します。セクションの最下部にあるJSON配列がこれに該当します。
これで，液体タグの{% section 'fall-featured-collection' %}を使って，カスタムペ，ジテンプレ，トに追加できるようになりました。
こらも参考にしてください:初めてのShopifyテ，マセクション作成
ランディングペ，ジにニュ，スレタ，登録を追加
ニュスレタの登録フォムはランディングペジの主要コンポネントの1です。クラアントは，オディエンスをペジに誘導してリドを獲得できます。
テーマ内に既存のニュースレターセクションを見つけたら,同じプロセスで動的セクションを静的セクションに変換します。ニュースレターのセクションコードを含んだ新しいセクションを作成し,プリセットを削除して,マニュアルでカスタムページテンプレートに静的セクションとして追加できるようにします。
このニュースレターセクションには,表示と非表示をクライアントが選択できるオプションを追加することも可能です。クラ@ @アントが商品や別のCTA(行动呼吁)を強調したい場合もあるので，こうした決定をクラ。
セクション設定で液体のコントロ，ルフロ，タグを使用すると，セクションの設定に基づいて表示と非表示を切り替える機能を作成できます。ここで適用するル，ルは次のようになるでしょう。
如果section.settings. {%show_newsletter== true %}
通讯代码
{% endif %}
次に，show_newsletter属性に対応するチェックボックスをセクション設定に作成します。これにより，テマエディタでニュスレタセクションの表示/非表示を切り替えられます。
“类型”:“复选框”,
“id”:“show_newsletter”,
"label": "Show newsletter sign up"，
“默认”:没错
ランディングペ，ジにCTAを追加
ランディングペ，ジに付き物なのが，CTA(呼吁行动)ボタンです。クライアントはビジターのエンゲージメントを,アカウント作成などの行動またはコンテンツへのアクセスや特定の商品などへ導くことができます。
多くのテ，マはCTA用のセクションをもっていないのが一般的ですが，自分でカスタムセクションを作成できます。
既存テマはネティブにCTAセクションをサポ，トしませんが，作成時にはデフォルトのクラス名を付けることが重要です。テマ全体で一貫したスタルになるようにするためです。
この例では，叙述を使っていますが,セカンダリースタイルのボタンがこのページにはフィットするので,このセクションをデザインするにあたってbtn——二次のクラス名を使用します。使用するクラス名やIDは，テ，マによって異なります。
わたしはこのセクションに，マ，チャントがテキストを追加できるヘッダ，をCTAボタンの上に付加しました。ボタン自体のコピ，とリンク先は，テ，マエディタ，のセクション設定で決めることができます。これらの設定が終わると，CTAセクションのコ，ドは次のようになります。
再度，クラ。これにより，マ，チャントはランディングペ，ジに掲載すべき重要な要素が何なのかを柔軟に決定できます。
このセクションでは，ボタンの上にテキストフィ，ルドを追加しました。クラ▪▪アントがコピ▪▪を必要なときに加えられるようにです。これは，CTAに追加の補足ガ@ @ドなどを付記したい場合に有益です。
カスタムペ，ジテンプレ，トにすべてをまとめる
いくか静的セクションを作成できたので，先程作ったカスタムペジのテンプレトに入れていきます。上述したように，テンプレ，トへセクションを追加するにはセクションタグ(例:{% section 'fall-featured-collection' %})を使用します。
作成した3.のセクションにセクションタグを追加すると，page.fall-landing-page.liquidテンプレ，トは以下のようになります。
これで，クラアントがランディングペジを作るときに，特定のテンプレトを管理画面から選択できるようになりました。
ヘッダ，とフッタ，をランディングペ，ジから隠す
ランディングページをデザインするときのオプションとして,ヘッダーナビとフッターを削除することが考えられます。こうすることで，ビジタ，への行動オプションを制限し，ペ，ジコンテン，とCTAにフォ，カスさせることができます。
新しく作成したランディングペ，ジがヘッダ，とフッタ，を読み込むのを防ぐ条件を，液体のコントロ，ルフロ，タグを使って設定することも可能です。ペジ読み込みの速度を改善することにもながります。
今回の例では，除非タグを使って，現在のペ，ジがランディングペ，ジではない場合のみヘッダ，を含めるようにしています。theme.liquidファ@ @ルにもこの条件を記述できます。ここではヘッダ，が{% section 'header' %}として含まれています。
この条件を有効化するために，除非ステ，トメントの対象をpage.liquidのテンプレトファル名にします。包含オペレタを用いて，テンプレトのタトルに”着陆页が含まれていない場合のみヘッダ，を読み込む条件としています。
設定後のコドがこらです。
{%除非模板。后缀包含“landing-page”%}
{% section 'header' %}
{% endunless %}
同様に，フッタ，も同じtheme.liquidファ@ @ル内で除非ステ，トメントにラップできます。
{%除非模板。后缀包含“landing-page”%}
{% section 'footer' %}
{% endunless %}
以上が実装されると，ヘッダ，のナビとフッタ，はランディングペ，ジで表示されなくなり，ほかの”着陆页“をタ▪▪トルに含むファ▪▪ルの場合も同じになります。”しかしその他のストアフロントのペ，ジでは，ヘッダ，もフッタ，も表示されます。
ランディングペジのカスタマズ
最終的に，このランディングペ，ジには，クラ，アントの手によって商品や登録フォ，ム，CTAボタンなどがテ，マエディタ，から反映されます。ページセレクターは,ユーザーが特定のランディングページにアクセスして,関連設定を編集するのに役立ちます。
クライアントが希望するタイプの静的セクションをあなたが一度ランディングページに設定すれば,彼らはコレクションや商品,ブログやその他必要なコンテンツをページに反映させることが可能です。独断的ではないこのようなアプローチによって,クライアントは強調したいコンテンツを決めることができ,一方で開発者はビジュアル的なデザインとコンバージョン率の高いランディングページ作成に注力できるのです。
ユ，ザ，にとってランディングペ，ジがどう見えてどう感じられるかを把握したいなら，わたしが作成した事例をこらで確認可能です。
ランディングペジをクリエティブに
既存テーマのネイティブセクションを探究したり,ユニークな機能とレイアウトを持ったまったく新しいセクションを作成したり,いろいろ自由に試してみましょう。既存の動的セクションをカスタマイズして,もっとランディングページに合ったものに変えてみることもできるはずです。
上述したように,セクションの表示オプションを追加しておけば,クライアントはランディングページに必要ない要素を非表示にできます。こうした柔軟性は，クラアントがランディングペジを立上げるときに重要になるでしょう。
Shopifyパ，トナ，プログラムでビジネスを成長させる
マーケティング,カスタマイズ,またはWebデザインや開発など提供するサービスに関係なく,Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で,収益分配の機会が得られ,ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマスコミュニティに今すぐ参加しましょう!
