# 商品一覧の価格を非表示にしたい

**URL:** <https://community.shopify.com/t/topic/387919>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [January 18, 2025, 6:52am UTC](https://community.shopify.com/t/topic/387919 "2025-01-18T06:52:18Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

ユーザーが商品一覧ページで在庫切れ商品の価格を非表示にしたいと相談。最初に試したCSS（`#CollectionSection .product-item--price { display: none;}`）では効果がなかった。

**解決プロセス：**
- サポート担当者がプレビューリンクを要求し、`!important`を使ったCSS優先度の向上を提案
- プレビューリンク確認後、正しいCSSコードを提供：
```css
.card-information{
    display: none;
}
```

**結果：**
問題は解決し、価格の非表示に成功。サポート担当者はCSS優先度（`!important`）の仕組みについても説明を提供した。

<div class="post-metadata">

**Author:** ![nowhere2021](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@nowhere2021](https://community.shopify.com/u/nowhere2021)\
**Post date:** [January 18, 2025, 6:52am UTC](https://community.shopify.com/t/topic/387919/1 "2025-01-18T06:52:18Z")

</div>

在庫切れの商品が商品一覧に価格表示されてしまい困ってしまいます。

似た質問で、base.cssの最後に以下を追加して対応する旨がありましたが表示されたままとなりました。

#CollectionSection .product-item–price { display: none;}

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [January 20, 2025, 5:13am UTC](https://community.shopify.com/t/topic/387919/2 "2025-01-20T05:13:44Z")

</div>

質問拝見いたしました。

こちらプレビューリンクいただけましたら詳細のcssを出せるかと思いますのでリンクと非表示の部分教えていただけたらと思います！

class名は分かりかねますが、以下のようにcssの優先度を上げてみても非表示にならないでしょうか？

display:none!important;

ご確認いただけますと幸いです。

なにかご質問があれば、お気軽にご相談ください。  
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![nowhere2021](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@nowhere2021](https://community.shopify.com/u/nowhere2021)\
**Post date:** [January 20, 2025, 12:23pm UTC](https://community.shopify.com/t/topic/387919/3 "2025-01-20T12:23:14Z")

</div>

ありがとうございます！

プレビューリンクこちらになります。

[https://10odleli8nuejsk9-59756085404.shopifypreview.com](https://10odleli8nuejsk9-59756085404.shopifypreview.com)

非表示の部分とはどういうことでしょうか？

すみません、CSSの優先度をあげるとは具体的にどういうことになりますでしょうか？

すみません、初心者のため教えていただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [January 21, 2025, 5:03am UTC](https://community.shopify.com/t/topic/387919/4 "2025-01-21T05:03:54Z")

</div>

ご返信ありがとうございます！

下記cssで非表示にできましたのでご参考にしてください。

```css
.card-information{
    display: none;
}

```

非表示の部分とはどういうことでしょうか？

→非表示にしたい箇所を教えていただきたかったです。

CSSの優先度をあげるとは具体的にどういうことになりますでしょうか？

→cssが2つ重複などしている場合に\*\*!important\*\*を使うと優先できます。

リンクを見て値段の部分を非表示にするcssを添付したので参考にしていただけますと幸いです。

確認お願いします！

---

<div class="post-metadata">

**Author:** ![nowhere2021](https://avatars.discourse-cdn.com/v4/letter/n/f9ae1b/32.png) [@nowhere2021](https://community.shopify.com/u/nowhere2021)\
**Post date:** [January 21, 2025, 7:23am UTC](https://community.shopify.com/t/topic/387919/5 "2025-01-21T07:23:23Z")

</div>

ご返信ありがとうございます！

再現できました！

ご丁寧にご説明いただきありがとうございました。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [January 21, 2025, 9:26am UTC](https://community.shopify.com/t/topic/387919/6 "2025-01-21T09:26:52Z")

</div>

再現できたようで安心しました！

また何かありましたらご相談ください！
