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

日本語 ディスカッション 技術的なQ＆A
, ,

Topic summary

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

提案された解決策:

  1. CSS対応（簡易） - Jizo_Inagakiが提案:

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

  2. コード編集（推奨） - bluetreeが提案:

    • snippets/buy-buttons.liquidを編集
    • payment_button部分に在庫チェック条件を追加:
    {%- if product.selected_or_first_available_variant != null -%}
    • 「カートに追加」ボタンと同じ条件を適用

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

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

テーマ：DAWN 15.0.0

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

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

uf2_0-1732869515407.png
uf2_0-1732869515407.png492×149 975 Bytes

1 Like
2

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

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

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

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

参考:

https://developer.mozilla.org/ja/docs/Web/CSS/Next-sibling_combinator

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

3

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

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

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

Before:

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

After:

{%- 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

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

2 Likes
4

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

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

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

1 Like