Shopify Collection Image Size by Theme Placement

The quick steps

Identify each placement and ratio in your theme. Pick a high-resolution source with room around its subject, preview it at desktop and mobile widths, then use a separate hero asset where your theme allows one and the shared image keeps failing.

• Shopify collection layout documentation

1. Identify the two visible placements

In the theme editor, locate the collection card and the collection page's featured image or banner. Write down where each image comes from and its displayed ratio. On the fictional North Pier collection, assume a square grid card and a 2:1 desktop hero. Those ratios are example slot shapes.

2. Draw the safe overlap on your canvas

Put the cookware image on a Ciyo canvas. Add a square and a 2:1 preview frame at the same center. Place the pan's handle and rim in the area both crops retain. If the handle only fits in the wide layout, start with a wider photograph or move the subject before resizing.

3. Preview the actual theme at both widths

Use a development theme or a safe preview. In Shopify, the collection featured image is editable under Products → Collections. Check the grid and collection page on a narrow and a wide viewport. Look for a handle cut off, a heading landing on a busy area or the wrong source feeding the banner.

4. Export and replace the right asset

Start from the highest-quality approved source. Export enough pixels for the largest placement you intend to serve and verify the theme's output. If your theme supports a dedicated hero asset, use it where a separate composition keeps the subject and page heading readable. Give each image descriptive alt text where it conveys content.

• Shopify guide to adding alt text

Review after changing the theme

Keep a short note with the theme name, slot names and checked crop. Revisit the preview after changing layout settings or switching themes. Save the source separately so a new crop starts from the approved asset rather than a previously trimmed export.

• Etsy listing photo crop

Choose a different asset when one crop cannot serve both slots

If the collection tile needs the entire pan while the wide header needs headline space, test separate assets when the theme provides separate settings. First confirm which setting controls each visible image; changing a product photo will not necessarily change the collection header.

If the theme forces both placements to share an image, choose framing that protects the product in the tighter slot and check the wider slot again. Save the theme and template names with the approved result. Repeat the check after a theme or section-setting change.