競争の激しいeコマース環境において、商品ディスプレイの直感性や美しさを向上させることは、ユーザーの購買決定に直結する。blocksy 2 テーマ発表 バリエーション・スウォッチ 機能WooCommerceこのショップは、商品のバリエーションを表示する新しい方法をもたらします。カラーブロック、ボタン、画像などの豊富なビジュアルオプションにより、ユーザーは好みの商品の組み合わせを素早く選択でき、ショッピング体験が大幅に向上します。
![画像 [1] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427162750241-image.png)
バリエーション・スウォッチとは?
バリエーション・スウォッチとは、従来のドロップダウンメニューの代わりに、商品のバリエーション(色、サイズ、素材など)を小さなビジュアルアイコンやカラーブロックとしてページ上に表示する方法です。このアプローチにより、買い物客はより直感的かつ迅速に商品を選択することができます。
サポートされているスウォッチ・タイプは以下の通り:
- ボタン
- シングルまたはデュアルカラー(カラーまたはデュアルカラー)
- 写真(イメージ)
- ミックスカラー・パレット(カラー+イメージ)
blocksy バリアントカラーパレットシステムの2 WooCommerce Attributesのネイティブ機能は完全に互換性があり、設定も簡単で、追加のプラグインサポートは必要ありません。
注意: Variation Swatches モジュールは、次のモジュールに含まれます。 ブロックジー・プロ な ショップ・エクストラ エクステンション、プロフェッショナル、エージェンシーの契約が必要。
バリアントカラーパレット機能を有効にするには?
有効化プロセスは非常にシンプルだ:
- 入り込む ワードプレス バックエンドで、左メニューのblocksy→をクリックします。 エクステンション.
![画像 [2] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427163121928-image.png)
- 見つける ショップ・エクストラ 拡張モジュールで バリエーション・スウォッチ.
![画像 [3] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427163154246-image.png)
製品属性を設定する(Attributes)
モジュールを有効にした後、商品属性のスウォッチタイプを設定する必要があります:
- バックステージ・セレクション お飾り → 因果性.
- 新規または既存のプロパティを編集します。
![画像 [4] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427163600501-image.png)
- 対応するスウォッチタイプ(例:ピクチャー、カラー、ボタン)を選択します。
![画像 [5] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427163657750-image.png)
- 設定を保存した後、Propertiesの項目(Terms)にある:
- 画像スウォッチ:バリアントを表す画像をアップロードします。
- カラーブロック見本:1色か2色の組み合わせを選ぶ。
- ツールチップを設定して、アクセシビリティ補助の指示を追加できます。
![画像 [6] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427163747933-image.png)
![画像 [7] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427163955998-image.png)
![画像 [8] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427164035690-image.png)
このようにして、従来のテキスト・オプションを、鮮やかなビジュアル・セレクターに簡単にアップグレードすることができる。
個別製品の個別構成
特定の製品に特別な表示が必要な場合。blocksy 2 以下でも使用可能個別可変製品編集インターフェースのスウォッチページでスウォッチのスタイルを個別に調整することができます。商品編集ページで新しいスウォッチ設定オプションを見つけるだけで、各バリアントの表示方法をカスタマイズできます。
カスタマイザーでのスタイル最適化
フロントエンドを美しく見せるために、ブロックシー2には豊富なカスタマイズオプションが用意されている:
- 入り込む 外装状態 → カスタマイズ.
- 場所WooCommerce → 一般 → バリエーション・スウォッチ.
![画像 [9] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427164717220-image.png)
- カスタマイズ可能:
- カラープレートの形状(円形または正方形)
- スウォッチサイズ
- カラープレートの間隔
- 商品一覧ページにカラーパレットと数量制限を表示するかどうか
個々の商品ページは、デフォルトでバリアントカラーパレットを表示します。
フロントエンド・エフェクト・ショー
有効化すると、ユーザーは商品一覧ページや個々の商品詳細ページで、明確で直感的なカラーパレットセレクターを見ることができます。カラーパレットは視覚的な美しさを高めるだけでなく、購買意欲を高める効果もあります。
![画像[10] - ブロックシー2のバリアントスウォッチ機能を使ってWooCommerceショップの表示を最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427164908391-image.png)
特に、ミックスカラーパレット(カラー+イメージ)をサポートすることで、商品表示がよりリッチで詳細になり、ユーザーのショッピング体験が大幅に向上する。
![画像 [11] - blocksy 2のバリアントスウォッチ機能を使ってWooCommerceのショップディスプレイを最適化する方法](https://www.361sale.com/wp-content/uploads/2025/04/20250427165009762-image.png)
概要
レバレッジ blocksy バリアントカラーパレット機能の2。WooCommerce ショップは、よりプロフェッショナルで視覚に訴える商品表示方法を簡単に実現できます。色、画像、カスタムボタンなど、blocksy 2はユーザーエクスペリエンスとコンバージョン率を向上させるための強力なサポートを提供します。
最新記事
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/52489この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。




















![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし