Skip to main content
⚠️ 重要通知 此自定义功能仅适用于 Upcart 购物车模块的 Version 1。如果你最近将购物车升级到了 Version 2,这些自定义可能无法工作。你需要使用迁移指南中为 Version 2 提供的新选择器。 如果你的自定义未按预期工作,你也可以将购物车恢复到 Version 1,而不是使用 Version 2。 我们目前正在为 Version 2 模块开发新的自定义模板,很快就会推出。

概述

如果你的商品图片在 Upcart 中看起来被拉伸、压扁或裁切,这通常是由主题样式冲突引起的。某些 Shopify 主题会应用全局图片样式,影响商品图片在 Upcart 中的显示方式。 你可以直接在 Upcart 的编辑器设置中添加一小段 CSS 自定义代码来修复此问题。

修复方法

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

访问自定义 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 主题会应用全局 CSS 规则,以影响第三方应用(如 Upcart)中图片显示的方式调整或裁剪图片。这些规则可能会覆盖 Upcart 的默认样式并扭曲图片比例。 上面的 CSS 代码片段可确保商品图片保持其原始宽高比,并在桌面端和移动端设备上都能正确显示。