Refresh Theme: How to add "Available in Stock" box next to price?

[TurboTurbos]

Refresh Theme: Next to price, how to add an “Available in Stock” box when product is available, in the same style as “Sold Out” box when item is out of stock.

[PieLab]

Hey pal @TurboTurbos !

To add an “Available in Stock” box that matches your “Sold Out” style on the Refresh theme, you generally need to dive into the theme code, which can be a bit complex if you aren’t familiar with Liquid.

The Code Solution: You need to edit the snippets/price.liquid file. Find the price__badges section and add this snippet:

`{%- if available -%}
  <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
    Available in Stock
  </span>
{%- endif -%}`

However, if you are a non-tech user and prefer not to touch the code, using DECO Product Labels & Badges is the most reasonable choice for you. It allows you to add and customize these “In Stock” labels easily without risking any theme errors.

Hope this helps!

[Small_Task_Help]

@TurboTurbos

Refresh Theme: Next to price, how to add an “Available in Stock” box when product is available, in the same style as “Sold Out” box when item is out of stock.

Hi,

Hope this will help

Edit main-product.liquid and add small Liquid condition under the price section

Code example

{% if product.selected_or_first_available_variant.available %}
  <span class="in-stock-badge">Available in Stock</span>
{% endif %}

Add css in base.css to style the badge so it looks like Shopify’s “Sold Out” label

[TurboTurbos]

@AiRockers

4. Go to “snippets\product.liquid” file of your theme.

@AiRockers My Refresh is missing the snippets\product.liquid. Could it be under sections\main-product.liquid?

[AiRockers]

Hi @TurboTurbos ,

Yes, you are correct.

You are at the correct file- “snippets/price.liquid”

After the closing {%- endif -%} of the badges block, but before the closing , add this code:

{%- if show_badges -%}

{%- if available -%}
Available in Stock
{%- else -%}
Out of Stock
{%- endif -%}

{%- endif -%}

For styling, go to “assets/component-price.css”
Add this CSS at the very end of the file:
/* Stock availability badge */
.price__availability {
display: inline-block;
font-size: 1.4rem;
font-weight: 500;
margin-left: 1rem;
padding: 0.8rem 1.6rem;
border-radius: 0.4rem;
vertical-align: middle;
}

.price__availability–in-stock {
background-color: #e8f5e9;
color: #2e7d32;
}

.price__availability–out-of-stock {
background-color: #eef1f6;
color: #3d4f6f;
}

You can update styling as per your need.

Let me know if you need any help in that as well.

[TurboTurbos]

@PieLab

To add an “Available in Stock” box that matches your “Sold Out” style on the Refresh theme, you generally need to dive into the theme code, which can be a bit complex if you aren’t familiar with Liquid.

The Code Solution: You need to edit the snippets/price.liquid file. Find the price__badges section and add this snippet:

`{%- if available -%}
  <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
    Available in Stock
  </span>
{%- endif -%}`

@PieLab I got your code working. just one last thing, how to move the Available in stock badge to right of price like the Sold out badge.

[TheScriptFlow_1]

I found that, you just need to follow the simple steps to ensure that the Badge should be on the right side instead of under the price.

For this, you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code shared below.

.product__info-container div[role="status"] {
    display: flex;
    align-items: center;
    gap: 10px;
 }
.badge { 
    padding: .5rem 1.3rem .4rem !important;
 }
.product .price .badge, .product .price__container {
   margin-bottom: 0px !important;
}

Results:

[AnneLuo]

Hi, @TurboTurbos
In Refresh Theme, this logic lives in:

sections/main-product.liquid

Look for the block that shows price & sold-out message.
Typically around the {% form 'product' %} area.

Code Snippet (Add Right After Price)

{%- assign current_variant = product.selected_or_first_available_variant -%}

<div class="product__inventory-status">
  {%- if current_variant.available -%}
    <div class="badge badge--success">
      Available in stock
    </div>
  {%- else -%}
    <div class="badge badge--danger">
      Sold out
    </div>
  {%- endif -%}
</div>

Style to Match Refresh (Same visual style as Sold Out)

Add this to base.css or wherever you keep custom styles:

.product__inventory-status {
  margin-top: 0.5rem;
}

.badge {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge--success {
  background-color: #e6f6e6;
  color: #006000;
}

.badge--danger {
  background-color: #fdeaea;
  color: #b00000;
}

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.