Liquidを使用してカスタムランディングページのテンプレートを作成する方法

※2021年のアップデートに伴い、この記事の内容は古くなっております。記事で解説されているLiquidの基本的な内容は変わっておりませんが、最新情報は開発者サイト（英語）でご確認ください。

オンライン起業家はどこかの時点で、商品を販促し、マーケティングのリードをつかみ、キャンペーンを立ち上げるために、ランディングページを必要とします。こうしたクライアントのニーズに対して、開発者は専門性を活かしたサポートができます。

特定のオーディエンスをねらったランディングページにおいて、「ユーザー中心のデザイン」は不可欠です。開発者は、クライアントがサービスを提供するユーザーのことを念頭において、レイアウトやページの機能を作成する必要があります。

考え抜かれた静的セクションによって、カスタマイズ可能なランディングページをShopifyで構築することが可能です。ここに、クライアントはコンテンツを挿入できます。つまり、開発者はページのデザインに集中し、クライアントはどの商品とコピーをランディングページに表示させるかを決定できるのです。

Shopifyでランディングページを作成することは、新規顧客獲得のためにポートフォリオサイトを必要としている開発者にとっても有益です。ケーススタディ、過去のプロジェクト、持っているスキルをカスタムセクションに追加しましょう。

この記事では、既存テーマをカスタマイズする方法と、クライアントがストアコンテンツを入れられるランディングページのテンプレート作成法を見ていきます。また、Liquidタグとセクション設定によって柔軟なランディングページを実現し、キャンペーン時にオプションをクライアントに提供する方法もご紹介します。

カスタムページテンプレートの作成

テーマにランディングページを加える最初のステップは、特定キャンペーンのための独自のLiquidテンプレートファイルを作成することです。代替テンプレートを使うと、特定のランディングページ用Liquidファイルを作成できます。これはクライアントがadminからページに割り当てることができ、テーマエディターでカスタマイズすることも可能です。

管理画面のテンプレートエディターで新しいテンプレートを追加すると、エディターが自動でデフォルトのテンプレートコードを読み込みます。

管理画面のテンプレートエディターで新しいテンプレートファイルを作成すると、テーマのデフォルトのテンプレートが自動で生成されます。

この例では、追加要素を入力テキストの下に表示させたいので、新しいセクションはLiquidオブジェクト{{ page.content }}の下に含まれることになります。とはいえ、クライアントのためにコンテンツやセクションの最適なポジションをいろいろ試してみましょう。

NOTE： もしクライアントが複数のランディングページをホストすることを望んでいるなら、あなたはランディングページごとに異なるページテンプレートと固有のセクションを作成する必要があります。既知のセクションの制限は、1つのセクションに加えられた変更がセクションのイテレーション全体に影響するということです。そのため、1つのセクションの変更がほかのバージョンに波及するのを避けるため、個別のセクションを作成する必要があるのです。

ランディングページにコンテンツを追加

次に、クライアントがランディングページに掲載したいコンテンツは何かを正確に把握しておく必要があります。これは、何らかの商品や打ち出したいコレクション、またはオーディエンスを引き寄せたいブログ記事になるかもしれません。

今回の例では、コレクションにフォーカスし、特集コレクションのセクションをページに追加したいと思います。だいたいのテーマはすでに特集コレクションのセクションをもっていて、テーマエディターからアクセスできます。

これらの既存セクションは通常は動的セクションなので、ホームページに追加できますが、静的セクションとしてほかのページに追加することも可能です。スニペットの場合と同様、セクションLiquidタグを使ってテンプレートファイルにセクションを入れられます。これはヘッダーやフッターなどの静的セクションでよく使用されるものですが、ランディングページにも使用できます。

今回の例で使用しているのはテーマは、Narrativeです。特集コレクションを表示させる動的セクションをすでにもっています。セクションフォルダーでこのLiquidファイルを見つけたら、そのコードを新しいセクション内にコピーして、fall-featured-collection.liquidなどの適切な名前を付けます。

次に、セクション設定からプリセットを削除して静的セクションに変換します。セクションの最下部にあるJSON配列がこれに該当します。

これで、Liquidタグの{% section 'fall-featured-collection' %}を使って、カスタムページテンプレートに追加できるようになりました。

こちらも参考にしてください：初めてのShopifyテーマセクション作成

ランディングページにニュースレター登録を追加

ニュースレターの登録フォームはランディングページの主要コンポーネントの1つです。クライアントは、オーディエンスをページに誘導してリードを獲得できます。

テーマ内に既存のニュースレターセクションを見つけたら、同じプロセスで動的セクションを静的セクションに変換します。ニュースレターのセクションコードを含んだ新しいセクションを作成し、プリセットを削除して、マニュアルでカスタムページテンプレートに静的セクションとして追加できるようにします。

このニュースレターセクションには、表示と非表示をクライアントが選択できるオプションを追加することも可能です。クライアントが商品や別のCTA（Call To Action）を強調したい場合もあるので、こうした決定をクライアントができるようにしておきます。

セクション設定でLiquidのコントロールフロータグを使用すると、セクションの設定に基づいて表示と非表示を切り替える機能を作成できます。ここで適用するルールは次のようになるでしょう。

