# 販売元 ### Shopify Product Vendorエレメントについて 概要：[Shopify Product Vendor](https://help.pagefly.io/manual/shopify-elements-product-vendor/)は、製品のベンダー（製品の提供者）をページに表示することで、製品の信頼性を高めるために設計されています。買い物客は、価格だけでなくベンダーに基づいて購入を決定することもあります。そのため、Product Vendorエレメントをページに追加することで、売上を増やすことができます。 ### Shopify Product Vendorエレメントへのアクセス方法 * ステップ1：PageFlyのダッシュボードから、ページリストに移動し、編集したいページを選択します。 * ステップ2：エディターの左サイドバーで、Element catalogをクリックし、Shopifyタブに切り替えます。 * ステップ3：Productドロップダウンメニューの下にある**Product Vendor**エレメントを見つけます。 * ステップ4：エレメントをページエディターにドラッグアンドドロップして使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e2d5225fda85698c80eb486e8c18488613bb5509%2FAD_4nXeWPqNZmhMI_NDCdlaIi_VQxtqat4znp9C5oU4bKOW1s84XFKI7nHicUo_oWLhd5mfAz7AJ86WiT34gGGBWS4_bW26z_X4hlFkOXR9pI9jRjwwapsvRPVMxxfhNgRjUWRevww_0cBJrn1fuDmlAuAkeyL3VQw-SAABvhanoJPODhJw.gif?alt=media) 検索ボックスで検索することでも、**Product Vendor**エレメントにアクセスできます。 {% hint style="info" %} **注**: **Product Vendor**エレメントは、商品ページ以外のページでも、商品ページでも使用できます。 {% endhint %} ### Product Vendorエレメントの設定方法 **Product Vendor**エレメントをクリックすると、右サイドバーに、GeneralタブとStylingタブを含む様々な種類のパラメータが表示されます。 #### 一般設定 \| **Product source** このエレメントをエディターページにドラッグアンドドロップすると、Product Sourceオプションには2つの選択肢があります。 - Auto：Page Assignmentを通じてこのページに割り当てられた商品が、ページエディターに表示されます。 - Custom Product：Custom Productを選択し、希望する商品を選択できます。商品ページにいる場合でProduct Vendorエレメントを使用する場合、Product Sourceオプションを選択できることに注意してください。ただし、通常ページにいる場合でこのエレメントを使用する場合、Product Sourceオプションは無効になり、Custom Productがデフォルトで選択されます。Autoを選択すると、この商品ページを作成した際に割り当てられた商品がページエディターに表示されます。Autoオプションは、Product Vendorエレメントを使用する際のデフォルトです。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f60ca2b1ee502018865fd700c67c49ce63ab00cb%2FAD_4nXcJ5CYXJuJ4ta622NjM0GGZB7tiHJkAt-tPrqaZyOcR7iOxgKUwjUIV8jLv4DsbWlzMJ9oM9fAtj2crDiPrzHvCVkA4SLHTmMfW0Vult5eIUxu1wb8GL_I2N1ScYqaZFboeikYxWpV6rATf7uVqkeyL3VQw-SAABvhanoJPODhJw.png?alt=media) | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Vendor Text** 商品のベンダー名は、Shopify AdminのVendorにデフォルトで設定されています。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b9cc17bc8c44f3197f6b67338f376de960a6dfd4%2FAD_4nXeO-VO49CxwqvfHScA37JJ6mGMdGJNPgXG_KH5rikAT44mUhHMcrT_DXPk4xAIwa-8GmslcxulDQ6WpO5jVbGf1RTT2Fi2E9fm5GhtLusVJlLI_ih89U_bJkF7xPwNmxUmvV8Cw9dDPCMJShUDYkeyL3VQw-SAABvhanoJPODhJw.png?alt=media) | 属性、可視性、アニメーションに関する詳細な情報については、[こちらの記事](https://help.pagefly.io/documentation/pagefly-elements-general-settings/)にまとめています。ぜひご確認ください！ #### スタイル設定 **レガシーエディター** \[Styling]タブでは、ブログ投稿メタエレメントの外観をブランドの美学に合わせて調整するための様々なオプションが用意されています。この機能を使用すると、タイポグラフィ、配色、サイズ、間隔など、様々な視覚要素を細かく調整できます。これらの調整により、ブログ投稿情報の洗練された目を引く外観を作成できます。 エレメントのスタイル設定に関するより包括的なガイドについては、[PageFly Element Styling](https://help.pagefly.io/manual/elements-style-settings/)ガイドを参照してください。 **Gen 2エディター** {% hint style="warning" %} **重要**: Gen 2レイアウトは、従量課金制（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能となります。 {% endhint %} ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1f8ecacdcb542d2e87409e59ffedd94973b8dd08%2FPageFly-Store-sample-%C2%B7-PageFly-Page-Builder-%C2%B7-Shopify-2024-11-14-09-09-17-3.png?alt=media) Flexセクションで**Product Vendor**エレメントを使用する場合、\[Styling]タブで以下の3つのオプションを使って幅と高さを制御できます。 * Fill Container: **Product Vendor**が親コンテナのスペース全体を埋めるように展開されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e152cc9c746df9e174659418576557466a181cc8%2FAD_4nXdhAon3uBdj3g8F9LY-mbpCbsy0AEXUU2WmYtTmUq1UbO6MC0MRq7VvCAiBN_I1AOfdxw6CArulFobxwgCrOW7hxEB8XSdbaujBnTFkSSF8tGMFikM-KZLIw9IJ0vgOcItcEmJqvt_GYgYuzbXkeyL3VQw-SAABvhanoJPODhJw.jpeg?alt=media) * Hug Content: **Product Vendor**が内部のコンテンツに合わせてサイズ変更されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c595d6e85f23658bc3a69c82d60e9ad179f01e74%2FAD_4nXd4YA41uvtKcggt3qVfGkWF0F6bZit84k_sF8upWsjMZf-sLn4g42AGbW33U_fvXWNM2qzUXsuhHJf5J1bgnihEBLLGfreP8ZpAWd-aALZ7X1KUjIkuEf1qcV7MXIdSQiISGwzjUGnrqHveHfY-HAkeyL3VQw-SAABvhanoJPODhJw.jpeg?alt=media) * Fixed Width / Fixed Height: **Product Vendor**に特定の幅や高さを設定します。このオプションの下で正確な寸法を定義できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-99fce3c2dce5c3f7294fa1babe169d90dce94cba%2FAD_4nXcUcxOVIplrIbchqjR3FzZjfHUx5FSjeOeBVYqfPq9pfjceq4RB7W65VZfNZmIzwejJQ3sD67JKw1g0JSI-FO7FVx7pVnmARDsIv9byzHanB1b60efGDKaz4BL0jDDK7Vchcum1fNhWq5TMBmAYmAkeyL3VQw-SAABvhanoJPODhJw.gif?alt=media) 「More settings」をクリックすると、**Product Vendor**の最小幅と最大幅、高さ、最大高さを設定できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c2093a001ea48ab7a4fcf3d0e3868bcffda4dbd2%2FAD_4nXfgB10Ddr2ZCrijVdQAyuhmRr9aWqo5PcSI3hzvGLZbilFWWOPFTx1lXPmxqIgvAYEdrM3PCUljbl6P5IfyFxWXq5R8MtDYXYnFMWgTMrrxhLPaqcp91zrKkcgy2aaDeR7ZXpWVDOLHi1TJYAkGkeyL3VQw-SAABvhanoJPODhJw.jpeg?alt=media) ### 一般的なケース #### Shopify設定でベンダー名を変更する Shopifyでベンダーを設定するには * ステップ1：Shopify Adminにアクセス > Productsを選択 > All Products > 設定したい製品を選択します。 * ステップ2：右側にあるProduct Organizationヘッダーに移動 > ドロップダウンメニューから別のオプションを選択（これには以前/現在使用されている他のベンダー名が含まれます）または新しいベンダー名を作成します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-47898986abc5c96ec859a3de1fc6a540bfb728d3%2FAD_4nXe08DwQEl9wRl42ULJV-35RGU4zNL4I_H6D57AGXTcle41FFfzfFfxJWKlUkq10h5IJAu7EI2xfjcAIwN1nfvEeq_V5QudOGuVgmW5dkbITImvQkfUORHECHTN0VKJslKZ3T0IwTXtCyubipqwAaQkeyL3VQw-SAABvhanoJPODhJw.png?alt=media) * ステップ3：Saveボタンをクリックします。 ### Product Vendorエレメントを使用するためのベストプラクティス * 表示されるベンダー情報が正確であり、信頼性を構築するようにします。ユーザーによるブランド検証をさらに深めるために、ベンダーのウェブサイトへのリンク（利用可能な場合）を検討してください。 * Product Vendorエレメントを過度に使用しないでください。すべての顧客がブランド認知を重視するわけではありません。ブランド関連性が価値を付加する製品に対して戦略的に使用してください。 * ウェブサイトのデザインに調和する読みやすいフォントサイズと色を使用して、ベンダー名を明確かつ簡潔に提示してください。 ### よくある質問 **Shopifyのマルチベンダーとは何ですか？** Shopify向けのMulti Vendor Marketplaceアプリは、あなたのストアを完全に機能するマーケットプレイスに変換するための優れたツールです。 **Shopifyでベンダーリストを追加またはアクセスするにはどうすればよいですか？** ダッシュボードにログインし、\[Products]をクリックして、ベンダーが必要な製品を選択します。次に、右側の\[Product organization]パネルをクリックし、\[Vendor]メニューが表示されます。ここからベンダーを選択したり、新しいベンダーを作成したりできます。 ### 追加リソース * [Shopify Product List | PageFlyで作成する方法](https://help.pagefly.io/manual/shopify-elements-product-list/) * [Shopify Product Details | PageFlyで作成する方法](https://help.pagefly.io/manual/shopify-elements-product-details/)