Stack ヘルプガイド

モバイルアプリの商品一覧、商品詳細にカラー情報をカラーチップで表示することができます。

本ガイドでは、商品のカラーバリエーション表示の設定方法をご案内します。

設定イメージ


Appify管理画面>テーマ>商品から設定ができます。

画面をスクロールいただき、カラーバリエーション表示設定より設定を行います。

次に、各項目に下記内容を入力しチェックを入れて保存してください。

設定項目

説明

オプション名設定

Shopifyの商品に設定されているカラーを表すオプション名を入力してください。

商品一覧にカラーバリエーションを表示する

チェックすると、商品一覧の各商品にカラーバリエーションを表示することができます。

商品詳細にカラーバリエーションを表示する

チェックすると、商品詳細にカラーバリエーションを表示することができます。

カラーチップはShopifyの管理画面の表示順で表示されます。

設定項目

説明

売り切れのカラーチップを表示する

チェックをオフにすると、売り切れのバリエーションはカラーチップに表示されません。(任意)

売り切れのカラーチップをぼかす

チェックすると、売り切れのカラーチップを曇らせて表示します。(任意)

売り切れのカラーチップに斜線を表示する

チェックすると、売り切れのカラーチップに斜線を重ねて表示します。(任意)

設定イメージ(売り切れカラーチップを表示する)

設定イメージ(売り切れのカラーチップをぼかす、斜線をを表示する)

カラー情報の登録は、下記3パータンでモバイルアプリへ反映することができます。

パターンA:個別追加

パターンB:CSVで一括登録

パターンC:Shopifyのカラー情報を自動で引用する

Appifyで表示するカラー情報は、16進数のカラーコードのみとなります。

Shopifyの商品カラーに登録されている情報が16進数コードでない場合、Appifyにカラーバリエーションを表示することができませんのでご注意ください。

Appify管理画面>テーマ>商品>各種カラー設定を開くをクリックします。

追加する>任意のカラー名とカラーコードを入力し、追加するより登録が可能です。

項目名

説明

カラー名

表示したい、任意のカラー名

BLACK

カラーコード

16進数のカラーコードでカラーを設定してください。

「#」を除く6桁

000000

Appify管理画面>テーマ>商品>各種カラー設定を開くをクリックします。

次に、インポート>作成するよりCSVで一括でカラー登録が可能です。下記フォーマットでCSVを作成してインポートしてください。

サンプルはこちら

カラー情報登録.csv
51B

カラム名

説明

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に登録されているカラー情報を引用することができます。