Printifyでカタログを拡大しましょう!Shopifyに接続し、1300以上の製品にアクセスし、利益を得始めましょう。 無料サインアップ

クレジットカード不要でShopifyのトライアルまたはPageFlyをお試しいただけます。

Shopifyのトライアルを開始する PageFlyを無料でお試しください。PageFlyを無料でお試しください。

目次

Shopifyの商品にShopifyのバリアントを追加する方法

当社の事業は、アフィリエイトから得られるコミッションによって支えられています。 詳細.

Shopifyのマーチャントは、Shopifyのバリアントで商品を多様化することができる。

バリアントは、サイズ、色、素材、スペックなどの点で互いに異なる製品バリエーションを提供する。

服飾メーカーが、カタログに掲載されたユニークなデザインごとに、XSからXXLまで異なるサイズを販売するのが良い例だろう。携帯電話メーカーは、スマートフォンモデルの64GB、128GB、256GBのストレージバージョンを販売することがあります。これらのオプションはバリアントと呼ばれる。

さまざまなバリエーションがあることで、買い物客は自分が手にする商品をよりコントロールしやすくなり、最適な満足を得ることができる。

製品やサービスの性質によっては、これらのバリエーションがオプションよりも必要だと感じることもあるでしょう。

一般的な製品バリエーション・オプション

最も一般的な製品バリエーションの種類には、サイズ、カラー、スペックなどがあります。

サイズ

ジムシャーク製品ページ サイズバリエーション

ソースジムシャーク

異なるサイズを在庫している場合、各サイズのバリエーションを各商品の対応するページに適切に表示する必要があります。

カラー

ブレンドジェット製品ページ カラーバリエーション

ソースブレンドジェット

異なる色の製品を個別に表示したり、単一の製品のバリエーションとして色を表示したりすることができます。そうすることで、カタログのリストが減り、品揃えがより整理され、ナビゲートしやすくなります。

仕様

コンディション・バリエーションを含むプラグテック製品ページ

ソースプラグ・テック

テック企業は、顧客が希望するモデルのスペックを選択・設定できるようにしており、幅広いニーズと予算に効果的に対応している。

プラグ・テックは、製品バリエーションを使うことで、顧客が購入するノートパソコンの状態を選べるようにしている。

無限の製品の可能性を考えれば、バリアントはほとんど何でもあり得る。サイズ、色、スペックだけではない。チップの味であったり、サンドペーパーの粒度であったり、ジュエリーに使われる金属であったり。

Shopifyでバリアントを追加する方法

ストアにバリアントを追加する方法は様々です。このガイドでは最も基本的で簡単な方法について説明します。

ほとんどのオンライン・ビジネスでは、この方法で十分だろう。

ステップ #1: Shopifyの商品を修正する

Shopifyの管理画面より、「商品 」に移動し、以下の項目で商品を整理することができます。 Shopify商品タイプ.

バリアントを追加したいShopify製品をクリックします。

または、まだShopifyのシステムで商品を作成していない場合は、商品を追加をクリックし、必要な詳細を記入してください。

ステップ #2: Shopifyのバリアントとオプションを追加する

製品の詳細で、バリアントセクションまでスクロールダウンします。

Shopify商品 バリアントセクションの追加

まだバリアントを追加していない場合は、このセクションに「+ サイズや色などのオプションを追加」と書かれたボタンが表示されます。それをクリックしてください。

オプション名(例:色、サイズ、材質)とオプション値(例:黒、緑、黄)を記入する。

完了したら、さらにバリエーションを追加したい場合は、+ Add another optionをクリックします。Shopifyマーチャントのオプションは最大3つまでです。これがShopifyのバリアント制限です。

Shopify商品のバリアントオプションとバリアント値

重要な注意:これらのバリアントの位置は重要です!特に複数のバリアントを持っている場合は。

色など、より目立つバリエーションを一番上に置きたいだろう。次にサイズ。

バリアントオプションを最も目立つ特徴から最も目立たない特徴へと整理する。(例:カラー - サイズ - カット)。

これにより、ショッピング体験がより整理され、より直感的な商品管理が可能になる。

ステップ #3: Shopify バリアント属性を編集する

