# 商品価格 ### Shopify 商品価格要素について 概要：[Shopify 商品価格](https://help.pagefly.io/manual/shopify-elements-product-price/) 要素を使用すると、ページに Shopify 製品の価格を表示できます。この要素は、顧客に製品の価格を知らせる上で不可欠であり、ストアのデザインに合わせてカスタマイズできます。 商品価格要素を使用して、あらゆる商品以外のページで商品を宣伝したり、商品ページで使用したりできます。この記事では、PageFly で商品価格要素を効果的に使用する方法を紹介します。 詳細については、こちらのビデオチュートリアルをご覧ください。 {% embed url="" %} ### 商品価格要素にアクセスする方法 * **ステップ 1**: 左側のメニューで Elements アイコンをクリックします。 * **ステップ 2**: Shopify のタブに移動します。ここには Shopify の要素が含まれています。 * **ステップ 3**: ドロップダウンメニューで Product Price 要素をクリックします。 * **ステップ 4:** 希望する Product Price 要素のバリアントをページエディターにドラッグ＆ドロップします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-eb4aa1ce448773e1b4c181affcb6399a56b388b9%2FAD_4nXcU-xj2sGKvwVJZjTQRFtIjLkKiZl9W32BaEswHyJjBKhRrx3cPeNlVLfH_F2ScYXNVLivh5-yxi2qnMXWpa1Jk-d7xssndw_mY7dWQ4NZoTo9C2X42gYoiarCM0TCXhOTsqIY23xf1zdQiDQL2NAkeyy97VYqVKLgIUHhFPehD2og.gif?alt=media) {% hint style="info" %} **注意**: Product Price 要素には、3つの一般的なバリエーションがあります。時間を節約できるように、今後もバリエーションを追加していきます。 {% endhint %} 現在のバリエーションは以下のとおりです。 * **Product Price and Product Compared at Price**: 元の価格と割引価格を同じ行に表示します。 * **Product Price**: 元の価格を表示します。 * **Product Compared at Price**: 割引価格を表示します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdKrmUfLZwjIavswdHl4XS3JOzMfX_xkpCCfR5vWgqF54kkFfsWFwEhTWEg8UGVeMNYpRVtMaHpYrmFGvCPKFY9UD4wLkEoIhV5W8URi8fZ4p5iydpvjvWp5RUxVEtgii4rjHqrnCpszTJswDzfvAkeyy97VYqVKLgIUHhFPehD2og.jpeg) ### 商品価格要素を設定する方法 商品価格要素には、可能な限り最高のコンバージョン率を得るために外観を細かく調整できる多くのパラメータが付属しています。 ページに追加した商品価格要素をクリックします。次に、General および Styling タブに移動して、利用可能なパラメータにアクセスし調整します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-4be70d08689b1517817f742c111dc049027bb6c6%2FAD_4nXcPm3GzdnnAfYSv-9o2bP6_mA_Ii13MR9E9M7l8BZO3ORsRz9z30nlm-ezmRYZNdfne6xc7lRKAhvasllCGCKng0Sj3wq-tgjE51MxwWHy7uTC4MuDsD6MZr4vIx-c98arT3v5vY4FfsCWbwFw93wkeyy97VYqVKLgIUHhFPehD2og.jpeg?alt=media) #### 一般設定 (General Settings) General タブでは、商品価格要素の基本的な機能設定を構成できます。このタブの主なパラメータを確認しましょう。 **取得元 (Collection Source)** エディターに Product price 要素をドラッグ＆ドロップすると、**Collection Source** には **Auto** と **Custom product** の2つの選択肢があります。 * Auto オプションは、商品ページを作成したときに割り当てられた製品価格が表示されることを意味します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdjr9nyCjT-NziZuSRsZw8aia9ammMXKZ_uT2-jFf30uEDCK7STqxZG2gtzd6ms1cN_-nFpvyNngK8s1Rf14olQLnM4M8HMefB2q12lMbiodLrnXezuxjPVwzGQaNSRhg1msX7iE7W8tWE_w82gbgkeyy97VYqVKLgIUHhFPehD2og.gif) * Custom product を使用すると、価格を表示する特定の製品を選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-75feca6b868dc676aa8914ba36aa356559ada205%2FAD_4nXeTB-Y28h3g1joAqjhIem5wCLml-pbM0CglRtlIGkDCzaXCvc3Y9DH2SPEYq5LtfD7ktR3ru18ENYypzt3O5QaNyq-E_nOI57ZdXCTCFZK9nbS88wGYDLp4caNPxYgqojrBdESuCkn9ksYP7V4iywkeyy97VYqVKLgIUHhFPehD2og.gif?alt=media) 特定のケースは、商品ページにいるかどうかによって異なります。 * **商品ページの場合**: [商品ページ](https://help.pagefly.io/manual/add-more-content-to-my-shopify-product-page/) の Product details 要素内で Product price 要素を使用すると、価格は Product details の価格を自動的に取得します。Auto オプションがデフォルトで製品ソースとして割り当てられます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ff24c0e075ac3c65ec4590d226e4b24759cc7cd1%2FAD_4nXc0GE6FNORuH7Wvm3gmg8QI_NfAWN47LOIl1-R4x3o43ROBQh2mOObh2O5Zk_vA5iIXfhIJcGjr6JAKPrU7hHg-gBuL5twz2jomNecCtbOqkOhY7_CgxAm85ogoZV6XVhQPd7CgRBw9B2HqozGIiAkeyy97VYqVKLgIUHhFPehD2og.jpeg?alt=media) 商品ページの Product Details 要素の外側で Product price 要素を使用する場合、2つのオプションから選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7e72bdb92847b0495b00a0dcacce84c03103ca4d%2FAD_4nXfTYal_HWrEd1gmkQO6UINhAm3GGGaF-uO65LV1wQRZ4Byc9ebKHndB7r9bSh_j_WT0H7JesU6TK1_swxy45H9fdpTcgNOHFRzRSEx56tVN0wCVsibM3MG7oPynEyI2yyjBxAH0hvUV5H4_83Zi3Qkeyy97VYqVKLgIUHhFPehD2og.jpeg?alt=media) * **商品以外のページの場合**: 商品以外のページでは、製品ソースオプションは無効になり、Custom Product がデフォルトで選択されます。表示したい特定の製品を選択できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1259424d5d3ba28678e7c67c1417550a674de887%2FAD_4nXfw6MkHqfZzdAqIyyFtLhBufk6pVrRPpvIqFmV8WW3WqMxh8h8mj9i7l0Dp2FU-GJ8kXbXGtQKnhoUeWWgRTCUqCFutw8iJ2qmka3uXw9wzsd-WLwR-X0icx8CQsqRH-TnZvOd9ELvYM86y3pJTqwkeyy97VYqVKLgIUHhFPehD2og.jpeg?alt=media) **価格表示 (Price Display)** 以下のオプションで価格の表示方法を選択できます。 * **Price and Compare Price**: 元の価格と割引価格の両方を表示します。 * **Price**: 元の価格のみを表示します。 * **Compare at Price**: 割引価格のみを表示します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-dae13a5c797dbd52cecf929e536a65598f2dae44%2FAD_4nXfZ8G5-uITGTuv_IZ8wDThiVPetg3qDyBFPo_Cmstc-AsU3AkLINvpoxsRmK2Z-OFyemDsJNHvpudU1gRgATVABnE95IBJRES5zhU3PUyfhHkeNBGatDHxm-J7DS8zt29J7T9d3XB4Xbv_gBRJ-VAkeyy97VYqVKLgIUHhFPehD2og.gif?alt=media) **価格位置 (Price Position)** 商品比較価格に対する商品価格の位置を以下の4つのオプションで選択できます。 * 左 (Left) * 右 (Right) * 下 (Below) * 下部 (Under) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6122fd5e5c5c1565725ebb1cb6eb5ed8b777e7bd%2FAD_4nXfe9LOGADnBTB9diFu_zbTPFxpuFlaFvFrp3vyxdGTYXLLb0GCodbVW4u_5U9DnpmwnjDQ2Ux-OAUgPWZISMYh0W834bm6wNPEgyvOVEsl7ztQOLjCd8ETa1rbjGPEvSAWfIOB5G0opcVlMGJRJkeyy97VYqVKLgIUHhFPehD2og.gif?alt=media) {% hint style="info" %} **注意**: Price position は、価格と比較対象価格の両方を表示することを選択した場合にのみ適用されます。 {% endhint %} ATTRIBUTES、VISIBILITY、ANIMATION パラメータに関する情報は、こちらの[記事](https://help.pagefly.io/manual/elements-general-settings/)で確認できます。 #### スタイル設定 (Styling Settings) Styling タブでは、商品価格要素の外観をカスタマイズして、ブランドのデザインと一致するようにすることができます。ここでは、フォント、色、サイズ、間隔など、さまざまな視覚的側面を調整して、商品価格を際立たせ、プロフェッショナルに見せることができます。 詳細については、[スタイル設定タブガイド](https://help.pagefly.io/manual/elements-style-settings/) を参照してください。 ### 商品価格内の比較対象価格要素を設定する方法 商品価格要素には、Price と Compare at Price の2つの要素が含まれています。これらの要素については、クリックしても General タブが無効になるため、スタイルのみを変更できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcmNWh3YU9n28CcAKhbCtgC4Ow9N7iJF0VFiXoXiI99k5uy95nT5ZxttZGmLgRYv5DXCCynZ3cIK7jg6822NfgpISICXJRNBlOEGHklPLRdpdISBhzVS7PhFQZHxruXxpDrDOF3lYTx19nal3z-DAkeyy97VYqVKLgIUHhFPehD2og.jpeg) カートに商品を追加しても、合計価格はそこに表示されず、チェックアウトページに表示されることに注意してください。 ### よくあるケース #### Auto 製品ソース選択時のエラー 商品ページで Auto 製品ソースを選択したときにエラーが発生する場合、それはページに製品を割り当てていないことを意味します。 エラーメッセージ：「**ページには少なくとも1つの製品を割り当てる必要があります。**」 この問題を解決するには、以下の手順に従ってください。 1. 左側のメニューで Page assignment をクリックします。 2. Add products ボタンをクリックし、希望する製品を選択して Select をクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-86573db0defa296f0193afd095d786baa0e3c918%2FAD_4nXcisDT6TPcg7hQul5wGEP3WW__RKjoSmd9XXylMZS3BrvgI42LY6xT7lZ6-vMFdXOfLTtHKWlIOP9fAZR-8gvVpdFdwx0nwMKFnQTtnG5lQopYky9e-xSa2Q8n3_k0roi9F_HCMthmihZjHoQ9flwkeyy97VYqVKLgIUHhFPehD2og.jpeg?alt=media) あるいは、Assign products ボタンをクリックして Page assignment manager にアクセスし、そこから製品を選択することもできます。 ページに製品を割り当てることで、Product Source の Auto オプションが有効になり、製品価格が正しく表示されるようになります。 ### よくある質問 **1. 商品価格要素で表示される通貨を変更するにはどうすればよいですか？** 商品価格要素で表示される通貨は、Shopify ストアの設定によって決定されます。通貨を変更するには、Shopify 管理画面に移動し、**設定 > 一般** の順に進み、通貨設定を更新してください。 **2. 商品価格要素を使用して、元の価格と割引価格の両方を表示できますか？** はい、General タブの Price Display 設定で「**Price and Compare Price**」オプションを選択することにより、元の価格と割引価格の両方を表示できます。 **3. 商品以外のページで商品価格が表示されないのはなぜですか？** 商品以外のページでは、Product Source はデフォルトで Custom Product に設定されています。価格を表示するには、General タブで特定の製品が選択されていることを確認してください。 ### その他のリソース * [Shopify 商品の説明 | PageFly で作成する方法](https://help.pagefly.io/manual/shopify-elements-product-description/) * [Shopify 商品リスト | PageFly で作成する方法](https://help.pagefly.io/manual/shopify-elements-product-list/)