Shopify商品ページのカスタマイズ：最も簡単な3つの方法と例

Shopifyの商品ページをカスタマイズする方法を探しているなら、あなたは正しい道を歩んでいる。Eコマースが飽和状態に近づいている今、カスタマイズとパーソナライズはコンバージョン率に不可欠です。うまくカスタマイズされたShopifyの商品ページは、あなたのブランドのユニークなイメージを表現し、より良いユーザー体験を提供し、販売態勢を改善することができます。

Shopifyページの構築とカスタマイズは、非技術商人には骨の折れる作業に聞こえることがある。しかし、あなたの好みに合うように微調整することができるだけでなく、ウェブページを作成することで、そのページの構造や、コンバージョン率を上げるための改善点を理解することができます。

この記事では、Shopifyの商品ページを作成、編集する方法を見てみましょう。記事の最後には、サードパーティ製アプリのサポートの有無にかかわらず、Shopifyストアの選択した、またはすべての商品のテンプレートを構築できるようになります。この究極のガイドをお見逃しなく。

Shopifyで商品ページをカスタマイズする方法：つの方法

まず、Shopifyの商品ページをサードパーティのアプリを使わずに管理画面からカスタマイズする方法を2つご紹介します。

Shopifyのカスタム商品ページ 方法その1：デフォルトのテーマ設定を使う

アプリを使用せずにShopifyの商品ページをカスタマイズする最初の方法は、Shopifyテーマエディタを使用することです。Shopifyテーマエディタは、Shopifyストアのすべての部分を変更するために使用することができるプラットフォーム内蔵のストアカスタマイズツールです。

使用しているテーマによって、Shopifyテーマエディターの構造は異なる。

とはいえ、すべてのカスタマイズツールは同じように機能する。このように、あなたは効率的な方法でShopifyの商品ページをカスタマイズするためにテーマエディタを使用することができます。また、各ツールの設定を微調整するだけなので、最も簡単なカスタマイズ方法です。

デフォルトのテーマ設定：いくつかの制限

テーマのデフォルト設定は通常、あなたのストアに使用しているテーマによって異なりますが、テーマのデフォルト設定だけで、Shopifyの商品ページテンプレートに行うことができない一般的な調整があります：

新しいセクションの追加はできません

もしあなたが、商品説明、顧客からのフィードバックやデモビデオをフィーチャーした多くのセクションを持つ情報満載の商品ページを望んでいるのであれば、テーマのデフォルト設定以上のものを期待すべきです。Shopifyの商品ページは、一般的にストアの管理画面に表示されるデザイン機能に制限されており、市場に出回っているテーマのほとんどはそれを変更することができません。

商品ページのレイアウトを修正

Shopifyで商品ページのレイアウトを変更するには？左側に写真、右側に商品説明というShopifyのデフォルトの商品ページレイアウトに慣れているはずです。新しいセクションを追加するのと同様に、Shopifyの商品ページ内の要素のレイアウトや配置を変更することはできません。そのため、商品説明を縦長ではなく横長にしたい場合は、別の選択肢が必要かもしれません。

この2つがテーマのデフォルト設定の最大の欠点です。もしそれでもいいのであれば、Shopifyの商品ページテンプレートを微調整できることはたくさんあります。

Shopifyテーマエディタの使い方

Shopifyの商品ページテンプレートのカスタマイズを始めるには、Shopifyの管理画面からオンラインストア > テーマに進みます。

カスタマイズボタンをクリックすると、テーマの編集ページに移動します。

ドロップダウンリストから商品ページを選択し、商品ページテンプレートのカスタマイズを開始します。

ボタンのサイズ、テキストの色、カートページの外観、タイポグラフィなど。このような微調整が必要なだけであれば、テーマのデフォルト設定を使って自分で行うのが一番です。コーディングや専門家を雇う必要がなく、必要なときにいつでも変更することができます。

Shopify商品ページカスタマイズ方法その2：テーマコードを編集する

あなたは自分でやるタイプですか？素晴らしい。ボタンサイズ、文字色、フォントサイズ以上の設定が必要ですか？絶対に方法はあります。テーマのデフォルト設定だけでは不十分なら、テーマのコードに深く介入する時です。

もちろんコーディングは必要です。しかし、あなたが好きなように変更し、独自の製品ページテンプレートをカスタマイズするのに十分強力でもあります。

リキッド、HTML、CSS、JS: 準備しよう

