製品バリエーションとスウォッチ要素

製品バリエーションとスウォッチ要素について

以前のバージョンのエディターとは異なり、 エディター v7 と呼ばれる単一の要素を備えています (P) バリエーションとスウォッチ サイズ、色、素材など、商品のさまざまなオプションを表示して、コンバージョン率を向上させます。

GemPages V7では、 製品のバリエーションとサンプル 要素を使用すると、ドロップダウンからカラー見本、画像のサムネイルまで、すべての製品バリアント オプションを単一のカスタマイズ可能なインターフェースに表示できます。

一般的な使用例:

• 顧客にサイズ、色、素材を選択させる
• 売り切れ状況を視覚的に表示する
• バリエーション画像を使用するか、カスタムスウォッチビジュアルをアップロードします

Shopifyで商品バリエーションを追加する方法

バリアントを表示する前に 製品バリエーションとスウォッチ要素、まずShopifyの製品設定でそれらのバリアントを作成する必要があります。

Shopify で製品バリアントを追加するには、次の手順に従います。

ステップ1： Shopify管理画面から 製品.

ステップ2： バリエーションを追加する商品をクリックします。

ステップ3： スクロールして バリアント セクションをクリックして + サイズや色などのオプションを追加.

ステップ4： 入力する オプション名 (例: サイズ、色、素材)。

ステップ5： 加えます オプション値.

例：

• サイズ：S、M、L、XL
• 色: 赤、黒、緑

ステップ6： 詳しくはこちら クリックしますすると、Shopify はすべてのバリアントの組み合わせを自動的に生成します。

ステップ7： 次のような追加のバリアントの詳細を構成します。

• 価格
• SKU
• 棚卸
• バリエーション画像
• 利用状況

ステップ8： 詳しくはこちら Save.

バリアントが作成されると、自動的に GemPagesの製品バリエーションとスウォッチ要素顧客が商品ページでさまざまな商品オプションを選択できるようになります。

ページに製品バリアントとスウォッチ要素を追加するにはどうすればいいですか?

GemPages で構築したページに製品バリアントとスウォッチを追加するには、次の手順に従ってください。

ステップ1： Shopify管理画面から、 GemPages ビルダー アプリ> ページ. 対象のページをクリックしてエディターを見つけます。

ステップ2： 左側のサイドバーから検索バーを使用して、製品バリエーションを検索します。 スウォッチ要素次に、要素を製品要素内にドラッグ アンド ドロップします。

ステップ3： 要素をクリックしてその構成を開きます。

設定タブを構成する

ここから、次のような要素の設定を構成できます。

製品ソース

このテンプレートに商品を割り当てた場合、この商品は自動的に同期されます。 製品ソース.

別の製品を選択する場合は、現在の製品の上にマウスを移動して、 右矢印 製品要素の設定を見つけて、希望するものを選択できます。

クリック ペン アイコンをクリックして商品ソースを編集します。ここから、お好みの商品を手動で選択できます。

タイプ

この時点で、次の 2 つのオプションから選択できます。

• 結合： すべてのバリアントは 1 つのドロップダウン メニューに統合されます。

• 分離： バリアントは明確なカテゴリに分類されます。

ここで選択したタイプに応じて、以下のいくつかの設定が調整されます。

• あなたが設定した場合 タイプ 〜へ 組み合わせ、クリック こちら 詳細なガイダンス。
• あなたが設定した場合 タイプ 〜へ 分離され、クリック こちら 詳細な手順については、

#1. タイプ: 複合

あなたが設定した場合 タイプ 〜へ 組み合わせ、製品のバリエーション オプションの表示方法の設定を続行します。

文字スタイル

その 文字スタイル セクションでは、製品バリアントのテキストの外観を制御できるため、ブランド デザインとの一貫性を保つことができます。

• スタイル： 見出しや段落などの定義済みのテキスト スタイルを選択して、ストアの他の部分との書体の一貫性を保ちます。
• フォント： ドロップダウンからフォントを選択するか、グローバルスタイルからカスタムフォントをご利用ください。統一感のあるデザインにするために、商品ページで使用されているフォントファミリーと同じものを使用してください。
• サイズ： フォント サイズを調整して、バリエーション名と価格がレイアウト内ではっきりと目立つようにします。
• 色： カラーピッカーからテキストの色を選択するか、HEXコードを入力します（例： #3B3B3B）。読みやすくするために暗い色調を使用してください。
• 整列： レイアウトの設定に応じて、テキストを左、中央、または右に揃えます。左揃えは、バリエーションのリストに最適です。
• フォントの太さ： テキストの太さをLightからExtra Boldまで調整できます。商品バリエーションの場合は、MediumまたはBoldが理想的です。
• 行の高さ: 複数行のテキストを読みやすくするために、テキスト行間の垂直間隔を調整します (例: 150%)。
• 文字間隔： 文字間のスペースを微調整して、より狭くまたはより広く見えるようにします。
• 変換： テキストの大文字、小文字、または各単語の先頭文字を大文字に変更します。SKUやラベルスタイルのバリエーション名に最適です。
• 影： テキストに微妙な影を追加して、コントラストを高めたり、明るい背景と重なるテキストに深みを与えたりします。