{% if section.settings.show_newsletter == true %}

    code for newsletter

{% endif %}

次に、show_newsletter属性に対応するチェックボックスをセクション設定に作成します。これにより、テーマエディターでニュースレターセクションの表示／非表示を切り替えられます。

"type": "checkbox",

"id": "show_newsletter",

"label": "Show newsletter sign up",

"default": true

ランディングページにCTAを追加

ランディングページに付き物なのが、CTA（Call To Action）ボタンです。クライアントはビジターのエンゲージメントを、アカウント作成などの行動またはコンテンツへのアクセスや特定の商品などへ導くことができます。

多くのテーマはCTA用のセクションをもっていないのが一般的ですが、自分でカスタムセクションを作成できます。

既存テーマはネイティブにCTAセクションをサポートしませんが、作成時にはデフォルトのクラス名を付けることが重要です。テーマ全体で一貫したスタイルになるようにするためです。

この例では、Narrativeを使っていますが、セカンダリースタイルのボタンがこのページにはフィットするので、このセクションをデザインするにあたってbtn--secondaryのクラス名を使用します。使用するクラス名やIDは、テーマによって異なります。

わたしはこのセクションに、マーチャントがテキストを追加できるヘッダーをCTAボタンの上に付加しました。ボタン自体のコピーとリンク先は、テーマエディターのセクション設定で決めることができます。これらの設定が終わると、CTAセクションのコードは次のようになります。

再度、クライアントが表示のオンオフを切り替えられる設定をこのセクションに追加します。これにより、マーチャントはランディングページに掲載すべき重要な要素が何なのかを柔軟に決定できます。

このセクションでは、ボタンの上にテキストフィールドを追加しました。クライアントがコピーを必要なときに加えられるようにです。これは、CTAに追加の補足ガイドなどを付記したい場合に有益です。

カスタムページテンプレートにすべてをまとめる

いくつか静的セクションを作成できたので、先程作ったカスタムページのテンプレートに入れていきます。上述したように、テンプレートへセクションを追加するにはセクションタグ（例：{% section 'fall-featured-collection' %}）を使用します。

作成した3つのセクションにセクションタグを追加すると、page.fall-landing-page.liquidテンプレートは以下のようになります。

これで、クライアントがランディングページを作るときに、特定のテンプレートを管理画面から選択できるようになりました。

ヘッダーとフッターをランディングページから隠す

ランディングページをデザインするときのオプションとして、ヘッダーナビとフッターを削除することが考えられます。こうすることで、ビジターへの行動オプションを制限し、ページコンテンツとCTAにフォーカスさせることができます。

新しく作成したランディングページがヘッダーとフッターを読み込むのを防ぐ条件を、Liquidのコントロールフロータグを使って設定することも可能です。ページ読み込みの速度を改善することにもつながります。

今回の例では、unlessタグを使って、現在のページがランディングページではない場合のみヘッダーを含めるようにしています。theme.liquidファイルにもこの条件を記述できます。ここではヘッダーが{% section 'header' %}として含まれています。

この条件を有効化するために、unlessステートメントの対象をpage.liquidのテンプレートファイル名にします。containオペレーターを用いて、テンプレートのタイトルに「landing-page」が含まれていない場合のみヘッダーを読み込む条件としています。

設定後のコードがこちらです。

{% unless template.suffix contains "landing-page" %}

          {% section 'header' %}

     {% endunless %}

同様に、フッターも同じtheme.liquidファイル内でunlessステートメントにラップできます。

{% unless template.suffix contains "landing-page" %}

          {% section 'footer' %}

     {% endunless %}

以上が実装されると、ヘッダーのナビとフッターはランディングページで表示されなくなり、ほかの「landing-page」をタイトルに含むファイルの場合も同じになります。しかしその他のストアフロントのページでは、ヘッダーもフッターも表示されます。

ランディングページのカスタマイズ

最終的に、このランディングページには、クライアントの手によって商品や登録フォーム、CTAボタンなどがテーマエディターから反映されます。ページセレクターは、ユーザーが特定のランディングページにアクセスして、関連設定を編集するのに役立ちます。

クライアントが希望するタイプの静的セクションをあなたが一度ランディングページに設定すれば、彼らはコレクションや商品、ブログやその他必要なコンテンツをページに反映させることが可能です。独断的ではないこのようなアプローチによって、クライアントは強調したいコンテンツを決めることができ、一方で開発者はビジュアル的なデザインとコンバージョン率の高いランディングページ作成に注力できるのです。

ユーザーにとってランディングページがどう見えてどう感じられるかを把握したいなら、わたしが作成した事例をこちらで確認可能です。

ランディングページをクリエイティブに

既存テーマのネイティブセクションを探究したり、ユニークな機能とレイアウトを持ったまったく新しいセクションを作成したり、いろいろ自由に試してみましょう。既存の動的セクションをカスタマイズして、もっとランディングページに合ったものに変えてみることもできるはずです。

上述したように、セクションの表示オプションを追加しておけば、クライアントはランディングページに必要ない要素を非表示にできます。こうした柔軟性は、クライアントがランディングページを立ち上げるときに重要になるでしょう。