> ## 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 自定义移动端购物车宽度。

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

欢迎学习本教程，按你的偏好自定义移动端购物车宽度！调整移动端购物车宽度可以确保购物车在较小屏幕上易于查看和交互，从而大大提升顾客的购物体验。此自定义功能让你能够控制布局，确保它与商店的整体设计无缝契合，保持界面整洁有序。

这些步骤适合具备基础 CSS 知识的店主或开发者。通过微调移动端购物车宽度，你可以提升可用性，让顾客的结账流程更顺畅，从而有望提高转化率和顾客满意度。

让我们开始吧，让你的移动端购物车呈现并运作得恰如你所愿！

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

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

1. 在控制台中打开 **Upcart 应用**。
2. 导航到**购物车编辑器（Cart Editor）**。
3. 打开 **Settings** 并选择 **Custom CSS** 选项卡（如果选项卡一行放不下，则位于 **More settings** 之后）。

<div id="applying-custom-css">
  ## **应用自定义 CSS**
</div>

进入 Custom CSS 部分后，你可以按照以下步骤更改移动端购物车宽度。将数字从 90% 改为你想要的任意数值，数字越大，购物车在屏幕上占据的空间就越多。（注意：这适用于 Upcart 的 V1.0 和 V2.0）

1. 找到 CSS 输入区域。
2. 将以下代码复制并粘贴到 CSS 输入区域：

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

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

按照本教程操作后，你已成功自定义了移动端购物车宽度，使其更易用并与商店设计保持一致。这些小小的改动可以对顾客的购物体验产生重大影响，让他们在移动设备上更轻松地浏览和购买。

<div id="still-need-help">
  ## 仍需帮助？
</div>

如果你在自定义方面需要任何协助，我们建议咨询 Shopify 专家，了解如何向购物车抽屉添加 HTML、CSS 甚至 JavaScript。

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