Shopify要素–商品詳細

この記事には、商品詳細要素および使用方法についてご紹介します。

この要素をページに何回も使用し、異なる商品にアサインすることができます。

商品詳細要素について

商品詳細要素は、Shopifyストアからどの商品でもページに設置してコンバージョン率を高めるために設計されている要素です。商品詳細要素を用いて商品ページ以外で商品をプロモートしたり、商品ページにShopifyのデフォルト商品要素をしたくない場合に商品ページに使用したりすることができます。

以下のビデオチュートリアルをご覧ください。:

商品詳細要素のアクセス方法

ステップ1：要素カタログでShopify要素追加機能である3つ目のアイコンをクリックします。

ステップ2：ドロップダウンメニューで商品詳細要素をクリックします。

ステップ3：対象の要素をページエディタにドラッグ＆ドロップして使用します。

商品詳細要素には2つのバリエーションが含まれていますが、お客様が時間を節約できるように、新規のバリエーションを追加していきます。

サイドバーメニューだけではなく検索機能を使用することで要素も見つけられます。

備考：商品ページタイプにこの要素を使用すると、ページに2つの商品要素が作成されます。Shopifyの商品要素は、ストアの現在のテーマによってコードが異なるため、ライブサポートでお問い合わせいただくことで取得できるカスタムコードを使用して削除できます。

商品詳細要素の構成

商品詳細要素には、アピアランスを微調整して最高のコンバージョン率を取得できる多くの

パラメータが多いです。

レイアウントで要素を選択して含まれるパラメータを確認できます。

一般タブの構成

コンテンツ

• 商品ソース：商品詳細要素をページエディタにドラッグ＆ドロップすると、商品ソースに以下の2つから選択できます。
  • オート
  • カスタム商品

商品ページで商品詳細要素を使用する場合、商品ソースを選択できます。

一方、普通ページで商品詳細要素を使用する場合、商品ソースが無効になり、デフォルトとしてカスタム商品が選択されます。

• オートを選択すると、この商品ページを作成したときにアサインされた商品がページエディタに表示されます。商品詳細要素を使用する際にデフォルトとしてオートが選択されます。
• カスタム商品をクリックして対象の商品を選択できます。

カスタム商品を使用する場合、デフォルトバリアントという新しいオプションがあります。このオプションで顧客が見えるライブページで表示したいバリアントのリストにて商品のバリアントを選択できます。

属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。

スタイリングタブの構成

全体、余白、タイポグラフィ、背景、ボーダー、表示、カスタムCSSのパラメータの詳細情報については、こちらをご参照ください。

設計方法がわかれば、商品での商品詳細は遥かに重要かつ魅力的になります。設計方法に関するガイドをご参照ください。このガイドでは、プロフェッショナルなサイトを作成するためのヒントもご紹介します。