売り切れた商品の価格を非表示にする方法【DAWN】

Shopifyのテーマ「DAWN」で、在庫がない場合は商品ページでは価格を非表示にする方法を解説します。

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

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

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

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

変更前：

{%- when 'price' -%}
  <div id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
    {%- render 'price',
      product: product,
      use_variant: true,
      show_badges: true,
      price_class: 'price--large'
     -%}
  </div>

変更後：

{%- when 'price' -%}
{% if product.available %}
  <div id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
    {%- render 'price',
      product: product,
      use_variant: true,
      show_badges: true,
      price_class: 'price--large'
     -%}
  </div>
{% endif %}

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