> ## 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 のカスタマイズをはじめる

> HTML、CSS、JavaScript を使用して、カートドロワーにカスタム機能やスタイリングを構築する方法を学びます。

⚠️ **重要なお知らせ**

このドキュメントのカスタマイズ例は、Upcart カートモジュールの V1.0 でのみ動作します。最近カートをバージョン 2 にアップグレードした場合、これらのカスタマイズコードは動作しません。[移行ガイド](/ja/upcart/upcart_v20_migration_guide)で提供されているバージョン 2 用の新しいセレクターを使用する必要があります。

V2.0 のソリューションについては、他のカスタマイズドキュメントをご確認ください。

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

Upcart では、**カスタム HTML**、**カスタム CSS**、**JavaScript** を使用して、カートの外観と動作を自由に変更できます。これらのツールを使うと、新しい機能の追加、ブランドに合わせたカートのスタイリング、カートの動作を改善するロジックの導入が可能です。

このガイドでは、それぞれの基本を説明し、始め方を紹介します。各セクションには、変更が実際にどのように見えるかを理解するのに役立つ簡単なビジュアル例が含まれています。

***

始める前に、[Upcart のカスタマイズポリシー](/ja/upcart/upcart_customization_policy)を確認して、私たちのチームがサポートする範囲としない範囲を把握しておいてください。

<div id="add-content-with-html">
  ## HTML でコンテンツを追加する
</div>

HTML は、テキスト、バナー、ボタンなどの静的コンテンツをカートに追加するために使用します。**Custom HTML** エディタでは、複数の HTML 挿入位置（チェックアウトボタンの上、カートの下部、アイテムの間など）から選択できます。

一般的な使用例：

* カスタムメッセージの追加
* 法的な免責事項やポリシーリンクの挿入
* 配送期限や配達情報の強調表示

**例：**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="チェックアウトボタンの上にお礼のメッセージを追加する Upcart のカスタム HTML エディタ" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## JavaScript でロジックを追加する
</div>

JavaScript は、カートの動作とロジックを制御します。要素の表示/非表示、条件付きのスタイリング適用、カートの変更へのリアルタイムな応答などに使用できます。

コードを `<script>` タグで囲み、実行タイミングに応じて **Custom HTML > Scripts (Before Load)** または **Above Announcements** に配置します。

**例：[カートのアップセルを一度に 1 つに制限する](/ja/upcart/limit_the_cart_to_one_upsell_at_a_time)：**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **レガシーに関する注意：** `window.upcartOnItemRemoved`、`window.upcartOnAddUpsell`、`window.upcartOnCartLoaded` のコールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて `upcartSubscribeItemRemoved`、`upcartSubscribeUpsellsAddedToCart`、`upcartSubscribeCartLoaded` を使用してください。
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="アップセルモジュールを非表示にする JavaScript が入力された Upcart のカスタム HTML Scripts Before Load エディタ" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **開発者向けの注意：**\
Upcart は、高度なカスタマイズに利用できるすべての関数、変数、ベストプラクティスのパターンをまとめた完全な [Public API ドキュメント](https://rokt.notion.site/upcart-public-api)を提供しています。より複雑なスクリプトや連携を構築する際には、こちらの確認をおすすめします。

***

<div id="style-your-cart-with-css">
  ## CSS でカートをスタイリングする
</div>

CSS は、カート内の要素の見た目を制御します。余白、色、フォントサイズの調整や、不要な要素の非表示に使用します。**Custom CSS** は **Settings** 配下のタブの 1 つです（タブが収まりきらない場合は **More settings** の中にあります）。

一般的な使用例：

* 商品タイトルやボタンの色の変更
* フォントサイズや配置の調整
* セクション間の余白の追加

**例：V1.0 でアップセルタイトルの色を変更する：**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="変更保存の確認とともにアップセルタイトルの色をスタイリングする Upcart のカスタム CSS エディタ" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## その他のリソース
</div>

HTML、CSS、JavaScript のスキルを高めたいですか？以下の無料ツールをご覧ください：

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## カスタマイズに関するサポート
</div>

Upcart のサポートチームは、カスタムコードの実装支援は行っていません。より高度な変更については、[Shopify Expert](https://www.shopify.com/ca/partners/directory) への依頼をおすすめします。