# 売り切れた後に価格を非表示にする方法②

**URL:** <https://community.shopify.com/t/topic/346960>\
**Category:** 技術的なQ＆A\
**Tags:** html\
**Created:** [August 9, 2024, 5:08am UTC](https://community.shopify.com/t/topic/346960 "2024-08-09T05:08:54Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

商品が売り切れた際に価格を非表示にする方法についての技術的な質問と解決。

**経緯:**
- 質問者は以前、同じタイトルで質問し、`product-template.liquid`などのファイルで`{% if product.available %}`を使った条件分岐コードの提案を受けた
- しかし該当ファイルが見つからず、`main-product.liquid`ファイルにたどり着いたものの、具体的にどこにコードを挿入すべきか分からなかった

**解決方法:**
- サポート担当者が詳細な手順を提示
- 管理画面から「オンラインストア」>「テーマ」>「コードを編集」に移動
- `main-product.liquid`内の価格表示部分(`{%- when 'price' -%}`)を`{% if product.available %}`で囲む形に変更

**結果:**
- 質問者は提示された手順に従い、無事に価格の非表示化に成功
- 長時間悩んでいた問題が解決し、ナレッジサービスへの感謝を表明

<div class="post-metadata">

**Author:** ![Hiro614](https://avatars.discourse-cdn.com/v4/letter/h/e5b9ba/32.png) [@Hiro614](https://community.shopify.com/u/Hiro614)\
**Post date:** [August 9, 2024, 5:08am UTC](https://community.shopify.com/t/topic/346960/1 "2024-08-09T05:08:54Z")

</div>

先日、こちらで同タイトルで質問させていただきました。

その際、下記の返答をいただきました。

値段を表示しているファイル（product-template.liquid または product-form.liquid など）を編集していただければと思います。

具体的なコードは以下になります。

```auto
{% if product.available %}
  <!-- 商品が在庫がある場合に価格を表示 -->
  <p class="price">{{ product.price | money }}</p>
{% else %}
  <!-- 商品が在庫がない場合に価格を非表示 -->
  <p class="price" style="display:none;">{{ product.price | money }}</p>
{% endif %}

```

商品在庫がある時は値段を通常通り表示して売り切れの場合は非表示になります。

と教えていただきまして、やってみました。

コード編集の場所をなんとか探し(コードを初めて見ました)、同名のファイルを検索しましたが出てこなかったので、色々と探してみましたところ、Sectionsのmain-product.liquidにたどりつきました。

しかし、そこのどの部分に教えていただいたコードを入れたらよいのかわかりません。

\<div class=" price {%- if price\_class %} {{ price\_class }}{% endif -%} {%- if available == false %} price--sold-out{% endif -%} {%- if compare\_at\_price \> price and product.quantity\_price\_breaks\_configured? != true %} price--on-sale{% endif -%} {%- if compare\_at\_price \> price and product.quantity\_price\_breaks\_configured? %} volume-pricing--sale-badge{% endif -%} {%- if product.price\_varies == false and product.compare\_at\_price\_varies %} price--no-compare{% endif -%} {%- if show\_badges %} price--show-badge{% endif -%} "

この部分のどこかに入れる、または書き換えるなどでしょうか。

またもしかしたら、snippets内のprice liquidなのかもしれないとも思っています。

おわかりになりましたら、教えていただけますと助かります。

---

<div class="post-metadata">

**Author:** ![Hiro614](https://avatars.discourse-cdn.com/v4/letter/h/e5b9ba/32.png) [@Hiro614](https://community.shopify.com/u/Hiro614)\
**Post date:** [August 9, 2024, 5:16am UTC](https://community.shopify.com/t/topic/346960/2 "2024-08-09T05:16:25Z")

</div>

価格を非表示にしたいのはコレクションページではなくて商品ページです。

どうぞよろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_5168086324d6fa4637c896de39bb248c](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_5168086324d6fa4637c896de39bb248c/32/28647_2.png) [@Anonymous\_5168086324d6fa4637c896de39bb248c](https://community.shopify.com/u/Anonymous_5168086324d6fa4637c896de39bb248c)\
**Post date:** [August 19, 2024, 12:35am UTC](https://community.shopify.com/t/topic/346960/3 "2024-08-19T00:35:49Z")

</div>

以下の手順をお試しください。

1.管理画面にログインし、[オンラインストア] \> [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「セクション」フォルダ内のmain-product.liquidファイルを選択します。

1. 価格を読み込んでいるコードを、以下のように変更します。

変更前：

```markup
{%- when 'price' -%}
  
    {%- render 'price',
    product: product,
    use_variant: true,
    show_badges: true,
    price_class: 'price--large'
     -%}

```

変更後：

```markup
{%- when 'price' -%}
 {% if product.available %}
   
   {%- render 'price',
   product: product,
   use_variant: true,
   show_badges: true,
   price_class: 'price--large'
  -%}
  

{% endif %}

```

1. 最後に「保存」をクリックして完了です。

---

<div class="post-metadata">

**Author:** ![Hiro614](https://avatars.discourse-cdn.com/v4/letter/h/e5b9ba/32.png) [@Hiro614](https://community.shopify.com/u/Hiro614)\
**Post date:** [August 19, 2024, 1:42am UTC](https://community.shopify.com/t/topic/346960/4 "2024-08-19T01:42:45Z")

</div>

教えてくださりありがとうございます!

さっそくやってみましたところ、価格を非表示にすることができました!

かなり長時間この問題に時間を取られていまして、さらに解決も出来なくてどんよりしていましたが、

ナレッジサービスさんのおかげで、無事に解決することが出来ました。

本当にありがとうございました。