トップページをオリジナルLP（HTML）に変更する方法について

yuya_aono · ‎11-16-2022

オリジナルLP（HTML）をShopifyのトップページに適用することは可能でしょうか？

ページ追加でHTMLを入力すると、/pages/となりURLが変わってしまうので、

トップページにLPをそのまま適用したいです。

その他の商品ページなどはShopifyのテーマ（Dawn）を使用し、トップページのみオリジナルに変更したいです。

今あるLPのコードをliquidに変更する作業など、どのような作業が必要になるのか教えて頂けますでしょうか？

参考となる記事等もございましたら、教えて頂きたいです。

宜しくお願い致します。

株式会社フルバランス · ‎11-17-2022

Yuya_aonoさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

トップページをLPにできるとお客様にしっかり訴求できて良いですよね。

２通り実装方法があるかと思います。

①トップページにLPをページとして載せる (URLはトップページ）

LPをページとして作成し、トップページのカスタマイズ画面でページを追加

② トップページにアクセスしたらLPにリダイレクトさせる（URLはLP用ページ）

海外のフォーラムでも回答があるように、theme.liquidの<head>タグの直前に

{%- if template contains 'index' -%}
<script>
window.location.href = '/pages/LPページのハンドル';
</script>
{%- endif -%}

を挿入し、LPページのハンドルを記入。

この場合トップページは必ずLPにリダイレクトされるので実質トップページ＝LPになります。

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　渡邉

株式会社フルバランス（Shopify Experts）
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』株式会社フルバランス

元の投稿で解決策を見る

株式会社フルバランス · ‎11-17-2022

Yuya_aonoさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

トップページをLPにできるとお客様にしっかり訴求できて良いですよね。

２通り実装方法があるかと思います。

①トップページにLPをページとして載せる (URLはトップページ）

LPをページとして作成し、トップページのカスタマイズ画面でページを追加

② トップページにアクセスしたらLPにリダイレクトさせる（URLはLP用ページ）

海外のフォーラムでも回答があるように、theme.liquidの<head>タグの直前に

{%- if template contains 'index' -%}
<script>
window.location.href = '/pages/LPページのハンドル';
</script>
{%- endif -%}

を挿入し、LPページのハンドルを記入。

この場合トップページは必ずLPにリダイレクトされるので実質トップページ＝LPになります。

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　渡邉

株式会社フルバランス（Shopify Experts）
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』株式会社フルバランス

yuya_aono · ‎11-17-2022

早速のご返答ありがとうございます！

とても参考になりました！

yuya_aono · ‎11-24-2022

ご回答ありがとうございました。

下記について追加の質問となります。

＞①トップページにLPをページとして載せる (URLはトップページ）

＞LPをページとして作成し、トップページのカスタマイズ画面でページを追加

上記方法で他サーバーで公開しているLP１本をそのままShopifyのページで作成し、すべてShopifyにまとめたいと考えております。

その場合、liquidでコードを直接編集する必要があるかと思いますが、

どのような手順で行えば宜しいでしょうか？

LPはレスポンシブデザインで主にHTML・CSS・Jsで構成されています。

また、自力で出来ず外部に委託する場合、どれくらいの納期・費用になりますでしょうか？

お手数ですが、宜しくお願い致します。

トップページをオリジナルLP（HTML）に変更する方法について

トップページをオリジナルLP（HTML）に変更する方法について

コミュニティ・ブログ記事