主に、ShopifyのテーマはShopifyのために特別に開発されたコーディング言語であるLiquidで書かれています。Liquidとともに、ShopifyテーマはHTML、CSS、JavaScriptも含んでいます。ですから、これらのコーディング言語を使えることは、テーマのコードを編集したいときに必要です。

テーマのコードにアクセスする

テーマのコードを編集するには、Shopifyの管理画面からOnline store > Themesに進みます。カスタマイズ]ボタンの横にある3つの点のボタンをクリックし、[コードを編集]オプションを選択します。

コードの編集を開始する

テーマのコードにアクセスできるようになったので、Shopifyストアのどのページにも変更を加えることができる。言うまでもなく、何をすべきかは様々であり、あなたが行いたい特定の変更に依存する。

テーマファイルの中で、/templates/product.liquidが商品ページのファイルです。テーマのコードの編集はここで行われます。

Shopifyは 詳細なドキュメント を提供しています：

• カートに入れるボタン
• バリエーション
• 製品ページの特徴

もしあなたがHTML、CSSに慣れていて、Liquidの基本的な理解を持っているなら、指示に従ってShopifyの商品ページテンプレートをカスタマイズすることができます。

注：

• 編集する前に、テーマのバックアップコピーを作成することを忘れないでください。そうすれば、物事が軌道から外れたときにいつでもすべての変更を取り消すことができます。
• あなたの調整がテーマ開発者のサポート下にあることを確認してください。そうして初めて、編集中に発生した問題に対する適切なサポートを受けることができます。
• 始めたばかりであれば、商品ページのカスタマイズをShopifyの専門家に依頼するのも良いアイデアだ。長所と短所をよく考えて、どのソリューションがベストかを決めるとよいだろう。

自分でやるか、専門家を雇うか

ほとんどの場合、自分でやっても最良の結果が得られるかどうか分からないので、専門家を雇うことを選択します。経験豊富なShopify専門家チームは、技術的な調査に費やす時間を節約すると同時に、最高の結果を保証します。また、アフターサポートも期待でき、ニーズに合わなかった場合の返金も可能です。

それはとてもいいことだと思うが、1つだけ例外がある。

夜中の2時、売上を急上昇させるトレンドに合わせてページレイアウトを微調整する必要があるとしよう。あなたならどうしますか？

• ベッドから出て、ラップトップを開き、10分以内に実行する。
• または：専門家が戻ってくるのを待ち（自動的に戻ってくるかもしれない）、午前中にやることを保証する。

この場合、それほど時間節約にはならないようだ。技術的な調査に費やす時間を節約できると思っていたことが、長い目で見れば、かえって時間を費やすことになる。専門家を雇うことは、長期的な解決策にはならないはずだ。

ヒント：Shopifyの専門家にカスタマイズやオンラインストアの作成を依頼することを検討している場合は、以下をチェックしてください。 Shopifyウェブ開発会社.

すべてのアプローチの組み合わせ

マーケティング、広告、資金調達に関連する業務が混沌としていて頭がクラクラすると同時に、何時間もの技術トレーニングに追われることになっても、慌てることはない。一見完璧な答えがある：前述のアプローチを組み合わせることで、時間を節約し、コーディングをほとんど必要とせず、それでいてページのカスタマイズのコントロールを保証します。

その通り、ページビルダーのアプリだ！

Shopifyでアプリを使ってカスタム商品ページを作成するには？

ページビルダーアプリは、Shopifyの商品ページ（およびその他のページ）を超少ないコーディングで独自にカスタマイズする方法だ。Shopifyのアプリストアには、「ページビルダー」というキーワードで検索できるページビルダーアプリが12個以上ある。

一般的に、ほとんどのShopifyページビルダーはドラッグアンドドロップエディターの形をしています。あなたが望む場所にセクションをドラッグ＆ドロップし、そのパラメータ、動作、スタイリングを手の届く範囲で柔軟に編集することができます。

Shopifyの魅力的な商品ページテンプレートがゼロから簡単に作成できる様子をご覧ください。

そのためには ページフライをお勧めします。

PageFlyは直感的に使えるShopifyページビルダーで、初心者でも簡単に使えるように設計されています。

ShopifyでPageFlyを使ってカスタム商品ページを作成する方法をビデオでご覧ください：

テーマからShopifyの製品ページのテンプレートの例

Shopifyの商品ページがどのように見えるかは、使用するテーマに大きく依存します。このように、もしあなたがShopifyの商品ページに最小限のカスタマイズを行いたいのであれば、まず最初にすべきことは、あなたのブランドデザインと相性の良いテーマからShopifyの商品ページテンプレートを細心の注意を払って選ぶことです。

