アプリの商品一覧と商品詳細に、商品のカラーをカラーチップ(色の丸いアイコン)で表示できます。「ブラック」「ホワイト」など色違いの商品を、顧客にひと目で伝えたいときに活用してください。
本ガイドでは、カラーチップの設定方法をご案内いたします。
設定イメージ
Appify管理画面>テーマ>商品をクリックし、画面下部の「カラーバリエーション表示設定」まで移動します。
カラーバリエーション表示設定
各項目を設定し、保存してください。
表示方法の設定項目
設定項目 | 説明 |
|---|---|
オプション名設定 | Shopifyの商品で、カラーを表すオプション名を入力します(例:カラー)。 |
商品一覧にカラーバリエーションを表示する | チェックすると、商品一覧の各商品にカラーチップを表示します。 |
商品詳細にカラーバリエーションを表示する | チェックすると、商品詳細にカラーチップを表示します。 |
カラーチップは、Shopify管理画面のバリエーションの並び順で表示されます。
設定項目 | 説明 |
|---|---|
売り切れのカラーチップを表示する(任意) | チェックを外すと、売り切れのバリエーションはカラーチップに表示されません。 |
売り切れのカラーチップをぼかす(任意) | チェックすると、売り切れのカラーチップをぼかして表示します。 |
売り切れのカラーチップに斜線を表示する(任意) | チェックすると、売り切れのカラーチップに斜線を重ねて表示します。 |
「売り切れのカラーチップをぼかす」「売り切れのカラーチップに斜線を表示する」は、「売り切れのカラーチップを表示する」にチェックを入れたときだけ表示されます。
設定イメージ(売り切れカラーチップを表示する)
設定イメージ(売り切れのカラーチップをぼかす、斜線をを表示する)
カラー情報は、次の3パターンのいずれかで登録します。
パターンA:管理画面で1色ずつ登録する
パターンB:CSVで一括登録する
パターンC:Shopifyに登録されているカラー情報を使う
注意事項
パターンCの「Shopifyに登録されているカラー情報を利用する」にチェックを入れると、「各種カラー設定を開く」ボタンが表示されなくなり、パターンA・Bの設定は使えません。どちらか一方を選んでください。
アプリに表示できるカラー情報は、16進数のカラーコード(例:#000000)のみです。
Appify管理画面>テーマ>商品>各種カラー設定を開くをクリックします。
各種カラー設定を開く
「追加する」をクリックし、カラー名とカラーコードを入力して「追加する」をクリックします。
カラー名とカラーコードを入力する
項目名 | 説明 | ✔️入力例 |
|---|---|---|
カラー名 | Shopifyの商品オプションの値(カラー名)と同じ文字列を入力します。一致しないとカラーチップは表示されません。 | BLACK |
カラーコード | 「#」を除いた6桁の16進数のカラーコードを入力します。 | 000000 |
Appify管理画面>テーマ>商品>各種カラー設定を開く>インポート>作成するをクリックし、CSVファイルを選んでインポートします。
サンプルはこちら
CSVフォーマット
カラム名 | 説明 | ✔️入力例 |
|---|---|---|
colorName | カラー名(Shopify の商品オプションの値と同じ文字列を入力します。 (1〜50文字で入力) | BLACK |
colorCode | 「#」から始まる6桁の16進数のカラーコードを入力します。 | #000000 |
CSVの1行目(見出し行)は「colorName,colorCode」としてください。
登録できるのは最大1,000行(見出し行を除く)です。
Shopifyのカラー情報をメタオブジェクトで設定している場合、アプリのカラーチップに自動で反映できます。
Appify管理画面>テーマ>商品>カラーバリエーション表示設定>「Shopifyに登録されているカラー情報を利用する」にチェックを入れ、保存してください。
Shopifyのカラー情報に画像が登録されている場合は、カラーチップに色の代わりに画像を表示できます。
Shopify管理画面>商品管理>任意の商品>カテゴリーメタフィールドの「色」>任意のカラーを選択>編集>画像を選択から、表示したい画像をアップロードします。
Shopifyのカラー情報に画像が登録されている場合は、カラーコードの色ではなく画像が優先して表示されます。