福岡のweb制作・コンサルティング会社

  1. shopifyでLPを作りたい!

COLUMNコラム

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マーケティング戦略立案、コンサルティング、サイト分析などWEBについて、お困りの際はお気軽にご相談ください。

お電話からのご相談はこちら

092-832-1133

受付時間:10:30 - 18:30(土・日・祝日を除く)

フォームからのご相談はこちら

この記事を書いた人 尋木 風都 Creative & Development Division