必要なオプションとバリアントを追加したら、それぞれの値と属性を編集することができます。

バリアントごとに編集するものには、以下のようなものがあります:

まずは画像を追加することから始めたい。

Shopifyの商品バリエーション 画像アイコンを追加する

青い画像追加アイコンをクリックします。これで編集中のバリアントに画像を追加できます。

例えば、'Brown'バリアントの場合、洋服の茶色のオプションの画像を用意したいでしょう。

バリアントとその特集画像の追加が終わったら、保存を押すのを忘れないでください。これで追加したバリアントが確定し、Shopifyの商品管理に追加されます。

Shopifyの製品バリエーション ブラックレザージャケットのバリエーション

バリアントをさらに編集するには、編集したいバリアントのラベルをクリックします。

複数のバリアントオプションがある場合は、ドロップダウンが表示されます。

正確なバリアント(例:ブラック/XL、イエロー/S、ブルー/M)をクリックすると、それぞれのバリアントの価格、SKU、在庫場所を変更し、必要に応じてそれぞれにユニークな画像を追加することができます。

プロのヒント:バリアントは一括で編集できます。

Shopify レザージャケットのすべてのブラウン・バリエーションを選ぶ

例えば、すべての茶色のバリアントを$20ではなく$22にしたいとします。そのためには、Brown/XS、Brown/S、Brown/Mなどを個別に選択して編集する必要はありません。代わりに、傘のバリアントのチェックボックスをクリックし、「一括編集」をクリックするだけです。

Shopifyバリアント一括編集スプレッドシート

ここでは、スプレッドシートのようにバリアント値を編集することができます。

完了したら保存をクリックする。

この時点で、あなたはすでにすべてのバリアントを追加・編集しているはずです。保存する前にもう一度確認して、対応する詳細がすべて正しいことを確認してください。

素晴らしい!これでShopifyに商品バリアントが追加されました。バリアントを追加したいすべてのShopify商品に対してこの操作を行います。

スマート・サブスクリプションで収益を拡大
柔軟なプランとスマートな加入者管理ツールで、継続的な収益を構築。

Shopifyのバリアントを表示する方法

Shopifyのシステムに商品バリエーションを追加したら、Shopifyのウェブサイトに表示する必要があります。

商品ページのデフォルトのバリアント表示 Shopify

デフォルトではこのようになっているはずだ。

しかし、この標準的でデフォルトのルックにスパイスを加える方法はある。

各バリエーションにユニークな写真を追加

Shopifyの商品バリエーションに画像が追加されました

前述したように、マーチャントはShopifyのシステムに追加したバリアントごとに写真を追加することができる。

しかし、買い手の信頼を高め、変種販売を推し進めたいのであれば、これらの写真は必須である。

ただ "Red "のバリエーションを並べただけで、バイヤーが現在スクリーンに映っている黒いシャツの赤いバージョンを正しくイメージしてくれると期待することはできない。

また、人によって「赤」のイメージは異なる。鮮やかなマルーンを思い浮かべる人もいれば、濃いピンクを思い浮かべる人もいるだろう。しかし、実際のアイテムが違う色合いの赤だったらどうだろう?

写真を追加することで、混乱をなくし、買い手の期待を高めることができる。

また、店舗への返品や返金の要求が減るかもしれない。

ただし、Shopifyの管理画面では、1つのバリアントにつき1枚の写真しか追加できません。そのため、この写真はできるだけ実際の商品と同じようにしてください。

カラーバリアントスワッチを使う

カラーバリアントスワッチなど、バリアント中心の機能があると便利です。

