> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upcart 中的商品图片被拉伸/压扁

> 本文说明如何修复在 Upcart 中显示被裁切、拉伸或压扁的商品图片。

⚠️ **重要通知**

此自定义功能仅适用于 Upcart 购物车模块的 Version 1。如果你最近将购物车升级到了 Version 2，这些自定义可能无法工作。你需要使用[迁移指南](/zh/upcart/upcart_v20_migration_guide)中为 Version 2 提供的新选择器。

如果你的自定义未按预期工作，你也可以将购物车恢复到 Version 1，而不是使用 Version 2。

我们目前正在为 Version 2 模块开发新的自定义模板，很快就会推出。

<div id="overview">
  ## 概述
</div>

如果你的商品图片在 Upcart 中看起来被拉伸、压扁或裁切，这通常是由**主题样式冲突**引起的。某些 Shopify 主题会应用全局图片样式，影响商品图片在 Upcart 中的显示方式。

你可以直接在 Upcart 的编辑器设置中添加一小段 CSS 自定义代码来修复此问题。

***

<div id="how-to-fix-it">
  ## 修复方法
</div>

按照以下步骤应用 CSS 自定义代码，保持商品图片的比例。

<div id="accessing-custom-css-settings">
  ## 访问自定义 CSS 设置
</div>

1. 从 Shopify 仪表板打开 **Upcart 应用**。
2. 进入 **Cart Editor**。
3. 打开 **Settings** 并选择 **Custom CSS** 标签页。Settings 是一行标签页——如果没有看到 Custom CSS，它位于 **More settings** 中。

***

<div id="adding-the-css">
  ## 添加 CSS
</div>

1. 将以下 CSS 代码片段复制并粘贴到 **Custom CSS** 字段中：

```
#CartPopup img {  
  object-fit: contain !important;  
}  
  
.upcart-upsell-item-image-wrapper a {  
  height: 100% !important;  
  display: flex !important;  
}  
  
.upcart-upsell-item-image-wrapper {  
  background-color: transparent !important;  
}  
  
@media (max-width: 600px) {  
  [class*="styles_ProductRow__imageWrapper__"] {  
    height: auto !important;  
  }  
}
```

1. 保存你的更改。
2. 刷新你的店面并打开 Upcart，确认图片现在显示正确。

***

<div id="why-this-happens">
  ## 出现原因
</div>

某些 Shopify 主题会应用全局 CSS 规则，以影响第三方应用（如 Upcart）中图片显示的方式调整或裁剪图片。这些规则可能会覆盖 Upcart 的默认样式并扭曲图片比例。

上面的 CSS 代码片段可确保商品图片**保持其原始宽高比**，并在桌面端和移动端设备上都能正确显示。