> ## 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のデザイン設定をカスタマイズする方法を説明します。
デザインモジュールでは、レイアウト、ブランドカラー、ボタンのスタイルなど、カートの外観をカスタマイズできます。
# General
## テーマからフォントを継承する
この設定により、UpcartはShopifyテーマ設定で定義されたフォントを使用できます。現在のフォントの選択内容を確認するには、[Shopifyテーマエディター](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor)を開き、Typographyセクションに移動してください。
## **🚧 カートプレビュー 🚧**
テーマから継承されたフォントはUpcartのプレビューウィンドウには表示されませんが、ライブのストアフロントでは正しく表示されます。
## 取り消し線価格を表示する
この設定を有効にすると、カート内の各アイテムの横に取り消し線付きの価格（[比較価格](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)とも呼ばれます）が表示されます。これは、商品ページと同様にディスカウント価格を反映します。
## 小計行を有効にする
カートに小計行を追加します。これをオンにすると、**Colors** の下に **Subtotal text color** フィールドも表示され、小計を他のカートテキストとは別にスタイル設定できます。この設定がオフの場合、そのカラーフィールドは非表示になります。
## カートの幅
ドロワーの幅をコントロールします。ビューポートごとに個別に設定できます:
* **デスクトップ** - **Default** または **Wide**
* **モバイル** - **Full**（端から端まで）または **Nearly full**（端に小さな隙間）
***
# Colors
## 背景色
フッターとアップセルカードを除く、カートのメインの背景色を設定します。
## カートのアクセントカラー
カートフッターとアップセルアイテムカードの背景色をコントロールします。
## カートのテキスト色
すべてのカートテキストの色を定義します。ただし、ボタンのテキストと節約額テキストは別途コントロールされます。
## 節約額テキストの色
商品価格の下に表示される節約額テキストの色を設定します。
## 小計テキストの色
小計行の色を設定します。このフィールドは、**General** の **Enable subtotal line** がオンになっている場合にのみ表示されます。
## 🚧 **カートプレビュー** 🚧
プレビューエディターは、最終的なスタイルを正確に反映しない場合があります。ストアのテーマには、テキストのサイズや色に影響するカスタムCSSが含まれている可能性があります。変更は必ずライブのストアフロントで確認してください。
***
# Button Settings
Upcartは、チェックアウトボタンの個別カスタマイズを含む、高度なボタンスタイル設定オプションを提供しています。これには、CSSによる調整方法やShopifyのブランディングツールとの連携が含まれます。
## 角の丸み
ボタンの角の丸みを **0 px〜40 px** の範囲で調整します。`0` は鋭い直角の角になり、`40` はスライダーで設定できる最大の丸みです。この値は、チェックアウトボタン、アップセルボタン、ディスカウントボタン、アップグレードボタンにまとめて適用されます。
スライダーの上限は40 pxです。完全なピル型（錠剤型）のボタンにするには、[カスタムCSS](/ja/upcart/custom_css)が必要です。以下の[チェックアウトボタンの高度なCSSカスタマイズ](#advanced-css-customization-for-checkout-buttons)を参照してください。
## ボタンの色
以下を含む、カート内のすべてのボタンの背景色を設定します:
* チェックアウトボタン
* アップセルの「カートに追加」ボタン
* ディスカウントの「適用」ボタン
* サブスクリプションのアップグレードボタン。これらのボタンの色は、Cart Editorでカスタマイズできます。CSSの変更などのさらに高度なカスタマイズについては、高度なカスタマイズのセクションを参照してください。
## ボタンのテキスト色
すべてのカートボタンで使用されるテキストの色を指定します。
## ボタンテキストのホバー色
お客様がマウスをボタンの上に置いたときのボタンテキストの色をコントロールします。たとえば、緑に設定すると、ホバー時にテキストが緑色に変わります。
## 「買い物を続ける」ボタンを表示する
カートに **Continue shopping** ボタンを追加し、お客様が閉じるアイコンを使わずにドロワーを閉じて閲覧に戻れるようにします。
# チェックアウトボタンの高度なCSSカスタマイズ
大幅なデザイン変更には、カスタムCSSコードを使用してチェックアウトボタンを変更できます:
1. Cart Editorで **Settings** を開き、**Custom CSS** タブを選択します。
2. `.checkout` などの適切なCSSセレクターを利用します。CSSスニペットの例: ピル型のボタンを作成するには:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
黒い枠線を追加するには:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
`.checkout` は、実際のボタンのCSSクラスに置き換えてください。その他のスタイル設定には、ホバー効果、パディング、テキスト色、フォントなどがあります。
# ボタンカスタマイズのためのShopifyブランディングとの連携
Shopifyを使用している場合は、Shopify管理画面からチェックアウトボタンのデザインを更新できます:
1. Shopify管理画面にログインします。
2. `設定 > チェックアウト > カスタマイズ` に移動します。
3. ブランディングオプションを利用して、フォント、丸み、色を変更し、シームレスなデザインに仕上げます。
