Skip to main content
⚠️ 重要なお知らせ このカスタマイズは、Upcart のカートモジュールの Version 1 でのみ機能します。最近カートを Version 2 にアップグレードした場合、これらのカスタマイズは機能しない可能性があります。移行ガイドで提供されている Version 2 用の新しいセレクターを使用する必要があります。 カスタマイズが期待どおりに機能しない場合は、Version 2 を使用する代わりにカートを Version 1 に戻すこともできます。 現在、モジュールの Version 2 用の新しいカスタマイズテンプレートを準備しており、まもなく利用可能になります。

概要

Upcart で商品画像が引き伸ばされたり、つぶれたり、切れて見える場合、通常はテーマのスタイルの競合が原因です。一部の Shopify テーマは、Upcart 内での商品画像の表示に影響するグローバルな画像スタイルを適用しています。 この問題は、Upcart のエディター設定内に短い CSS カスタマイズを直接追加することで修正できます。

修正方法

商品画像の比率を維持する CSS カスタマイズを適用するには、次の手順に従ってください。

Custom CSS 設定へのアクセス

  1. Shopify ダッシュボードから Upcart アプリを開きます。
  2. Cart Editor に移動します。
  3. Settings を開き、Custom CSS タブを選択します。Settings はタブの列になっており、Custom CSS が見当たらない場合は More settings の中にあります。

CSS の追加

  1. 次の CSS スニペットをコピーして Custom CSS フィールドに貼り付けます:
  1. 変更を保存します。
  2. ストアフロントを更新して Upcart を開き、画像が正しく表示されることを確認します。

この問題が起こる理由

一部の Shopify テーマは、Upcart のようなサードパーティアプリでの画像の表示に影響する形で、画像をリサイズまたはトリミングするグローバルな CSS ルールを適用しています。これらのルールは Upcart のデフォルトのスタイルを上書きし、画像の比率を歪めることがあります。 上記の CSS スニペットにより、商品画像が元のアスペクト比を維持し、デスクトップとモバイルの両方のデバイスで正しく表示されるようになります。