Stack ヘルプガイド

アプリの商品一覧と商品詳細に、商品のカラーをカラーチップ(色の丸いアイコン)で表示できます。「ブラック」「ホワイト」など色違いの商品を、顧客にひと目で伝えたいときに活用してください。

本ガイドでは、カラーチップの設定方法をご案内いたします。

設定イメージ


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
51B

CSVフォーマット

カラム名

説明

✔️入力例

colorName

カラー名(Shopify の商品オプションの値と同じ文字列を入力します。

(1〜50文字で入力)

BLACK

colorCode

「#」から始まる6桁の16進数のカラーコードを入力します。

#000000

  • CSVの1行目(見出し行)は「colorName,colorCode」としてください。

  • 登録できるのは最大1,000行(見出し行を除く)です。

Shopifyのカラー情報をメタオブジェクトで設定している場合、アプリのカラーチップに自動で反映できます。

Appify管理画面>テーマ>商品>カラーバリエーション表示設定>「Shopifyに登録されているカラー情報を利用する」にチェックを入れ、保存してください。


Shopifyのカラー情報に画像が登録されている場合は、カラーチップに色の代わりに画像を表示できます。

Shopify管理画面>商品管理>任意の商品>カテゴリーメタフィールドの「色」>任意のカラーを選択>編集>画像を選択から、表示したい画像をアップロードします。

Shopifyのカラー情報に画像が登録されている場合は、カラーコードの色ではなく画像が優先して表示されます。

Shopifyに登録されているカラー情報はどこで確認できますか?

Shopify管理画面>商品管理>任意の商品>バリエーションから任意の色を選び、「編集」をクリックすると確認できます。登録されているコードが16進数の場合、アプリにもそのカラー情報を表示できます。