商品情報にスキップ
1 1
公開日:2025.01.02

Shopifyのテーマ「Rise/Dawn」でバリアントを持たない商品が売り切れ時に「今すぐ購入」ボタンが購入できそうに見えてしまっている状態を修正する設定例

Shopifyのテーマ「Rise/Dawn」でバリアントを持たない商品が売り切れ時に「今すぐ購入」ボタンが購入できそうに見えてしまっている状態を修正する設定例

用途

  • 商品情報管理・編集

実装方法

  • LIQUID
  • Javascript
詳細を表示する

テーマ「Dawn/Rise」の商品詳細ページで、バリアントが1つだけの商品が売り切れている場合、「今すぐ購入」ボタンが購入可能な状態に見えてしまっているので、これを修正する設定例です。

いずれ、この不具合が解消されるかもしれないため、商品の売り切れ状態を判別しJavascriptを使って「今すぐ購入」ボタンに状態を変更しています。

◆実装のメリット
・数行のコードで実装可能

◆具体的な手順
・商品テンプレートの商品情報セクションにカスタマイズされたLiquidブロックを追加しコードを挿入


テーマ「Rise/Dawn」でバリアントを持たない商品が売り切れ時に「今すぐ購入」ボタンが購入できそうに見えてしまっている状態を修正する設定例


【設定方法】商品テンプレートの商品情報セクションにカスタマイズされたLiquidブロックを追加してコードを挿入


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

商品情報セクションにカスタマイズされたLiquidブロックを追加してコードを挿入

関連ポスト

その他のJavascriptに関するTIPS