# 四角で囲って表示したい。

**URL:** <https://community.shopify.com/t/topic/287921>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [January 23, 2024, 1:51am UTC](https://community.shopify.com/t/topic/287921 "2024-01-23T01:51:35Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

カートへの商品追加時に表示されるポップアップで、「買い物を続ける」ボタンに枠線を追加し、「カートを見る」ボタンの枠線を削除したいという質問。

**提案された解決方法:**
- Dawnテーマ（バージョン12.0.0）を前提とした手順
- 管理画面 > オンラインストア > カスタマイズ > テーマ設定 > カスタムCSSにコードを追加
- 具体的なCSSコードが提供され、ボタンのスタイル（border、box-shadow、width、heightなど）を変更

**追加情報:**
- ボタンの表示順序を変更したい場合は、コード編集から「cart-notification.liquid」テンプレートを選択して編集可能
- 質問者は回答に感謝し、勉強になったと返信

解決済みの技術的な質問で、CSSによるカスタマイズ方法が明確に示されている。

<div class="post-metadata">

**Author:** ![Anonymous\_7ad58fb9bb272e832587d5beb5347be2](https://avatars.discourse-cdn.com/v4/letter/a/b38774/32.png) [@Anonymous\_7ad58fb9bb272e832587d5beb5347be2](https://community.shopify.com/u/Anonymous_7ad58fb9bb272e832587d5beb5347be2)\
**Post date:** [January 23, 2024, 1:51am UTC](https://community.shopify.com/t/topic/287921/1 "2024-01-23T01:51:35Z")

</div>

カートに商品を入れた際にポップアップされる「カートにアイテムが追加されました」に表示されている「買い物を続ける」を四角で囲い、「カートを見る」の四角の囲いを外したいと考えています。

もしくは「買い物を続ける」と「カートを見る」の表示位置を入れ替えたいと思います。

変更の仕方をご教示くださると幸いです。

テーマはDAWNです。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [January 24, 2024, 10:20am UTC](https://community.shopify.com/t/topic/287921/2 "2024-01-24T10:20:02Z")

</div>

[@おかっち](https://community.shopify.com/user/1672380)様

カートに投入した際のポップアップの、

「買い物を続ける」を四角で囲い、「カートを見る」の四角の囲いを外したい件ですが、

以下の手順で対応が可能かと思います。

Dawn バージョン12.0.0を元にご説明させていただきます。  
バージョンが古い場合は手順が異なる場合がありますのでご了承ください。

1. 管理画面 \> オンラインストア \> カスタマイズボタンをクリック

2. 画面左側の歯車マーク（テーマ設定）をクリック

3. カスタムCSSをクリックし下記CSSを追加し保存

```markup
.cart-notification__links button.button-label {
  border: solid 1px #000;
  width: 100%;
  height: 47px;
  text-decoration: none;
}
#cart-notification-button:after {
  box-shadow: none !important;
}

```

以上で下記画像のように変更されるかと思います。

 ![20240124_img02.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/0/30981728294e07baccbf66ab4543de9f122ea314.png)

また、表示順を変更したい場合は、管理画面 \> オンラインストア \>「・・・」 \> コードを編集から、

『 **cart-notification.liquid** 』を選択しテンプレートの内容を変更することで対応が可能となります。

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![Anonymous\_7ad58fb9bb272e832587d5beb5347be2](https://avatars.discourse-cdn.com/v4/letter/a/b38774/32.png) [@Anonymous\_7ad58fb9bb272e832587d5beb5347be2](https://community.shopify.com/u/Anonymous_7ad58fb9bb272e832587d5beb5347be2)\
**Post date:** [January 26, 2024, 12:34am UTC](https://community.shopify.com/t/topic/287921/3 "2024-01-26T00:34:34Z")

</div>

ご回答くださり、ありがとうございます。

また、助けてくださりありがというございました。

とても勉強になります。