如何在shopify中的可变产品上添加带有价格的标签

Question

i am adding a label (regular price and sale price) with $ amount on shopify problem which i am facing when i change the variable from product option amount automatically changed but label which i add with amount that suddenly gone. both shots are attached.

https://drive.google.com/file/d/1KdnfVJrvspl59i9yFLJZ62yvU_W7av6T/view?usp=sharing

withlabel:

https://drive.google.com/file/d/15A9-Tx2AZuPR5ewfDhLUo65a7TYUCJ8K/view?usp=sharing

i already add for simple product even for variable product code is here:

{%- comment -%} PRICE {%- endcomment -%}
<div class="countdown-wrapper">
  {%- include 'limited-offer' -%}
</div>
{%- if settings.price_range and product.price_varies -%}
<div class="price-range price">
  <span class="price-new"><span class="money">{{- product.price_min | money -}}</span></span> - <span class="price-new"><span class="money">{{- product.price_max | money -}}</span></span>
</div>
{%- endif -%}
<div class="product-single__price-{{- section.id -}}">
  <div id="price" class="price">
    {%- if current_variant.compare_at_price > current_variant.price -%}
    <span  id="ProductPrice-{{- section.id -}}" class="amount price-new">
      <span class="money">
        <label>Sale price:</label>&nbsp;&nbsp;
        {{- current_variant.price | money -}}
      </span>
    </span>
    {%- else -%}
    <span id="ProductPrice-{{- section.id -}}" class="amount price-new">
      <span class="money ">
<label>Regular price:</label>&nbsp;&nbsp;
        {{- current_variant.price | money -}}</span>
    </span>
    {%- endif -%}
    <br>
    <span id="ComparePrice-{{- section.id -}}" class="amount price-old{%- unless current_variant.compare_at_price > current_variant.price %}{{- " hide" -}}{%- endunless -%}">
      <span class="money">
            <label>Regular price:</label>&nbsp;&nbsp;
        {%- if current_variant.compare_at_price > current_variant.price -%}
        {{- current_variant.compare_at_price | money -}}
        {%- endif -%}
      </span>
    </span>
    <span class="hide" itemprop="price">{{- product.price | money_without_currency -}}</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

the label tag which i add that works but when i change the product option my both labels regular price and sale price gone. i am expecting to show when i select any option label should show with amount like regular price: $200 sale price: $150

Answer 1

Usman, when you change the product options it trigger onchange event and product information override according to new product option selection. Can you please share theme name so that i can exact help you from where you can change label in js file.

Usually, code mentioned in theme.js, please refer below screenshot include event that trigger on change of product option: https://drive.google.com/file/d/1MEFCGV6DWk6JUzxrVgK6fczbFqUTMpH2/view?usp=drivesdk