製品ベンダー要素

この記事では、GemPages V7を使用します。V6を使用している場合は、 この記事。 

Shopify の製品ベンダーとは何ですか?

Shopifyでは、 ベンダー 商品に関連付けられたサプライヤーまたはブランドを指します。商品にベンダーを割り当てると、カタログの整理、ナビゲーションの改善、顧客が同じブランドの商品を閲覧しやすくなるため、便利です。

In GemPages 製品ベンダー要素 は、このベンダー情報を商品ページに直接表示するように設計されています。これにより、顧客が閲覧している商品に関するより詳しい情報を提供できるだけでなく、同じベンダーの商品コレクションへのリンクも提供できます。

Shopifyで商品ベンダーを追加または編集する方法

GemPages で製品ベンダー要素を使用する前に、Shopify で製品のベンダー情報が設定されていることを確認する必要があります。

ステップ 1: MFAデバイスに移動する Shopify管理者 > 製品.

ステップ2： ベンダーを追加または変更したい製品を選択してください。下にスクロールして、右側のベンダーボックスを見つけてください。

これで、製品にベンダーが割り当てられ、この情報は GemPages を使用して表示できるようになりました。

GemPagesで商品ベンダー要素を追加する方法

Shopify でベンダーを割り当てたら、GemPages の製品ベンダー要素を使用して、ストアフロントに表示できます。

ステップ1： GemPages を開き、製品ベンダーを変更または追加するページを選択すると、GemPages エディターが表示されます。

ステップ2： 'に向かいます素子「タブして検索」製品ベンダー'製品ベンダー要素を目的の場所にドラッグします。

GemPagesエディターで「商品ベンダー」要素をクリックすると、左側に設定パネルが表示されます。このパネルには2つの主要なセクションがあります。 設定 の三脚と 高機能.

設定タブを構成する

製品ソース

この要素がどの製品のベンダー情報を表示するかを決定します。デフォルトでは、製品モジュールに割り当てられた製品が使用されます。製品を切り替えるには、 製品ピッカー 製品モジュール内。

テキストスタイル

• ラベル： ベンダー名の前にプレフィックスを追加または編集します。
• スタイル： 1 つの見出しスタイル (H6 ～ HXNUMX) または XNUMX つの段落スタイルから選択して、テキスト階層を制御します。
• フォントとサイズ: フォントを選択し、ピクセル単位でテキスト サイズを調整します。
• 色： ベンダー名の色を選択します。
• 整列： テキストをコンテナー内で左揃え、中央揃え、右揃え、または両端揃えにします。
• フォントの太さ： テキストの太字の表示方法を選択します。
• 行の高さ: 読みやすくするために行間隔を調整します。
• 文字間隔： 文字間のスペースを拡大または縮小します。
• 変換： テキストの大文字と小文字を変更します (なし、大文字、小文字、または大文字)。
• 影： テキストに影を追加して奥行きを演出します。方向、色、距離、ぼかしをコントロールできます。

効果

訪問者がベンダー名の上にマウスを置いたときにベンダー名がどのように動作するかをカスタマイズします。

• テキストの色を変更します。
• マウスオーバー時にベンダー名に下線を付けるかどうかを選択します。

コレクションリンク

ベンダー名をリンクさせたい場合は、このトグルを有効にしてください。 コレクションページ 同じベンダーのすべての製品を表示するページです。これにより、ナビゲーションとユーザーエクスペリエンスが向上します。

SEO

割り当てることができます HTMLタグ ベンダーテキスト（例： 、）。見出しタグを適切に使用すると、ストアを検索エンジン向けに最適化できます。

詳細タブを設定する

より高度なカスタマイズについては、 詳細設定タブ の指示に従います。 この記事.