ここでは、Shopifyで人気のあるテーマから、Shopifyの商品ページテンプレートの例を紹介します。

ブルム

テーマスタイル：セリア

価格：170ドル

Celia（Blum）のShopify商品ページテンプレートは、クリーンで、美的で、モダンな外観を提供します。商品ページに風通しの良さを求めるブランドに最適です。

シャイン

テーマのスタイル 洗練された

価格： 210ドル

シャインのテーマの洗練されたスタイルは、控えめな視覚的な魅力を探している人のための完璧なそのShopifyの製品ページで光の雰囲気を作成します。

エレクトロ

テーマスタイル：オーディオ

価格： 170ドル

エレクトロテーマのオーディオのテーマスタイルは、製品画像を高める洗練されたモダンなShopifyの製品ページテンプレートを備えています。

カスケード

テーマのスタイル クラシック

価格： 350ドル

ストーリーを重視したデザインにより、ストーリーテリングを通して商品を販売することができます。また、個々の商品を強調する石組みスタイルのグリッドで商品を紹介することもできます。

パイプライン

テーマのスタイル ライト

価格： 360ドル

ミニマルなスタイルをお探しなら、Pipelineがぴったり。パララックス効果により、スクロールダウン中に奥行きのあるアニメーション効果が生まれます。また、Pipelineでは、コレクションページでブランド、タイプ、色、サイズで商品を絞り込むことができます。

インパルス

テーマのスタイル モダン

価格： 380ドル

カスタムプロモーション、アニメーション、コレクションサイドバーフィルタ、コレクション内のサブリストなど、ブランドを強化するミニマルかつモダンなデザインに商品を配置しましょう。

エキスパンス

テーマのスタイル クラシック

価格： 380ドル

ExpanseはShopifyの商品ページをシンプルにし、ソリッドカラーの選択と商品画像ブロックの強化で見事に機能します。

テイクアウト

テーマのスタイル キャラメル

価格： 380ドル

グルメデザートを見つめているような - 適切な名前、テイクアウトのテーマのキャラメルのテーマスタイルは、視覚的に魅力的です。このように、このShopifyの商品ページテンプレートは、食品事業に最適です。

ガレリア

テーマのスタイル エンパイア

価格： 280ドル

ガレリアのテーマのエンパイアスタイルは、適切な色、形、比率で、Shopifyの製品ページのテンプレートは素晴らしい見える可能性があることを示している - 特殊効果は必要ありません。

ユバ

テーマのスタイル ウーフィー

価格：280ドル

ペットビジネスのためにShopifyの商品ページテンプレートを選ぶなら、YuvaのWoofyが最適なデザインかもしれません。商品をよりよく見せるために大きな画像ブロックがあり、画像からスポットライトを奪わないように要素が適切にブレンドされています。

PageFlyでShopifyのカスタム商品ページを作成する

テーマから適切なShopify商品ページテンプレートを選択することは、まだテーマにコミットしていない人、または別のテーマに切り替えようとしている人にのみ有効です。

しかし、もしあなたが自分のテーマに満足しており、ただ商品ページにスパイスを加えたいだけだとしたらどうだろう？

さて、これが解決策だ。

PageFlyからShopifyカスタム商品ページを選択できます。

そして、これらの商品ページテンプレートはすべてフルカスタマイズ可能です。だから、あなたのストアに追加した後でも、それらを微調整することができます。

以下のShopifyカスタム商品ページテンプレートをご覧ください。

デジスナップ

テコネ

モグモグ

バレンタイン

カローナ

ホエー

ボーズ

ハンドメイド製品

製品ページ

ジム製品

結論

Shopifyの商品ページをカスタマイズすることは、目標売上を達成する上で非常に重要です。なぜなら、商品ページは顧客が商品を購入するかどうかを決定する前に立ち寄る場所だからです。

そのため、Shopifyの商品ページには、商品に関する正しい情報を掲載する必要があります。しかし、同様に重要なのは、ターゲットとするユーザーにとって視覚的に魅力的であることです。

これらを実現するには、Shopifyの商品ページをブランディングに合わせて編集する必要がある。

そして、学んだように、商品ページのテンプレートとしてテーマが提供するものにこだわるか、PageFlyのようなサードパーティのアプリを使ってShopifyのカスタム商品ページを作成することができます。

どのオプションを選ぶにせよ、顧客の好みに合うように商品ページをデザインすることをお忘れなく。