「Shopifyの商品ページをカスタマイズする方法が知りたい」
そんな疑問を解決します。
Eコマースが飽和状態に近づいている今、商品をカスタマイズとパーソナライズはコンバージョン率を上げるために不可欠です。
カスタマイズされた商品ページは、あなたのブランドのユニークなイメージを表現し、より良いユーザーエクスペリエンスを提供し、販売準備を向上させることができます。
商品ページのカスタマイズは、技術を持たないマーチャントには骨の折れる作業に思えるかもしれません。
しかし、自分の好みに合わせて調整できるだけでなく、Webページを作成することで、その構造を理解し、どのように配置されているか、コンバージョン率を向上させるために何を改善すべきかを知ることができます。
この記事では、すべてのShopifyマーチャントがカスタム製品ページを作成・編集する方法を解説していきます。
この記事を読み終えたら、Shopifyテーマの機能に関わらず、自分自身で自由に商品ページをカスタマイズできるようになっているでしょう。
目次
Shopify商品ページをカスタマイズする方法
Shopifyでは、商品ページをカスタマイズするための2つのオプションがあります。
❶ テーマのデフォルト設定を利用する
❷ テーマのコードを編集する
テーマのデフォルト設定は、ほとんど技術的な作業を必要とせず、通常は基本的なもので、ショップは簡単な部分しか編集することしかできません。
しかし、あなたの実際の要求に応じて、それぞれの方法には長所と短所があります。
デフォルトのテーマ設定を使用する
新しい方法を紹介する際には、その長所を短所よりも先に述べていきます。
しかし、このテーマのデフォルト設定は基本的なものなので、時間を節約するためにも、まずデメリットを説明しましょう。そうすれば、このテクニックがあなたの問題を解決できるかどうか、すぐに判断できるでしょう。
テーマのデフォルト設定では制約・制限がある
テーマのデフォルト設定は、通常、あなたのストアに使用しているテーマによって異なりますが、テーマのデフォルト設定だけで、Shopifyの商品ページテンプレートに加えることができない共通の調整があります。
✅ 新しいセクションを追加することはできない
商品の説明、顧客からのフィードバック、デモンストレーションビデオなど、多くのセクションを持つ情報満載の商品ページを作ろうとしているなら、テーマのデフォルト設定以上のものを期待するべき。
Shopifyの商品ページは、一般的にストア管理画面で表示されるデザイン機能に制限されており、市場に出回っているほとんどのテーマでは変更することができません。
✅商品ページのレイアウトを変更できない
Shopifyのデフォルトの商品ページのレイアウトは、左に写真、右に商品説明があることに慣れているはずです。
新しいセクションを追加するのと同様に、Shopifyの商品ページ内の要素のレイアウトや位置を変更することはできません。そのため、商品説明を縦長ではなく横長にしたい場合は、別の選択肢が必要になります。
この2つが、テーマのデフォルト設定の最大のデメリットです。もしそれで問題なければ、Shopifyの商品ページのテンプレートを微調整するためにできることはたくさんあります。
微調整レベルでOKでしたら次のセクションに進んでください。カスタマイズ方法を解説していきます。
テーマのデフォルト設定で商品ページをカスタマイズする方法
商品ページのテンプレートのカスタマイズを開始するには、Shopifyの管理画面から「オンラインストア」>「テーマ」に進みます。
カスタマイズボタンをクリックすると、テーマの編集画面に移ります。
ドロップダウンリストから「商品ページ」を選択し、商品ページのテンプレートのカスタマイズを開始します。
ここで編集できるのは、ボタンの大きさ、テキストの色、カートページの外観、フォントなどです。このような小さな調整が必要な場合は、テーマのデフォルト設定を使って自分で行えるのが、コーディングを必要とせず、必要なときにいつでも変更できるShopifyのいいところです！
【応用編】テーマコードの編集を編集して自由に商品ページをカスタマイズする
ボタンの大きさ、文字の色、フォントサイズの設定だけでは足りませんか？では、テーマのデフォルト設定だけでは不十分な場合は、テーマのコードを編集して商品ページを構築する方法みていきましょう。
もちろん、コーディングは必要です。しかし、独自の商品ページテンプレートをしちゃえばすべての商品に適用できます。
主にShopifyのテーマは、Shopifyのために特別に開発されたコーディング言語であるLiquidで書かれています。Shopifyのテーマは、Liquidに加えて、HTML、CSS、JavaScriptが含まれています。
そのため、テーマのコードを編集する際には、これらのコーディング言語を使えることが必要です。
テーマのコードへのアクセスする
テーマのコードを編集するには、Shopifyの管理画面から「オンラインストア」＞「テーマ」と進みます。再度、アクションボタンから「コードを編集する」に移動します。
ここでは、テーマのコードを閲覧・編集することができます。
コードの編集開始
テーマのコードにアクセスできるようになったので、Shopifyストアのどのページにも変更を加えることができるようになりました。
テーマファイルの中では、/templates/product.liquidが商品ページのファイルです。テーマのコードの編集はここで行われることになります。
また、Shopifyでは、これらのテーマファイル内で何ができるのか?を商品ページの要素ごとに分類された詳細なマニュアルが用意されています。（英語ですが。。）
公式マニュアルではこんな感じのカスタマイズを解説しています。
- カートに入れるボタンのカスタマイズ
- 商品バリエーションのカスタマイズ方法
- 商品ページの特徴説明追加
HTML、CSSに慣れていて、Liquidの基本的な理解があれば、指示に従ってShopifyの商品ページテンプレートを自分でカスタマイズしてみるのもありです！
テーマコードを編集する時の注意点
- 編集する前に、テーマのバックアップコピーを作成することを忘れないでください。そうすれば、何かあったときにすべての変更を取り消すことができます。
- Shopifyを始めたばかりであれば、商品ページのカスタマイズのためにShopifyの専門家を雇うのは良いアイデアだと思います。長所と短所をよく考えてみると、どのソリューションがベストなのかを決めるのに役立つかもしれません。[/aside]
自分で商品ページをカスタマイズするか？Shopify専門家に依頼するべきか？
ほとんどのショップオーナーは、自分では技術的にハードルが高いため、Shopify専門家へ外注するを選択します。技術的な調査に費やす時間を節約すると同時に、成果を保証してくれます。
また、アフターサポートや、ニーズに合わなかった場合の返金も対応してくれる業者もあります。
【最高の解決策】コードなしで自由にページをカスタマイズできるアプリを使う
今、マーケティングや広告、資金調達などの業務が混沌としており、頭が混乱していると同時に、技術的なトレーニングの時間が発生しても、慌てないでください。完璧に見える答えがあります。
前述のアプローチを組み合わせることで、時間を節約し、コーディングをほとんど必要とせず、しかもページのカスタマイズをコントロールできるようになります。
それが、ページビルダーアプリです！！
ShopifyページビルダーアプリでShopify商品ページをカスタマイズする
前述したように、ページビルダーアプリは、超少ないコーディングでShopifyの商品ページ（およびその他のページ）を自分でカスタマイズするための方法です。
Shopifyのアプリストアには、「ページビルダー」というキーワードで検索できるページビルダーアプリが十数種類あります。
一般的に、ほとんどのShopifyのページビルダーは、ドラッグ＆ドロップ式の編集方法です。
セクションを柔軟にドラッグ＆ドロップして、そのパラメータ、動作、スタイリングを手の届く範囲で編集することができます。
魅力的なShopifyの商品ページテンプレートを、いかに簡単に一から作ることができるかを見てみましょう。
簡単なことですが、Shogunや他の多くのShopifyページビルダーでは、ユーザーがカスタムコードで編集をさらに微調整することもできます。
つまり、あなたのストアのカスタム商品ページを作るのに、コーディングは必要ありません。しかし、さらにカスタマイズが必要な場合は、さらに自由にカスタマイズが可能です。
個人的には「Shogun」というページビルダーがおすすめです。セクションが豊富にあり、かなり自由度高く商品ページが作れます。
Shogunを使って商品ページを自由にカスタマイズする方法
「Shogun」Shopifyアプリを利用して商品ページを編集する方法はこちらの記事で紹介しています↓
トライアルもあるので是非一度合うか試してみてください！
【参考になるデザイン】かっこ良すぎるShopify商品ページ紹介
Shopifyの商品ページのテンプレートをカスタマイズすることは、ページビルダーアプリの存在を知っていれば、もはや問題ではありません。
商品ページのイメージができている人はそのままでOK。そうでない方も、作業を始める前に一度こちらの事例集を見てみると、インスピレーションが浮かんでくるかもなので是非参考にしてみてください！
1.カスケード
ニッチ：ホーム＆ガーデンビジネス
製品ページのデモ カスケード
物語性を重視したデザインにより、ストーリー性を持って製品を販売することができます。また、個々の製品を強調した石積み風のグリッドで製品を紹介することができます。
2.パイプライン
ニッチ衣料品・ファッションビジネス
製品ページのデモ パイプライン
価格：140.00米ドル
ミニマルなスタイルを探しているなら、Pipelineはまさにあなたのためのものです。パララックス効果により、スクロールダウンしながらアニメーションのような奥行きを演出します。また、Pipelineでは、お客様がコレクションページで、ブランド、タイプ、カラー、サイズなどで商品を絞り込むことができます。
3.デビュー
ニッチジュエリー＆アクセサリービジネス
製品ページのデモ デビュー
価格は無料
無料のShopifyテーマであなたのブランドをデビューさせましょう。Debutは、超シンプルかつエレガントな方法で商品を表示するのに適しています。他の無料テーマと比較して、Debutテーマは期待以上のものです。それは、内蔵の顧客の声、拡大鏡機能、製品のフィルタリングを含む多くの機能で際立っています。
Shopifyのテーマ設定方法は？自社ECサイトに合うおすすめテーマの探し方
4.ナラティブ
ニッチアート・写真
製品ページのデモ ナラティブ
価格は無料
商品数が多いビジネスの場合は、クリーンでシンプル、そして簡単にカスタマイズできるNarrative Themeが最適です。製品ページでは、製品にスポットライトが当てられており、ビジュアル化によってブランドストーリーを伝えるのに適しています。
５.Expanse
ニッチ：ホーム＆ガーデン
製品ページのデモ Expanse
価格：180.00米ドル
モダンなテーマを探しているならExpanseは完璧な選択です。ホームページのメニューリストで簡単にナビゲートしたり、おすすめ商品で自分に合った商品を簡単に見つけたりすることで、ブランド力を高め、顧客体験を向上させます。
また、商品ページには、販売促進のためのカスタマイズされたポップアップを追加することができます。
６.ストリームライン
ニッチ：スポーツ・レクリエーション
製品ページのデモ ：ストリームライン
価格：180.00米ドル
Streamlineは、実際に製品のストーリー性を目的として設計された、目を引くテーマです。ストーリーを重視した製品ページでは、画像、動画、テキスト、アニメーションなどを追加することができます。
7. モーション
ニッチ洋服・ファッション
製品ページのデモ モーション
価格：180.00米ドル
ビジュアル・ストーリーテリングでブランドに命を吹き込む。Shopify Motionテーマの商品ページに着地したあなたは、商品ページをスクロールしながら商品の詳細を探る旅をしていることでしょう。複数のテキスト、画像、ページアニメーションを使った驚異的なアニメーションコンテンツは、文章だけでなくビジュアルストーリーテリングでも商品を紹介することができます。
『もう諦めなくていいんです』驚きの低価格でECサイトを作ります。
※自社ECサイト構築をお考えのショップオーナー様・WEB担当者様へ朗報です
daredemoECでは、Shopify ECサイト制作サービスを本格開始しました。”売れる”オンラインショップで販路を広げるチャンスです ▼
