一份适配主题的图片准备指南
Shopify 产品图片尺寸与宽高比
让每件产品在 Shopify 商品页、集合卡片、放大视图和移动端都清晰一致，而不是只追求一个所谓“完美”的像素数值。
观察同一件产品在正方形、竖版和宽幅画面中的表现，再判断每个店铺位置必须保留哪些轮廓、标签、功能细节和留白。
建立可复用的母版与衍生文件流程，统一处理安全裁切、产品比例、清晰度和目录节奏，让下一个 SKU 更容易准备，同时避免所有产品看起来千篇一律。
01 · 当前要求
直接看 Shopify 当前图片尺寸与限制
Shopify 支持较大的商品图片，但真正稳定的店铺效果，还要把下面的上传限制、一致的宽高比和适合当前主题的裁切方式结合起来。
| 字段 | 当前答案 | 怎么用 |
|---|---|---|
| 建议的产品图片尺寸 | 方形商品图通常以 2048 × 2048 像素显示效果最佳 | 可把它作为方形图片的稳妥起点，再检查主题是否会对集合页、商品页和移动端采用不同裁切。 |
| 上传限制 | 最高 5000 × 5000 像素或 2500 万像素；文件必须小于 20 MB | 文件必须同时满足像素与文件大小限制；不要把商品媒体限制与主题装饰图片的上传规则混用。 |
| 支持的格式 | PNG、JPEG、PSD、TIFF、BMP、GIF、SVG、HEIC 和 WebP | Shopify 对商品图优先推荐 PNG，其次是 JPEG。照片可优先考虑 JPEG；需要透明背景或清晰图形边缘时可使用 PNG。 |
| 宽高比 | 根据主题做出决策 | 在有助于商品比较时采用一致的目录节奏，并在真实位置测试理由充分的例外。 |
| 渲染后的裁切与产品比例 | 由店铺主题和图片所在位置决定 | 预览商品页、集合页、放大视图和移动端；需要整齐的目录节奏时，主图尽量使用一致的宽高比。 |
Shopify 会自动为不同店铺位置生成多种图片尺寸。源文件限制是明确的，但最终可见裁切与商品比例仍取决于主题。
02 · 测试真实主题
用同一组代表性商品测试真实位置
在桌面端和移动端的商品详情页、放大视图、集合页和缩略图中，始终使用同一产品和同一组原图，才能看清主题本身带来的差异。
记录图片位置、屏幕宽度、实际显示尺寸、裁切方式、产品比例和测试日期。始终比较同一组原图，避免更换产品或构图后掩盖裁切问题。
检查每个位置必须保留的信息。商品详情页首图可能需要清晰的产品和有效留白；集合页卡片需要可比较的产品比例；缩略图则必须在很小的观看尺寸下仍可识别。
切换画幅，检查主体与安全区域
中央安全区切换正方形、竖版和宽幅画面，检查杯口、标志、完整杯身和杯底是否始终留在安全区域内。
03 · 选择宽高比和产品比例
建立一致的目录节奏，同时保留必要例外
一致性有助于比较产品，但规则必须保留每个 SKU 需要传达的产品细节。
标出必须保留的安全区域
在确认可用的原图上标出标签、轮廓、功能细节和必要留白，再检查它们能否在每个目标位置中完整保留。
比较产品比例
以集合页卡片尺寸并排查看几件具有代表性的商品。若某个裁切让其中一件商品显得明显过大或过小，就调整产品比例和留白。
保留被淘汰的裁切
保留失败裁切及其淘汰理由，后续处理其他商品时，就能避开同样的问题。
记录非正方形例外
当产品形状或位置行为确实需要时，允许使用另一衍生版本。记录共用宽高比移除了什么，以及该例外为何更安全。
04 · 准备文件
保留母版，再创建位置衍生文件
每个上传文件都应保留对应原图，并在真实店铺中检查；不能只看导出设置，就认定最终显示一定正确。
| 步骤 | 记录内容 | 不要想当然 |
|---|---|---|
| 保留母版 | 源文件 ID、尺寸、色彩配置、确认状态和备用版本。 | 不要认为交付裁切版本可以替代原文件。 |
| 创建衍生文件 | 位置、裁切坐标、输出尺寸和产品比例目标。 | 不要认为同一裁切能同样适用于商品详情页、集合页和缩略图。 |
| 选择格式 | 当前 Shopify 支持情况、透明度与颜色需求，以及经过测试的导出文件。 | 不要因为其他平台接受某格式，就认为 Shopify 也支持它。 |
| 上传并检查 | 提交文件、桌面端与移动端截图、视口、日期和决策。 | 不要认为导出尺寸就能预测最终渲染效果。 |
| 添加替代文本 | 对产品及有意义的可见信息做简洁描述。 | 不要认为重复关键词能改善无障碍体验或搜索表现。 |
05 · 诊断问题表现
再次调整尺寸前先找到原因
裁切、模糊或一致性问题可能来自源文件、衍生文件、主题位置或渲染预览。确认原因后，每次只改变一个变量并重新测试。
01裁切移除了重要细节
比较源文件与裁切坐标，检查位置形状并尝试新的衍生文件。如果所有安全裁切都失败，应判断为构图缺口。
02图片上传后看起来模糊
在等效比例下比较原图、提交文件和渲染结果的细节。先检查源图对焦、衍生尺寸、压缩和主题呈现，再判断问题是否来自 Shopify。
03目录中的产品比例不一致
在同一集合页位置并排比较几件代表性商品。在保留必要产品信息的同时，一并调整裁切和产品比例。
04上传或透明背景结果不符合预期
在 Shopify 帮助中心核实当前支持的格式和显示方式，再从同一张原图导出一个测试文件，确认问题能否复现。
06 · 上传前最终确认
执行 Shopify 图片预检
上传前，把原图、裁切版本、所用主题以及桌面端和移动端预览放在一起检查。
源文件与真实性
产品外形、颜色、标签、材质和随附物品准确无误，并且完整原图仍有保留。
裁切与视觉节奏
重要细节没有被裁掉，产品在画面中的大小合适；若使用不同宽高比，也有明确原因。
文件与预览
格式符合当前要求，导出文件能找到对应原图，并且已经在指定主题的桌面端和移动端预览。
选择后续路径
需要进一步处理清晰度和文件大小时，继续阅读《电商图片优化指南》；需要规划整套 Shopify 商品图时，查看 Shopify 解决方案。只有现有构图确实无法安全裁切时，才重新创建画面。
需要判断的问题
常见问题
这些回答补充正文中仍需结合场景判断的例外和检查方法。
为什么 2048 × 2048 的图片在我的主题中仍可能显示不正确？
像素尺寸不能决定主题位置、裁切方式、产品比例或观看距离。请用真实主题在桌面端和移动端预览原图，检查重要产品信息是否保留。2048 × 2048 只说明输入文件的尺寸，并不能保证最终显示正确。
Shopify 商品目录什么时候应该使用不同宽高比？
当共用宽高比能够在整个目录中保留可比较的产品比例和重要细节时，就使用它。若产品形状或特定位置使共用裁切产生误导或无法使用，则保留有记录的替代衍生版本。应在同一主题中验证该例外，而不是只凭审美决定。
为什么产品图片上传后可能看起来模糊？
原因可能是原图细节不足、导出尺寸过小、压缩过度，也可能是主题的显示方式。在相同比例下比较原图、上传文件和页面截图，每次只调整一个因素，再重新预览。
不用为每个版位重拍重裁
一张产品图，生成更适合 Shopify 店铺的视觉
用 MakeAD 为商品详情页、集合卡片、移动端和营销活动生成新构图，为买家需要看到的产品细节留出空间，不必为每个版位重新布景、拍摄和手工裁图。
生成我的 Shopify 产品图