# コレクションページでのみ価格を非表示にしたい

**URL:** <https://community.shopify.com/t/topic/211707>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [April 27, 2023, 8:32am UTC](https://community.shopify.com/t/topic/211707 "2023-04-27T08:32:31Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

ユーザーは、コレクションページ（商品一覧）で価格を非表示にし、カタログのように表示したいと質問しています。ただし、個別の商品ページでは価格表示を維持したいとのことです。

**提案された解決方法（2つ）：**

1. **HTMLコード編集**：`class="product-item--price"`の要素を削除する方法。テーマによって編集ファイルが異なります。

2. **CSS追加**：`base.css`ファイルの最下部に以下のコードを追加：
```css
#CollectionSection .product-item--price { display: none; }
```

**結果：**
ユーザーは提案されたCSSコードで問題を解決し、表示改善を実施できたと報告しています。どちらの方法も複雑ではなく、コード編集の経験があれば実装可能です。

<div class="post-metadata">

**Author:** ![yukaymgt](https://avatars.discourse-cdn.com/v4/letter/y/e56c9b/32.png) [@yukaymgt](https://community.shopify.com/u/yukaymgt)\
**Post date:** [April 27, 2023, 8:32am UTC](https://community.shopify.com/t/topic/211707/1 "2023-04-27T08:32:31Z")

</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:** [April 27, 2023, 8:54am UTC](https://community.shopify.com/t/topic/211707/2 "2023-04-27T08:54:10Z")

</div>

お世話になっております。

ご質問確認しました。

方法は2つありますが、どちらも複雑ではございません。

**1. 商品価格を表示している要素を削除する**

こちらはテーマがわからないので、編集ファイルがわかりませんが、

もしコード編集のご経験がございましたら、class="product-item–price"を探して、その要素を削除してみてください。

**2.CSSにより、価格を非表示にする**

こちらもテーマがわかないため、ファイル名を詳細にお伝えできませんが、おそらくbase.cssというファイルがあるかと思います。

base.cssの一番下に以下のコードを追記ください。

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

```

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

---

<div class="post-metadata">

**Author:** ![yukaymgt](https://avatars.discourse-cdn.com/v4/letter/y/e56c9b/32.png) [@yukaymgt](https://community.shopify.com/u/yukaymgt)\
**Post date:** [April 27, 2023, 9:09am UTC](https://community.shopify.com/t/topic/211707/3 "2023-04-27T09:09:40Z")

</div>

株式会社フルバランス ご回答者さま

この度は早々にご回答いただき、大変わかりやすいご説明をありがとうございます！

おかげさまで解決、表示改善を実施できました。本当に助かりました。

今後ともよろしくお願いいたします。