# カートを確実に経由してもらうために、「支払いへ進む」ボタンを非表示にしたい

**URL:** <https://community.shopify.com/t/topic/69531>\
**Category:** 技術的なQ＆A\
**Created:** [October 2, 2021, 11:24pm UTC](https://community.shopify.com/t/topic/69531 "2021-10-02T23:24:25Z")\
**Posts on this page:** 7\
**Page:** 1

## AI-generated summary

**課題:**
ShowcaseテーマとEasypointsアプリを使用中、カートを必ず経由させるため、カート追加後のポップアップで「お支払いへ進む」ボタンを非表示にし、「カートを見る」ボタンを大きく表示したい。

**解決プロセス:**
- デベロッパーツールでは実現できたが、ファイル位置が不明
- `assets/theme.js`内で`id="added-to-cart"`を検索して該当コードを発見
- JavaScriptコードの編集方法について質問

**解決方法（Showcaseテーマ）:**
```css
#added-to-cart .button--checkout{
  display:none;
}
#added-to-cart .button{
  width:calc(100% - 10px);
}
```
このCSSで実装成功。

**追加情報（Dawnテーマ）:**
`component-cart-notification.css`の最下部に以下を追加:
```css
form#cart-notification-form {
  display: none;
}
```

**ステータス:** 解決済み。テーマによって実装方法が異なることが判明。

<div class="post-metadata">

**Author:** ![harumi](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@harumi](https://community.shopify.com/u/harumi)\
**Post date:** [October 2, 2021, 11:24pm UTC](https://community.shopify.com/t/topic/69531/1 "2021-10-02T23:24:25Z")

</div>

こんにちは。閲覧いただきありがとうございます。

現在テーマはShowcaseを使用しており、Easypointsアプリを使用している関係上、購入の際にカートを必ず経由して欲しいという狙いがあります。

そのため、カートに追加したあと出てくるポップアップ上の「お支払いへ進む」ボタンを非表示にし、「カートを見る」を大きく配置したいと考えております。

 ![スクリーンショット 2021-10-03 8.12.52.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/d/5/8/d58abdac8bb664ab1ac03ee935203b6e43487c93.jpeg)

デベロッパーツールでは、styleを書き換えての実現はできているのですが、ファイルの場所がわからずカスタマイズできずにいます。  
デベロッパーツールで表示されるクラス名で全体のcssファイルを修正しても反映されませんでした。

 ![スクリーンショット 2021-10-03 8.16.55.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/3/2386de6dd11dc5816c70a659c327d8f2a23e39ba.jpeg)

どなたか、カートのポップアップのファイル位置と、支払いへ進むボタンの消し方を教えていただけませんでしょうか。

お手数をおかけいたしますが、よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![toooru](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@toooru](https://community.shopify.com/u/toooru)\
**Post date:** [October 3, 2021, 1:17am UTC](https://community.shopify.com/t/topic/69531/2 "2021-10-03T01:17:36Z")

</div>

Showcaseテーマですと、assets/theme.js に入っているように見えますので、ファイル内を id=“added-to-cart” などで検索してみてください。

---

<div class="post-metadata">

**Author:** ![harumi](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@harumi](https://community.shopify.com/u/harumi)\
**Post date:** [October 3, 2021, 1:25am UTC](https://community.shopify.com/t/topic/69531/3 "2021-10-03T01:25:13Z")

</div>

ご返信ありがとうございます。見つかりました。

以下のようなコードになっているのですが、どのように編集すれば「支払い」ボタンを非表示にし「カートを見る」ボタンを大きくすることができますでしょうか。

```javascript
showThemeModal(['', "
"), '×', '#### ' + theme.icons.tick + theme.strings.productAddedToCart + '', '', "

"), '' + '

', product.product_title, '

' + "".concat(variantHtml ? variantHtml : '') + '
', '
', "

"), '") + theme.strings.viewCart + '', '' + theme.strings.popupCheckout + ' ', '

', '
', '
'].join(''), "added-to-cart", null);
        } //Update header summary

```

ご教授いただけるとありがたいです。よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![toooru](https://avatars.discourse-cdn.com/v4/letter/t/df788c/32.png) [@toooru](https://community.shopify.com/u/toooru)\
**Post date:** [October 3, 2021, 3:11am UTC](https://community.shopify.com/t/topic/69531/4 "2021-10-03T03:11:08Z")

</div>

検証していないため違っていたらすみませんが、おそらくボタンを消すのは ‘\<a href="’ + theme.routes.checkout + ‘" class=“button button–checkout” [data-cc-checkout-button]\>’ + theme.strings.popupCheckout + ' ', を削除、それによりボタンの幅等がおかしくなる場合はCSS調整、となるかと思います。

ディベロッパーツールでは実現できているとのことで、そちらを参考にコード編集すれば実現できると思いますが、もしご自身でJavaScriptやCSSの編集が難しい場合はパートナーやShopifyエキスパートの開発者・開発会社にご相談・ご依頼されることをおすすめいたします。

---

<div class="post-metadata">

**Author:** ![harumi](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@harumi](https://community.shopify.com/u/harumi)\
**Post date:** [October 3, 2021, 3:16am UTC](https://community.shopify.com/t/topic/69531/5 "2021-10-03T03:16:44Z")

</div>

ありがとうございます！

```css
#added-to-cart .button--checkout{
display:none;
}
#added-to-cart .button{
width:calc(100% - 10px);
}

```

で実装できました。ありがとうございました！

---

<div class="post-metadata">

**Author:** ![Anonymous\_837c3e0b20e0d4f86d60de960c76112c](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@Anonymous\_837c3e0b20e0d4f86d60de960c76112c](https://community.shopify.com/u/Anonymous_837c3e0b20e0d4f86d60de960c76112c)\
**Post date:** [September 11, 2024, 4:58am UTC](https://community.shopify.com/t/topic/69531/6 "2024-09-11T04:58:27Z")

</div>

コメント失礼します。

私も同じような状態なのですが、Dawnテーマの場合も同じコードでしょうか？

---

<div class="post-metadata">

**Author:** ![JellyOil](https://avatars.discourse-cdn.com/v4/letter/j/7cd45c/32.png) [@JellyOil](https://community.shopify.com/u/JellyOil)\
**Post date:** [January 16, 2025, 12:36am UTC](https://community.shopify.com/t/topic/69531/7 "2025-01-16T00:36:49Z")

</div>

オンラインストア＞テーマ＞コード編集＞検索窓「component-cart-notification.css」

最下に下記を追加 でテーマ「Dawn」は出来ました。

/\*\* ポップアップ 購入ボタン 非表示 \*\*/  
form#cart-notification-form {  
display: none;  
}