モバイルアプリの商品一覧、商品詳細にカラー情報をカラーチップで表示することができます。
本ガイドでは、商品のカラーバリエーション表示の設定方法をご案内します。
設定イメージ
Appify管理画面>テーマ>商品から設定ができます。
画面をスクロールいただき、カラーバリエーション表示設定より設定を行います。
次に、各項目に下記内容を入力しチェックを入れて保存してください。
設定項目 | 説明 |
オプション名設定 | Shopifyの商品に設定されているカラーを表すオプション名を入力してください。 |
商品一覧にカラーバリエーションを表示する | チェックすると、商品一覧の各商品にカラーバリエーションを表示することができます。 |
商品詳細にカラーバリエーションを表示する | チェックすると、商品詳細にカラーバリエーションを表示することができます。 |
カラーチップはShopifyの管理画面の表示順で表示されます。
設定項目 | 説明 |
売り切れのカラーチップを表示する | チェックをオフにすると、売り切れのバリエーションはカラーチップに表示されません。(任意) |
売り切れのカラーチップをぼかす | チェックすると、売り切れのカラーチップを曇らせて表示します。(任意) |
売り切れのカラーチップに斜線を表示する | チェックすると、売り切れのカラーチップに斜線を重ねて表示します。(任意) |
設定イメージ(売り切れカラーチップを表示する)
設定イメージ(売り切れのカラーチップをぼかす、斜線をを表示する)
カラー情報の登録は、下記3パータンでモバイルアプリへ反映することができます。
パターンA:個別追加
パターンB:CSVで一括登録
パターンC:Shopifyのカラー情報を自動で引用する
Appifyで表示するカラー情報は、16進数のカラーコードのみとなります。
Shopifyの商品カラーに登録されている情報が16進数コードでない場合、Appifyにカラーバリエーションを表示することができませんのでご注意ください。
Appify管理画面>テーマ>商品>各種カラー設定を開くをクリックします。
追加する>任意のカラー名とカラーコードを入力し、追加するより登録が可能です。
項目名 | 説明 | 例 |
カラー名 | 表示したい、任意のカラー名 | BLACK |
カラーコード | 16進数のカラーコードでカラーを設定してください。 | 「#」を除く6桁 000000 |
Appify管理画面>テーマ>商品>各種カラー設定を開くをクリックします。
次に、インポート>作成するよりCSVで一括でカラー登録が可能です。下記フォーマットでCSVを作成してインポートしてください。
サンプルはこちら
カラム名 | 説明 | 例 |
colorName | Shopifyの商品に設定されているカラーを表すオプション名を入力してください。 | BLACK |
colorCode | 16進数のカラーコードでカラーを設定してください。 | #000000 |
Shopifyの商品カラーに登録されている情報が16進数コードでない場合、Appifyにカラーバリエーションを表示することができませんのでご注意ください。
Shopifyの商品に登録されているカラー情報(色・画像)を利用するには、iOS:v131.2.12, Android:v6.6.10以降へのアップデートが必要です。アップデートご希望の場合はサポートまでご連絡ください。
Shopifyのカラー情報をメタオブジェクトを利用して設定している場合、Appifyのカラーバリエーションへ自動で反映することができます。
Appify管理画面>テーマ>商品>カラーバリエーション表示設定>Shopifyに登録されているカラー情報を利用する にチェックを入れ保存してください。
Shopifyに登録されているカラーバリエーション情報に画像が登録されている場合、該当のカラーチップに画像を表示させることが可能です。
Shopify管理画面>商品管理>任意の商品を選択>カテゴリーメタフィールドの色>任意の登録カラーを選択します。
編集>画像を選択よりカラーバリエーションへ表示させたい画像をアップロードいただくとカラー情報の代わりに画像が表示できます。
Shopifyの商品に登録されているカラー情報に画像が登録されている場合は、カラーバリエーションには16進数コードベースのカラーではなく画像が優先で表示されます。
Shopify管理画面>商品管理 >任意の商品を選択>バリーエーションより任意の色を選択してください。
任意のカラーを選択>編集を選択すると、登録されているカラー情報を確認することができます。
Colorに登録されているコードが16進数の場合、モバイルアプリにもShopifyに登録されているカラー情報を引用することができます。