Refresh theme: removing the "from 0.00" prices when out of stock

[DFTGames]

I have a site with many items and variants. alot are out of stock but have variants in stock. How do i stop shopify from showing that. id probably need some code but dont know how to figure that out

example page: https://drawforturn.ca/collections/paldean-fates?sort_by=title-ascending&filter.v.availability=1

Products like : https://drawforturn.ca/products/great-tusk-ex-53-91-paldean-fates?_pos=5&_fid=74e8ff7aa&_ss=c&varian...

I only have a NM version in stock and no LP version. but it shows the "from 1.82" on the menu page instead of the version in stock

The theme is refresh

Thanks 

[EBOOST]

Hi @DFTGames,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. backup this file snippets/price.liquid to rollback in the case that you don't want.

3. Replace code in snippets/price.liquid with code below

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
 for variant in product.variants 
   if variant.available 
      if variant.price <  price_max or variant.price ==  price_max
         assign price_min = variant.price 
      endif  
   endif 
 endfor 
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{ money_price }}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price }}
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>

[DFTGames]

Hi thanks for the comment. I replaced the code but nothing seems to have changed.

See page with new code: https://drawforturn.ca/collections/paldean-fates?sort_by=title-ascending&filter.v.availability=1

[EBOOST]

Hi,

May Could you please update code below?

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  assign price_min_temp = price_max
 for variant in product.variants 
   if variant.available == true
      if variant.price <  price_min_temp or variant.price ==  price_min_temp
         assign price_min_temp = variant.price 
         assign compare_at_price = variant.compare_at_price
      endif  
   endif 
 endfor 
  assign price_min = price_min_temp
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  assign money_price_min_no = money_price_min
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
   assign money_price_temp = 'products.product.price.from_price_html' | t: price: money_price_min_no
-%}

<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular"> sss
          {{ money_price_temp }}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price_temp }}
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>

[DFTGames]

Awesome thanks this worked great!

[DFTGames]

Hi Sorry there was an issue with it. I have since disabled it from my store but it would show on collection pages

"sss - then the available price" instead of "prices from the avaialbe price" and on product pages would say "sss- the lowest price" and would not change the price viewed when switching between variant

[EBOOST]

Hi,

If you want to disable on Product detail page. I suggest code below:

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  unless template == 'product' or  section.id contains 'featured_product'
   assign price_min_temp = price_max
   assign compare_at_price_temp = compare_at_price
   for variant in product.variants 
     if variant.available == true
        if variant.price <  price_min_temp or variant.price ==  price_min_temp
          assign price_min_temp = variant.price 
          assign compare_at_price_temp = variant.compare_at_price
        endif  
     endif 
   endfor 
 endunless   
  assign money_price = price | money
  assign money_price_min = price_min | money
  assign money_price_max = price_max | money
  assign money_price_min_no = price_min_temp | money
  assign money_price_temp = price_min_temp | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
    assign money_price_temp = 'products.product.price.from_price_html' | t: price: money_price_min_no
  endif
   