オプションスタイル

その オプションスタイル セクションでは、サイズ、背景、全体的な外観など、製品バリアントセレクターの表示方法をカスタマイズできます。

• 幅： オプションボックスの表示幅を調整します。固定ピクセル値またはパーセンテージ（例： 100%) をクリックして、コンテナ全体に広げます。
• 高さ： バリアントセレクタの垂直サイズを定義します（例： 45px) を使用すると、製品ページの他の要素との視覚的なバランスが向上します。
• 背景： オプションボックスの背景色を選択します。コントラストを強めるには、単色（黒や白など）またはブランドのアクセントカラーを使用してください。
• 境界： セレクターの周囲に境界線を追加または削除します。実線、破線、点線からスタイルを選択し、レイアウトに合わせて色を調整できます。
• コーナー： オプションボックスの角を丸めるには、角の半径の値を設定します（例： 18px）。これにより、より柔らかくモダンな外観が生まれます。
• 影： ボックスの背後に影効果を適用することで、微妙な奥行き感を演出できます。アクティブ状態やホバー状態を強調するのに最適です。

ホバー効果

その ホバー効果 このセクションでは、買い物客がバリエーション オプションの上にマウスを移動したときに、そのバリエーション オプションがどのように反応するかを定義できます。

• 背景： ユーザーがバリエーションにマウスオーバーしたときに表示される背景色を変更します。ブランドのアクセントカラー（例： #EC6448) を追加して目立たせます。
• テキストの色： ホバー時のテキストの色を設定します。白などの明るい色（#FFFFFF) は、暗い背景や太字の背景に最適です。
• 境界： 境界線のスタイル（実線、破線、点線）をカスタマイズして、ホバー状態をより目立たせることができます。また、背景に合わせて境界線の色を調整することもできます。
• コーナー： ホバー時の視覚的な遷移をスムーズにするために、角の丸みを維持または増加します。
• 影： 微妙な影効果を追加することで、ホバーしたオプションに浮き彫り感やインタラクティブ性を与えます。クリック時のフィードバックを向上させるのに最適です。

#2. タイプ: 分離型

あなたが設定した場合 タイプ 〜へ 分離され、製品のバリエーション オプションの表示方法の設定を続行します。

オプションギャップ

ボックスに正確な数値を入力するか、スライダーをドラッグして、バリアント間の間隔を調整します。

オプションタイトル

下 オプションタイトル セクションで、タイトルの位置を選択します。縦書きと横書きの2つのオプションから選択できます。

• 垂直位置:

• 水平位置:

次に、読みやすさを向上させるために、バリエーションのタイトルとテキストオプションの間隔を調整します。例えば、 40ピクセルのギャップ.

次に、 文字スタイル テキストスタイル設定パネルを開きます。ここで、スタイル、フォント、テキストサイズ、テキストカラー、文字間隔を変更したり、バリエーションのタイトルに影効果を追加したりできます。

完了したら オプションタイトル (バリアントのタイトル)、次のセクションで各バリアントのオプションを設定できます。

たとえば、この Gem Palette には 3 つのバリアントがあるため、次の順序でそれぞれの表示を変更できます。 色圏, 仕上げ/質感, サイズ.

オプション: 色

このセクションでは、この要素のすべての色オプションを設定できます。

それぞれの設定オプションを詳しく見ていきましょう。

• スタイル： 以下の利用可能なオプションから選択してください。 落ちます, ボタンの選択, Shopify画像, カラー見本または 画像をアップロード.

たとえば、 スタイル = カラー見本、クリック 色を編集 を開く バリアントスタイルを設定する さらに詳細な設定を行うパネル。

各カラーオプションごとに新しい画像をアップロードする場合は、 スタイル = 画像をアップロード.

各オプションには1枚の画像のみが表示されますのでご注意ください。画像をさらに追加したい場合は、Shopifyで同じ数のバリエーションオプションを追加してください。

• 幅と高さ: カラーオプションの幅と高さを調整します。
• 価値ギャップ: 各オプション間の間隔を変更します。

• 境界： 色オプションの境界線を追加し、境界線の色、太さ、ストロークを好みに応じて変更します。

• コーナー： 角の半径を調整します。例えば、角を丸く表示したい場合は、半径を999999に設定します。
• 影： UI を強化するために、カラー オプションに影の効果を追加できます。

• ホバー： クリック 形式 の横にあるボックス ホバー 設定を開くと、ホバー効果を変更できます。
• アクティブ： アクティブなカラー オプションをカスタマイズして、他のカラー オプションと区別できるようにします。

オプション値テキスト

このセクションでは、スタイル、フォント、サイズ、フォントの太さ、行の高さ、文字間隔、変換から色のオプションのテキスト値を編集できます。

