Skip to main content
设计模块允许你自定义购物车的外观，包括布局、品牌颜色和按钮样式。

​
常规

​
从主题继承字体

此设置允许 Upcart 使用你 Shopify 主题设置中定义的字体。要查看当前的字体选择，请打开 Shopify 主题编辑器并导航到 Typography 部分。

​
🚧 购物车预览 🚧

从主题继承的字体不会显示在 Upcart 预览窗口中，但会在你的线上店面中正确显示。

​
显示划线价格

启用此设置可在购物车中每件商品旁显示划线价格（也称为原价对比）。这反映了折扣定价，与你的商品页面类似。 购物车商品在折扣价和节省金额旁显示划线原价

​
启用小计行

向购物车添加小计行。开启此设置还会在 Colors 下显示 Subtotal text color 字段，因此小计可以与购物车其余文本分开设置样式。关闭此设置时，该颜色字段会被隐藏。

​
购物车宽度

控制抽屉的宽度，可针对每种视口分别设置：
  • 桌面端——Default 或 Wide
  • 移动端——Full（贴边）或 Nearly full（边缘留一点间隙）

​
颜色

​
背景颜色

设置购物车的主背景颜色，不包括页脚和 upsell 卡片。

​
购物车强调色

控制购物车页脚和 upsell 商品卡片的背景颜色。 Upcart 颜色设置中购物车强调色应用于粉色 upsell 卡片

​
购物车文本颜色

定义所有购物车文本的颜色，但按钮文本和节省文本除外，它们单独控制。

​
节省文本颜色

设置商品价格下方显示的节省文本的颜色。 购物车商品的节省金额文本以洋红色突出显示

​
小计文本颜色

设置小计行的颜色。此字段仅在 General 下开启 Enable subtotal line 时才会显示。

​
🚧 购物车预览 🚧

预览编辑器可能无法精确反映最终样式。你商店的主题可能包含影响文本大小或颜色的自定义 CSS。请务必在线上店面验证更改。

​
按钮设置

Upcart 提供高级按钮样式选项，包括对 checkout 按钮的专门自定义。这包括 CSS 调整方法以及集成 Shopify 品牌化工具。

​
圆角半径

调整按钮圆角的弧度，范围为 0 px 到 40 px。0 表示尖锐的直角；40 是滑块的最大圆角。该值同时应用于 checkout 按钮、upsell 按钮、折扣按钮和升级按钮。
滑块最大为 40 px。若想实现完全的胶囊形按钮，你需要使用自定义 CSS——参见下方的 checkout 按钮的高级 CSS 自定义。
圆角半径滑块设置为 16 像素，使 checkout 按钮变圆

​
按钮颜色

设置购物车中所有按钮的背景颜色，包括：
  • Checkout 按钮
  • Upsell “Add to Cart” 按钮
  • 折扣 “Apply” 按钮
  • 订阅升级按钮 你可以通过 Cart Editor 自定义这些按钮的颜色。如需 CSS 修改等更高级的自定义，请参阅高级自定义部分。

​
按钮文本颜色

指定购物车所有按钮使用的文本颜色。

​
按钮文本悬停颜色

控制客户将鼠标悬停在按钮上时按钮文本的颜色。例如，如果设置为绿色，悬停时文本将变为绿色。

​
显示继续购物按钮

向购物车添加 Continue shopping 按钮，让客户无需使用关闭图标即可关闭抽屉并返回浏览。

​
checkout 按钮的高级 CSS 自定义

如需大幅度的设计更改，你可以使用自定义 CSS 代码修改 checkout 按钮：
  1. 在 Cart Editor 中，打开 Settings 并选择 Custom CSS 标签页。
  2. 使用相关的 CSS 选择器，例如 .checkout。示例 CSS 片段：创建胶囊形按钮：
    添加黑色边框：
    请将 .checkout 替换为你按钮的实际 CSS 类名。其他样式还包括悬停效果、内边距、文本颜色或字体。

​
集成 Shopify 品牌化进行按钮自定义

如果你在使用 Shopify，可以通过 Shopify 管理后台更新 checkout 按钮的设计：
  1. 登录你的 Shopify Admin。
  2. 前往 Settings > Checkout > Customize。
  3. 使用品牌化选项修改字体、圆角或颜色，打造统一的设计。
Upcart cart drawer 预览，包含 upsell 的 Add 按钮和 checkout 按钮