> ## 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.

# 使用 CSS 将移动端购物车宽度设为零，直到由 Upcart 触发

> 了解如何使用 CSS 将移动端购物车宽度设为零（除非由 Upcart 触发），以获得更简洁、更流畅的购物体验。

⚠️ **重要通知**

此自定义功能仅适用于 Upcart 购物车模块的 Version 1。如果你最近将购物车升级到了 Version 2，这些自定义可能无法工作。你需要使用[迁移指南](/zh/upcart/upcart_v20_migration_guide)中为 Version 2 提供的新选择器。

如果你的自定义未按预期工作，你可以自行将购物车恢复到 Version 1：在 Cart Editor 中，使用左侧菜单顶部的 **Cart version** 下拉菜单并选择 **V1.0 (Legacy)**。只要购物车中的每个模块都是 V2，该下拉菜单就会显示。

我们目前正在为 Version 2 模块开发新的自定义模板，很快就会推出。

<div id="introduction">
  # **简介**
</div>

欢迎来到本 CSS 教程，我们将向你展示如何将移动端购物车宽度设为零，除非它由 Upcart 触发。这是一个实用的方法，可以让购物车保持隐藏，简化移动端购物体验，直到客户准备好查看购物车。

本指南面向具备基本 CSS 知识的商店店主或开发者。通过此自定义功能，你可以让购物车保持隐藏、改善页面布局、减少干扰，帮助客户专注于购物。这个小小的调整可以为商店的移动端体验带来巨大改变。

让我们开始，让你的移动端购物车更聪明地工作，而不是更费力！

<div id="accessing-custom-css-settings">
  ## **访问自定义 CSS 设置**
</div>

要开始自定义 Upcart 的 CSS，请按照以下步骤操作：

1. 在仪表板中打开 **Upcart 应用**。
2. 进入 **Cart Editor**。
3. 打开 **Settings** 并选择 **Custom CSS** 标签页（如果标签行溢出，则位于 **More settings** 中）。
4. 接着，将代码复制并粘贴到 CSS 输入区域
5. 完成后点击"保存"，并刷新你的店面页面以实时查看效果。

<div id="here-is-the-css-code-to-copy-and-paste-into-the-css-section">
  ## 以下是要复制并粘贴到 CSS 部分的 CSS 代码：
</div>

```
@media (max-width: 440px) {  
    .upcartPopupShow [class*="styles_CartPreview__right__"] {  
        width: 100%;  
        max-width: 440px;  
    }  
  
    [class*="styles_CartPreview__right__"] {  
        width: 0px;  
	max-width: 440px;  
    }  
}
```

<div id="conclusion">
  # **结论**
</div>

就是这样！你现在已经学会了如何将移动端购物车宽度设为零，直到它由 Upcart 触发，从而打造更简洁、更专注的购物体验。

<div id="support-for-customizations">
  ## 🚧 自定义支持
</div>

Upcart 的支持团队无法协助在你的购物车中实现自定义 CSS 或 HTML 解决方案。

如果你需要帮助设计或定制样式，我们建议咨询 Shopify 专家：

[查看 Shopify 专家](https://www.shopify.com/partners/directory)