> ## 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 のスティッキーカートボタンのサイズと位置をカスタマイズします。

<div id="overview">
  # 概要
</div>

Upcart のスティッキーカートボタンは、カスタム CSS でサイズ変更や位置の調整ができます。これにより、デスクトップとモバイルの両方で、ストアのブランディングやユーザー体験の好みにより適した見た目にできます。

必要なコントロールの度合いに応じて、2 つのアプローチがあります。

***

<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 Expert に相談することをおすすめします。Upcart のサポートは、CSS の実装を直接サポートしていません。

[Shopify Experts を見る](https://www.shopify.com/partners/directory)