1. トップページ
  2. コラム
  3. shopifyでLPを作りたい!

shopifyでLPを作りたい!

こんにちは。
福岡のWEB制作会社デザイントランスメディアの尋木です!

今回は記事のタイトルの通り、shopifyでのランディングページ制作について紹介したいと思います。

弊社でも、shopifyを使ったECサイト制作は何件も担当させていただいています。
やはり最大のメリットは、短期間で低コストなのに、高クオリティでECサイトをオープンできることです。

しかし、運用していく中で、様々な施策を実現するためにアプリを導入したり、テンプレートをカスタマイズしたりと、最低限のノウハウ(知識)が必要になってきます。

そして、最近多く相談いただくのが、shopifyでのランディングページ制作についてです。

結論から言うと、制作可能です!
そして、クライアントの状況やニーズによっていくつか選択肢があります。

1.すでにコーポレートサイトを持っている場合

すでに自社のコーポレートサイトを持っており、カート機能だけshopifyのものを使ってLPの制作がしたい場合は、「shopify Lite」というプランを利用することをオススメします。

このプランは、既存サイトやSNSに「カートボタン」を設置できるというプランです。

つまり、ECサイトを制作するというよりも、カート機能(購入ボタンの設置から、実際の購入まで)だけを実装するというやり方です。

これが一番ベーシックですね。

2.shopifyの「フリーページ」でLPを制作する場合

おそらく今回の記事で、一番気になるのはここだと思います。

フリーページを使ったLP制作は、一般的なコーディングスキルがあれば誰でも実装可能です。
特別なところと言えば、LP用のフリーページ専用のテンプレートを準備すること。

どういうことかというと、通常のフリーページには、デフォルトのテンプレートが適用されています。
そのため、サイト全体のテンプレートのCSSが適用されてしまいます。

LP制作では、ピックアップする商品やサービスによって、サイト全体のテイストとは違うデザインをすることが多い分、LP独自の環境が必要になります。

そのため、こちらで独自のテンプレートを作っちゃおう!という話ですね。

まずは「コードを編集する」から、コード編集ページに移動します。
ここで行う作業は、LP制作のための準備です。

1.新しいテンプレートを作成する
作成したテンプレートに任意の名前を付けます。
そして↓の記述をするだけ。

{{ '(任意の名前).css' | asset_url | stylesheet_tag }}


{{ page.content }}

これでテンプレートの準備ができました。


➁LP用のstylesheetを準備する

新しいアセットを作成します。
その際の名前が上記コードの「任意の名前」になります。

これで準備は完了です。

あとは通常のページ制作と同じように、フリーページの管理画面内でhtmlを記述し、先ほど準備したスタイルシートにCSSを記述していけばLPが完成します。(もちろんjsも同じ要領で準備すれば可能です。)

いかがでしたか?
実際に弊社でも多くのLP制作を行っており、LPのみというご相談も多数実現しております。
クライアントの求めることを、最適な方法で実現いたしますので、まずはお気軽にご相談ください!

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!

この記事を書いた人

小川 真弥