-%}
<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      {%- if product.quantity_price_breaks_configured? -%}
        {%- if show_compare_at_price and compare_at_price -%}
          {%- unless product.price_varies == false and product.compare_at_price_varies %}
            <span class="visually-hidden visually-hidden--inline">
              {{- 'products.product.price.regular_price' | t -}}
            </span>
            <span>
              <s class="price-item price-item--regular variant-item__old-price">
                {% if settings.currency_code_enabled %}
                  {{ compare_at_price | money_with_currency }}
                {% else %}
                  {{ compare_at_price | money }}
                {% endif %}
              </s>
            </span>
          {%- endunless -%}
        {%- endif -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular">
          {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
        </span>
      {%- else -%}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span class="price-item price-item--regular"> 
          {% unless template == 'product' or  section.id contains 'featured_product' %}
          {{ money_price_temp }}
          {% else %}
          {{ money_price }}
          {% endunless %}
        </span>
      {%- endif -%}
    </div>
    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {% unless template == 'product' or  section.id contains 'featured_product' %}
          {{ money_price_temp }}
          {% else %}
          {{ money_price }}
         {% endunless %} 
      </span>
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>

[dreamtechzone_5]

Hello EBOOST!

I am using shopify inspired theme. How can I add a social share icon? I have added an image. I want to keep the social share icon exactly like this image. Is it possible? Please help me. Thank you.
URL: https://blue-chic-clothes.myshopify.com/products/sexy-women-one-shoulder-long-sleeve-jumpsuit
Password: Admin

Now

I want

[EBOOST]

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Create "snippets/social-sharing.liquid"

3. Copy & paste code below

<ul class="social-sharing">

  
    <li>
      <a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-facebook">
        {% render 'icon-facebook' %}
        <span class="share-title" aria-hidden="true">Share</span>
        <span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
      </a>
    </li>


 
    <li>
      <a target="_blank" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-twitter">
        {% render 'icon-twitter' %}
        <span class="share-title" aria-hidden="true">Tweet</span>
        <span class="visually-hidden">Tweet</span>
      </a>
    </li>


 
    <li>
      <a target="_blank" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="btn btn--small btn--share share-pinterest">
        {% render 'icon-pinterest' %}
        <span class="share-title" aria-hidden="true">Pint it</span>
        <span class="visually-hidden">Pint it</span>
      </a>
    </li>

</ul>
<style>
  .social-sharing {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    list-style: none;
  }
  .social-sharing a {
    text-decoration: none;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
    color: inherit;
  }
  .social-sharing svg {
    width: 20px;
    height: auto;
  }
</style>

4. Go to sections/main-product.liquid ( just recommend this section. I don't know structure of inspired theme. Because this is not free theme) -> This one for product detail page

5. Find "{%- when 'share' -%}"

6. Refer the screenshot to replace code below

{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}

7. Go to sections/featured-product.liquid -> for featured product section

8. Find "{%- when 'share' -%}"

9. Refer the screenshot to replace code below

{% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}

[dreamtechzone_5]

It worked. But if you click on Facebook, the product link is not showing, but the store link is showing. Pinterest icon is OK. Please help me. Thank you so much.

Facebook

Pinterest

[EBOOST]

Hi @dreamtechzone_5 ,

Maybe your store has a protect password here. Please remove it.

[dreamtechzone_5]

If the theme is live it will be ok? One more thing, Icons can be placed in the center? Thank you very much. I appreciate it.

[EBOOST]

If it is ok if is live theme.

You can use code below to adjusted to center

<ul class="social-sharing">

  
    <li>
      <a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-facebook">
        {% render 'icon-facebook' %}
        <span class="share-title" aria-hidden="true">Share</span>
        <span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
      </a>
    </li>


 
    <li>
      <a target="_blank" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-twitter">
        {% render 'icon-twitter' %}
        <span class="share-title" aria-hidden="true">Tweet</span>
        <span class="visually-hidden">Tweet</span>
      </a>
    </li>


 
    <li>
      <a target="_blank" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: share_permalink }}&amp;media={{ share_image | img_url: '1024x1024' }}&amp;description={{ share_title | url_param_escape }}" class="btn btn--small btn--share share-pinterest">
        {% render 'icon-pinterest' %}
        <span class="share-title" aria-hidden="true">Pint it</span>
        <span class="visually-hidden">Pint it</span>
      </a>
    </li>

</ul>
<style>
  .social-sharing {
    margin: 20px auto;
    padding: 0;
    display: flex;
    gap: 20px;
    list-style: none;
    justify-content: center;
  }
  .social-sharing a {
    text-decoration: none;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
    color: inherit;
  }
  .social-sharing svg {
    width: 20px;
    height: auto;
  }
</style>

Just update this one

[dreamtechzone_5]

It worked. Very helpful. Thank you very much.

Klarna info can be added on product page. Exactly like this image. Is it possible?

[EBOOST]

You can refer this video https://www.youtube.com/watch?v=3eMlHulIC8M

[dreamtechzone_5]

Oh Great. Thank you very much.