> ## 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 にアップグレードした場合、これらのカスタマイズは機能しない可能性があります。[移行ガイド](/ja/upcart/upcart_v20_migration_guide)で提供されている Version 2 用の新しいセレクターを使用する必要があります。

カスタマイズが期待どおりに機能しない場合は、Version 2 を使用する代わりにカートを Version 1 に戻すこともできます。

現在、モジュールの 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">
  ## Custom 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 スニペットにより、商品画像が**元のアスペクト比を維持**し、デスクトップとモバイルの両方のデバイスで正しく表示されるようになります。