# 「完売中」の商品の「今すぐ購入する」ボタンを非表示にしたい

**URL:** <https://community.shopify.com/t/topic/377540>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [November 29, 2024, 8:39am UTC](https://community.shopify.com/t/topic/377540 "2024-11-29T08:39:13Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

**問題:** Shopifyテーマ「DAWN 15.0.0」で在庫ゼロの商品に表示される「今すぐ購入」ボタンを非表示にしたい。

**提案された解決策:**

1. **CSS対応（簡易）** - Jizo_Inagakiが提案:
   - テーマエディタのカスタムCSSに以下を追加:
   ```css
   .product-form__submit[disabled] + div { display: none; }
   ```
   - LiquidやJavaScriptが不慣れな場合に有効だが、完全な解決には不十分な可能性あり

2. **コード編集（推奨）** - bluetreeが提案:
   - `snippets/buy-buttons.liquid`を編集
   - `payment_button`部分に在庫チェック条件を追加:
   ```liquid
   {%- if product.selected_or_first_available_variant != null -%}
   ```
   - 「カートに追加」ボタンと同じ条件を適用

**結果:** 質問者(uf2)がコード編集方法を実装し、完売時の購入ボタン非表示に成功。解決済み。

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [November 29, 2024, 8:39am UTC](https://community.shopify.com/t/topic/377540/1 "2024-11-29T08:39:13Z")

</div>

テーマ：DAWN 15.0.0

在庫が０の商品は完売中札のしたに表示される「今すぐ購入」の表示をなくしたいです。

どこのコードファイルを編集すればいいのかわからないため、どなたかわかる方ご教示いただけますと幸いです。

 ![uf2_0-1732869515407.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/1/13313794c699e854603e5f1e08d31347a1322e25.png)

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [December 3, 2024, 3:14am UTC](https://community.shopify.com/t/topic/377540/2 "2024-12-03T03:14:13Z")

</div>

方法は複数考えられますが、liquidやJavaScriptの読み書きができない場合はCSS による簡易対応が検討できるかなと思います。

具体的には、テーマエディタで該当セクションに移動し、カスタムCSSに以下を入力するなどです。

```css
.product-form__submit[disabled] + div { display: none; }

```

入念な確認は行なっていないため、不足や問題ある場合は適宜書き換えてください。

参考:

[https://developer.mozilla.org/ja/docs/Web/CSS/Next-sibling\_combinator](https://developer.mozilla.org/ja/docs/Web/CSS/Next-sibling_combinator)

以上ですが、CSSもよくわからない場合はエキスパートやパートナーに依頼されることをお勧めします。

---

<div class="post-metadata">

**Author:** ![bluetree](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/bluetree/32/163780_2.png) [@bluetree](https://community.shopify.com/u/bluetree)\
**Post date:** [December 5, 2024, 5:38am UTC](https://community.shopify.com/t/topic/377540/3 "2024-12-05T05:38:08Z")

</div>

もしコード編集で対応するのであれば、DAWNテーマならbuy-buttons.liquidを編集することで解消します 🐦

snippetsディレクトリ配下のbuy-buttons.liquidを開き、payment\_buttonを見つけます。そして編集します。

ここでは直前にある「カートに追加する」ボタンの条件に合わせています。

Before:

```markup
{%- if show_dynamic_checkout -%}
    {{ form | payment_button }}
  {%- endif -%}

```

After:

```markup
{%- if show_dynamic_checkout -%}
  {%- if product.selected_or_first_available_variant != null -%}
    {%- if product.selected_or_first_available_variant.available -%}
      {%- unless quantity_rule_soldout -%}
        {{ form | payment_button }}
      {%- endunless -%}
    {%- endif -%}
  {%- endif -%}
{%- endif -%}

```

これで選択されている種類の在庫がない場合は「今すぐ購入」ボタンが非表示になるかと思います。

ref: [payment\_button | Liquid](https://shopify.dev/docs/api/liquid/filters/payment_button)

📝 編集前にバックアップをとっておくことをオススメします。

---

<div class="post-metadata">

**Author:** ![uf2](https://avatars.discourse-cdn.com/v4/letter/u/7ab992/32.png) [@uf2](https://community.shopify.com/u/uf2)\
**Post date:** [December 5, 2024, 7:45am UTC](https://community.shopify.com/t/topic/377540/4 "2024-12-05T07:45:18Z")

</div>

ご回答いただきありがとうございます。

ご教示いただいたように修正したところ無事完売時のみ購入ボタンを非表示にすることができました…！

この度はご丁寧にありがとうございました！