セージ、ローズ、オークルのベスト画像を生成しました。ファイルは問題なさそうです。ところがShopifyの商品ページでローズを選ぶと、オプション名だけが変わり、犬はセージを着たままです。

次にやるべきことは、必ずしも再生成ではありません。まず、画像とバリエーションの受け渡しがどこで途切れたのかを突き止めます。

書き出し1つずつに、行き先を決める

私たちのツールTuftyで候補を作るときは、各カラーの実物写真を使ってください。コレクションの見せ方に役立つなら、適切なペットの参照画像は使い回してかまいませんが、結果は1つずつ確認します。プロンプトの色名を変えることは、実物を渡すことの代わりにはなりません。

承認したら、商品の識別子、カラー、書き出したファイル名をひとまとめに記録します。簡単な台帳で十分です。

この命名は手作業の取り決めであって、Tuftyの同期機能ではありません。目的は、正しく見えるファイルが誤った割り当てになるのを防ぐことです。

オリジナルの編集フレームワークです。図は説明用の作業手順であり、実物と実際の掲載枠でご確認ください。

「割り当て」が何をするのかを把握する

Shopifyの標準的なバリエーションの運用では、1つのバリエーションに1枚の画像を割り当てられます。それ以外の画像は商品メディアのギャラリーに置かれます。表示画像を割り当てれば、ギャラリー全体がその色だけに自動で絞り込まれる、とは考えないでください。実際のストア設定での挙動を確認してください。

この違いは、お客様がローズを選んだあとスクロールして、セージのディテール画像に行き当たるときに効いてきます。表示画像の割り当ては正しくても、ギャラリーの残りには、より明確な整理か別の実装が必要かもしれません。

ファイル名ではなく、選択した結果を確かめる

商品プレビューを開きます。オプションを順に選び、割り当てられた画像を見て、残りのギャラリーも確認します。モバイル幅でも繰り返します。誤った画像が出るなら、正確な素材に手を入れる前に、割り当てとテーマの挙動を確認してください。

正しいファイルが出ているのに色が合っていないなら、実物のカラーと照らし合わせる画像レビューに戻ります。生成とストアの割り当ては、この問題の別々の部分を解決しています。

今日の更新では、3つのバリエーションを素材から画面まで追いかけてみてください。終わりの合図は、選択と画像が一致したときです。PNGが3枚書き出せたときではありません。