> ## 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 장바구니 모듈의 버전 1에서만 작동해요. 최근에 장바구니를 버전 2로 업그레이드하셨다면 이 커스터마이징이 작동하지 않을 수 있어요. [마이그레이션 가이드](/ko/upcart/upcart_v20_migration_guide)에서 제공하는 버전 2용 새 선택자를 사용하셔야 해요.

커스터마이징이 예상대로 작동하지 않는 경우, 버전 2를 사용하는 대신 장바구니를 버전 1로 되돌릴 수도 있어요.

현재 모듈 버전 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 테마는 Upcart 같은 서드파티 앱에서 이미지가 표시되는 방식에 영향을 주는 방식으로 이미지 크기를 조정하거나 자르는 전역 CSS 규칙을 적용해요. 이러한 규칙은 Upcart의 기본 스타일을 재정의하고 이미지 비율을 왜곡할 수 있어요.

위의 CSS 스니펫은 제품 이미지가 **원래 가로세로 비율을 유지**하고 데스크톱과 모바일 기기 모두에서 올바르게 표시되도록 보장해요.