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

# ضبط حجم زر السلة الثابت

> خصّص حجم وموضع زر السلة الثابت في Upcart باستخدام CSS.

<div id="overview">
  # نظرة عامة
</div>

يمكن تغيير حجم زر السلة الثابت في Upcart وإعادة تموضعه باستخدام CSS مخصص. يتيح لك ذلك مطابقة هوية علامتك التجارية أو تفضيلات تجربة المستخدم بشكل أفضل على أجهزة سطح المكتب والجوال.

يتوفر نهجان حسب مقدار التحكم الذي تريده.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## الخيار 1: تغيير الحجم بالتحجيم (إعداد بسيط)
</div>

تستخدم هذه الطريقة معامل تحجيم واحدًا لتصغير أو تكبير الزر والأيقونة بشكل متناسب. إنها أسهل طريقة لضبط حجم الزر بأقل قدر من الكود.

<div id="where-to-add-this">
  ## أين تضيف هذا
</div>

انتقل إلى **Upcart > Sticky Cart > Custom CSS**، والصق الكود أدناه.

```
/* Set your desired scale factor here */  
/* Recommended range: 1 (default) to 0.65 (smaller) */  
.upcart-sticky-widget {  
  transform: scale(0.55);  
}  
  
/* Scale up your quatity icon */  
/* Recommended range: 1 (default) to 1.25 (bigger) */  
.upcart-sticky-cart-quantity-icon {  
  transform: scale(calc(1.5));  
}
```

<div id="how-to-customize">
  ## كيفية التخصيص
</div>

* غيّر قيمة `transform` لتغيير حجم الزر (مثل `0.8` أو `0.6` أو `1.25` وغيرها)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## الخيار 2: تغيير الحجم بالبكسل (تحكم متقدم)
</div>

تتيح لك هذه الطريقة التحكم في أبعاد كل عنصر على حدة باستخدام قيم `px`. استخدمها عندما تريد تعديلات دقيقة لا تعتمد على التحجيم.

```
:root {  
  --widgetMainSize: 40px;  
  --widgetCartIconSize: 30px;  
  --widgetQuantityIconSize: 20px;  
}  
  
.upcart-sticky-widget {  
  height: var(--widgetMainSize) !important;  
  width: var(--widgetMainSize) !important;  
}  
  
[class*="styles_CartIcon"] {  
  left: -2px !important;  
  top: 4px !important;  
}  
  
.upcart-sticky-cart-quantity-icon {  
  height: var(--widgetQuantityIconSize) !important;  
  width: var(--widgetQuantityIconSize) !important;  
  top: -5px !important;  
  left: 25px !important;  
  z-index: 100 !important;  
}  
  
.upcart-sticky-widget svg {  
  display: block !important;  
  height: var(--widgetCartIconSize);  
}
```

<div id="how-to-customize-2">
  ## كيفية التخصيص
</div>

* عدّل المتغيرات في `:root` لزيادة أو تقليل حجم كل عنصر
* اضبط قيم `left` و`top` داخل المحددات لتوسيط الأيقونة والشارة بصريًا

<div id="need-help">
  ## هل تحتاج إلى مساعدة؟
</div>

إذا لم تكن متأكدًا من الطريقة المناسبة لك أو كنت بحاجة إلى مساعدة في كتابة CSS مخصص، نوصي بالتواصل مع أحد خبراء Shopify. لا يقدم فريق دعم Upcart المساعدة في تنفيذ CSS مباشرة.

[اطّلع على خبراء Shopify](https://www.shopify.com/partners/directory)