ジーンズ製品ページ(色見本付き

これにより、商品ページをより魅力的で高級感のあるものにすることができる。

カタログやShopifyコレクションにバリアントスワッチを表示することもできます。

カタログページの色見本 - Electro Theme

そうすることで、顧客は各商品ページを訪問する必要がなく、一目でどのようなバリエーションがあるかを知ることができる。

Shopifyサイトにカラーバリアントスワッチを適用する2つの主な方法は、ShopifyテーマとShopifyアプリを使用することです。また テーマのコードを編集するを編集することもできます。

バリアント機能を備えたShopifyテーマを使用する

適切なShopifyのテーマを選択することで、あなたのサイトをよりプレミアムで権威のあるものにする様々な機能をあなたのストアに装備することができます。

プレステージは最も人気のあるShopifyのテーマの一つだが、エレクトロ、シャイン、ユーラスなどのテーマは、より手頃な価格でありながら、機能が満載されている。

このガイドではエレクトロを使用する。

エレクトロテーマShopifyテーマ店舗リスト

Electroのデフォルト設定は、カラーバリアントオプションを認識し、それに応じて色見本として表示します。そのため、インストール後に何かを設定する必要はありません。

エレクトロ・テーマの商品ページ(色見本付き

Electroを使用すると、バリアントを持つすべての製品は、製品ページとカタログページの製品カードの下にバリアントの見本が表示されます。

スウォッチ上にバリアントの特集画像を表示することもできます。

テーマ設定ボタン Shopify

そのためには、テーマ設定をクリックします。これは左側の歯車のアイコンとして表示されます。

次に、製品情報ドロップダウンを選択します。

Shopifyテーマ設定 - 商品情報ドロップダウン - バリアントオプションフィールド

バリアントオプションボックスに、スウォッチとして表示したいバリアントオプション(色、サイズなど)を入力します。ここには、'Size' のようなものではなく、'Color' か 'Style' を入れることを強くお勧めします。

次にVariant Imageを選択します。

エレクトロ・テーマの商品ページと画像スウォッチ

スウォッチにはソリッドカラーの代わりに画像が含まれているはずです。

Electroのバリアントスウォッチを最大化するには、すべてのバリアントに対応するフィーチャー画像があることを確認してください。このオプションはShopify の管理画面 - 商品 で設定できます。

Electroは有料テーマです。Dawnのような無料テーマにこだわりたいが、色見本や他のバリアント中心の機能が欲しい場合は、Shopifyのアプリに助けを求めることができます。

スマート・サブスクリプションで収益を拡大
柔軟なプランとスマートな加入者管理ツールで、継続的な収益を構築。

Shopifyアプリを使う

Shopifyストアには、商品ページに色見本を追加できる様々なアプリがあります。Shopifyアプリストアで「色見本」を検索すると、たくさんのオプションが表示されます。

glo色見本アプリShopifyアプリストアリスティング

このガイドでは、「gloカラースウォッチ」アプリを使ってデモを行います。

まず、Shopify App Storeからglo Color Swatchをインストールする。

App Embedのドロップダウンから、カラーバリエーションを追加したいテーマを選択します。次に「テーマエディターに移動」をクリックします。

GLO色見本アプリの埋め込みが完了

Shopifyのテーマエディターに入ったら、GLO Color Swatchの埋め込みにチェックが入ります。ですから、プレビューされた商品にバリアントがあることを確認してください。そうでないと、変化が見えません。

テーマエディターを離れずに、新しいタブを開き、GLO Color Swatchアプリを開く。

GLOカラースウォッチアプリ管理画面の設定ボタン

編集したいバリアントオプションに対応する十字レンチと鉛筆のアイコンをクリックします。

色 1 列からボックスを選択し、対応するバリアントに属性を与えたい色を選びます。

GLOカラースウォッチアプリ カラー1塗りつぶし

スウォッチに深みとアクセントを与えるために、カラー2を有効にして補助色を選択することができます。

完了したら、保存をクリックし、Shopifyテーマエディターで変更をプレビューしてください。

アプリや料金プランによって利用できる機能が異なることに注意。

[ここにPageFlyのビデオを埋め込むことができます。]

例えばPageFlyでは、直感的なドラッグ&ドロップビルダーでカスタムページを作成する際に、色見本を追加することができる。

ページビルダーはまた、マーチャントが1つの商品ページで異なるバリアントセレクタタイプ(ドロップダウン、イメージスウォッチ、ラジオボタンなど)を持つことができます。選択フォーマットに関する詳細はこのガイドで後述します。

だから、いろいろなアプリを使って選択肢を探そう。

カタログページにバリアントスワッチを追加する

カタログページの色見本 - Electro Theme

カタログページ、コレクションページ、特集製品セクション、特集コレクションセクションに見本を掲載することで、サイト訪問者は、製品をクリックして製品ページにアクセスする前でも、特定の製品にさまざまな色やスタイルがあることを知ることができます。

Electroやその他の色見本をサポートするテーマを使用すると、バリアントを持つShopify商品は自動的にカードの下に色見本が表示されます。

gloのシルバープランでは、カタログページとコレクションページに見本を表示することができます。カタログページの見本は、商品ページの見本とは別に編集することができます。

商品ページのスウォッチを編集するには、GLO Color Swatchアプリを開く。

glo色見本アプリ 管理画面 - 外観

外観をクリックする。

スウォッチを選択する

GLOカラースウォッチアプリ 管理画面 - 外観 - スウォッチオプション - コレクションページ内タブ

On collection pageタブをクリックし、希望の色見本スタイルになるまで設定をいじってください。

完了したら、Saveを押す。

すべてがスムーズにいけば、カタログページのスウォッチはご希望のスタイルで更新されるはずです。そうでない場合は、テーマやアプリを更新するか、アプリのサポートチームに連絡する必要があるかもしれません。

他のバリアント選択形式を含める

バリアントの選択形式に関しては、複数の選択肢があります。以下のようなものがあります:

  • ラジオボックス
  • 複数選択
  • ドロップダウン

ドロップダウン・バリアント・セレクターを使用したElectroテーマ

ドロップダウンは、注文からバリアントデータを収集する追加の方法となります。これはすべての商品ページでラジオボックスを使用する単調さを解消することができます。また、ラジオボタンに対して長所と短所があります。

追加のバリアント選択形式を追加する方法

Shopifyのテーマやアプリを使って、さまざまなバリアント選択オプションを追加することができます。

このガイドではエレクトロを使用する。

Shopifyテーマエディター - トップページ - 商品ナビゲーション

Shopify Theme Editorで、ページテンプレートのドロップダウンをクリックします。ホームページ」と表示されています。

商品」をクリックし、テンプレートを選択します。テンプレートがあるShopify製品で使用されているテンプレートを選択します。

Electro Theme - 商品ページテンプレート - 商品詳細セクション - バリアントセレクタブロック

商品詳細セクションの下にある、バリアントセレクタブロックをクリックします。

ボタンまたはドロップダウンのセレクタタイプを選択します。

保存」をクリックする。

これにより、非スウォッチ製品オプションがドロップダウンセレクタタイプに変わります。

PageFlyを使用して製品バリアントのセレクタタイプを設定する

PageFly バリアントセレクタの表示タイプ

PageFlyを使用すると、同じ商品ページに異なるバリアントセレクタ形式を配置することができます。そのため、PageFlyを使用することで、商品ページに色見本、画像見本、ラジオボタン、ドロップダウンなどのセレクタタイプを配置することができます。

  • PageFlyのExtra Functionsセクションに移動します。
  • オプション・スウォッチの隣にある「管理」をクリックする。
  • バリアントオプションを選択します。
  • 次に表示タイプのドロップダウンをクリックして、希望のセレクタタイプを選択します。これをバリアントオプションごとに行います。
  • Saveを押して変更を適用する。

これでセレクタの書式が変更され、PageFlyのカスタムページに反映されます。

しかし、まだPageFlyのカスタム商品ページを作成していない場合は、PageFlyアプリのページセクションから作成することができます。

ドロップダウンは、特定のオプションタイプの下に多くのオプションを表示するのに便利なツールです。

ラジオボタンやドロップダウンメニューを使用するタイミングを知ることは、あなたのストアからすべての製品のバリエーションを強調するのに役立ちます。

結論

色違いなどのバリエーションを導入することで、個々の商品をより魅力的なものにすることができる。顧客にはそれぞれ特有のニーズや嗜好があるため、こうした選択肢を用意することで、より顧客本位のサービスを提供することができる。

さらに、様々な商品バリエーションに異なる価格を設定することで、価格心理を効果的に活用することができます。バリアントがある商品は、バリアントがない同じ商品と比べて、閲覧時間も長く蓄積されます。

しかし、そもそもバリアントを在庫していなければ、どの商品にもバリアントを追加することはできません。ですから、提供する商品を拡大し、カタログの多様化を今すぐ検討してください。

今すぐ探す