eコマース写真のチュートリアル
Shopifyコレクション画像のサイズと切り抜き
1 つの Shopify コレクション画像を正方形の商品グリッドと幅広のヘッダーに表示できます。テーマはスペースを制御するため、単一ピクセルの推奨事項だけではトリミングを予測できません。このガイドでは、Shopify のコレクション編集手順と架空の調理器具コレクションを組み合わせて、両方の配置を検証する方法を示します。
簡単な手順
テーマ内の表示箇所と縦横比を確認します。商品周囲に余裕のある高解像度の元画像を、パソコンとスマートフォンでプレビューしてください。共通画像では両方を満たせない場合、テーマが対応していればヘッダー用の画像を分けます。
1. 2 つの目に見える配置を特定します
テーマ エディターで、コレクション カードとコレクション ページの注目の画像またはバナーを見つけます。各画像の出所と表示比率を書き留めます。架空の North Pier コレクションでは、正方形のグリッド カードと 2:1 のデスクトップ ヒーローを想定します。これらの比率はスロット形状の例です。
2. キャンバス上に安全なオーバーラップを描画します
調理器具の画像を Ciyo キャンバスに配置します。正方形と 2:1 プレビュー フレームを同じ中心に追加します。両方の切り取りが保持される領域に鍋のハンドルと縁を置きます。ハンドルが広いレイアウトにのみ適合する場合は、幅の広い写真から始めるか、サイズを変更する前に被写体を移動します。
3. 両方の幅で実際のテーマをプレビューします
開発テーマまたは安全なプレビューを使用します。 Shopify では、コレクションの注目画像は「製品」→「コレクション」で編集できます。狭いビューポートと広いビューポートでグリッドとコレクション ページを確認します。ハンドルが切れていないか、交通量の多いエリアにヘディングが着地していないか、バナーを供給しているソースが間違っていないかを探してください。
4. 適切なアセットをエクスポートして置換する
最高品質の承認されたソースから始めてください。配信する最大のプレースメントに十分なピクセルをエクスポートし、テーマの出力を確認します。テーマが専用のヒーロー アセットをサポートしている場合は、別のコンポジションで件名とページ見出しを読みやすく保つ場所でそれを使用してください。各画像の内容を伝える場所に、説明的な代替テキストを付けます。
テーマ変更後のレビュー
テーマ名、スロット名、チェックされたクロップを短いメモとして記録します。レイアウト設定を変更したり、テーマを切り替えたりした後は、プレビューを再度表示してください。ソースを個別に保存すると、以前にトリミングされたエクスポートではなく、承認されたアセットから新しいクロップが開始されます。
一枚の画像で両方を満たせないときは分ける
一覧カードでは鍋全体、横長ヘッダーでは見出しの余白が必要なら、テーマが許す範囲で別画像を使います。先に各表示の参照元を確認してください。商品写真を変えても、コレクションのヘッダーは変わらない場合があります。
共通画像しか使えない場合は、狭い切り取りで商品が残る構図を選び、横長の表示も再確認します。承認結果とともにテーマ名とテンプレート名を記録し、テーマやセクション設定が変わったらやり直します。
よくある質問
Shopifyのコレクション画像に共通の正式サイズはありますか？
使用中のテーマの配置と画像設定を確認してください。コレクション編集の資料は画像の選び方を説明し、表示方法はテーマで決まります。
カードとヘッダーに同じ画像を使えますか？
テーマが対応し、両方の表示場所と画面幅で商品を認識できれば使えます。採用前に実際のテーマで試してください。
2 つの切り取りの縦横比を比較する
承認されたコレクション写真を含む Ciyo キャンバスを開き、アップロードする前に正方形のカードと幅の広いバナーを比較します。