売り切れスタイル

カラーオプションが売り切れの場合のビジュアルスタイルを選択します。

• なし： 売り切れのカラーオプションには信号がありません。
• クリック不可: 売り切れのカラーオプションはクリックできません。
• 取り消し線: 売り切れのカラーオプションには取り消し線が引かれます。

例えば、 タイプ 〜へ クリックできない:

サイズ

サイズ セクションでは、バリアント セレクターまたはスウォッチ領域の幅を制御します。

幅： 固定ピクセル値（例： 500px）またはパーセンテージ（100%）を選択します。

• 幅が広いと、行全体のドロップダウンが作成されます。
• 幅が狭いほど、コンパクトなバリアント リストに最適です。

形状

その 形状 セクションでは、境界線や角など、バリアント コンテナーの外観をスタイル設定できます。

• 境界： 境界線のスタイル (線、破線、点線) を追加または調整して、バリアント セレクターのアウトラインを作成します。
• コーナー： 箱の角を丸める（例： 18px) で、モダンでスムーズなビジュアルを実現します。
• 影： 微妙な影で奥行きを加え、バリアントボックスを背景から区別します。以下から選択してください。 光, 中、 or 強い 希望するコントラストに応じて異なります。

表示オプション

その 表示オプション ページが読み込まれたときに製品のバリアントがどのように表示されるか、またはデフォルトのバリアントがどのように選択されるかを制御します。

デフォルトのバリアント: トグル あり 商品ページが最初に読み込まれたときに、事前に選択されたオプション（例：「グリーン / 大人」）を表示します。

デフォルトオプションをカスタマイズするには、製品要素の製品ソースを「手動で選択"の代わりに"割り当てられました"。 さらに詳しく.

整列

その 整列 セクションでは、バリアントオプションをコンテナ内でどのように配置するかを制御できるため、ページ全体のレイアウトを微調整できます。以下の3つのオプションから選択できます。 好みに応じて左揃え、中央揃え、または右揃えにします。

詳細タブを設定する

より高度なカスタマイズについては、 高機能 タブをクリックし、 この記事.

カラーバリエーションの問題のトラブルシューティング

GemPages でカラー見本の 1 つが正しく機能しない場合は、次の手順に従って問題をトラブルシューティングし、解決してください。

Shopifyでのバリアント設定

Shopifyで製品バリアントが適切に設定されていることを確認します。

• アクティブステータス: 製品とそのバリエーションがアクティブであり、オンライン ストアで入手可能であることを確認します。
• 販売チャネル：商品に対して「オンラインストア」の販売チャネルが選択されていることを確認します。
• バリアント設定: 各バリアントに、色やサイズなどのオプションの一意の組み合わせがあることを確認します。

製品モジュールの設定を確認する

• GemPagesエディタで、 製品モジュール.
• 下 製品を選択 セクションで、正しい製品が割り当てられていることを確認してください。

よくある質問

1. 各製品バリアントを個別の製品ページとして表示できますか?

Shopify では、デフォルトではバリエーションを個別の商品ページとして表示することはサポートされていません。

しかし、一般的な回避策は バリエーションごとに別々の製品を作成する次に、メタフィールドまたはカスタム セクションを使用して、それらを「バリアント グループ」として手動でリンクします。

2. バリアントと個別の製品の違いは何ですか?

バリエーションは同じ製品ページを共有し、スウォッチ/ドロップダウンを使用してオプション（サイズ、色など）を切り替えます。

個々の商品には、それぞれ固有の商品ページとURLが設定されます。これは、バリエーションごとに写真、価格、説明が大きく異なる場合によく使用されます。

3. バリアントのように個別の商品ページをリンクするにはどうすればよいですか?

以下を使用できます。

• 製品の説明またはカスタムブロック内の手動リンク（例：「…でも入手可能」）
• 商品推奨アプリ
• カスタム Liquid セクションまたはメタフィールド（Shopify の知識が必要）

4. バリアントの画像にマウスを移動したときにズームを有効にするにはどうすればいいですか?

ズームは 製品画像要素、バリアント スウォッチにはありません。
有効にするには：

• クリック 製品イメージ エディター内の要素。
• 注目の画像 > ホバーアクション、選択する Zoom.
• 必要に応じてズーム タイプとズーム値を調整します。

5. バリアント スウォッチにマウス カーソルを合わせてもズームがトリガーされないのはなぜですか?

バリエーション見本のみ 選択した商品画像を変更するただし、ズーム動作は制御しません。
ズーム効果を有効にするには、 製品イメージ > ホバーアクション、スウォッチ要素設定内ではありません。

6. Shopify で商品バリアントの価格を編集するにはどうすればよいですか?

バリエーションの価格をShopify管理画面で直接更新できます。 製品、バリエーションのある商品を選択し、 バリアント セクションの更新 価格 バリアントのフィールドをクリックして Save新しい価格は、GemPages で作成されたページを含む製品ページに自動的に表示されます。