Refresh Theme - How to move Sold Out badge to below the price on Search Results page & Collection page?

Store Design
, , , ,
1

Refresh Theme - How to move Sold Out badge to below the price on Search Results page & Collection page?

NOTE: The “Available in stock” is a custom badge added on the Product Page.

Screenshot 2025-12-08 111456
Screenshot 2025-12-08 1114561034×889 211 KB

2

In order to move the Sold Out badge under the product price on the collection page and the Search page, is the theme level coding required. Because now the badge is overlay on the product card image. If it was the part of the whole card, then it was possible to fix it with the help of coding.

But currently, it’s requires to add the badge coding under the product price for the product card only.

Can you share the all coding of product-card.liquid or related file via github then I can share the updated code with the solution.

3

[email removed]TheScriptFlow_1Shopify Partner

Not sure if I uploaded correctly on Github:** GitHub - wangsuki/TurboTurbos-Sold-Out-Badge

4

Hi, @TurboTurbos
Can you please share the store URL so I can better support you?

5

Please add this code to the Custom CSS section in the theme settings.

.card--card:has(.price--sold-out) .card__inner .card__badge { display: none !important; }

Custom CSS in Theme setings
Custom CSS in Theme setings1920×1738 260 KB

Best regards,
Dan from Ryviu: Product Reviews App

6

Hi @TurboTurbos

Please share your store URL and password (if it’s password-protected),
so that I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

7

@TurboTurbos can you please share your website link?

8

Hi @TurboTurbos ,
In the Refresh theme, the “Sold out” badge is positioned at the top of the product card by default because it is rendered before the pricing block. To move it below the price, you need to reorder the HTML inside your product card snippet.

Steps to move the Sold-Out badge below the price

  1. Go to Online Store → Themes → Edit code
  2. Open:
    snippets/card-product.liquid
  3. Look for this line (the badge container):
{%- render 'product-badge', product: product -%}

It will be near the top of the card.

  1. Cut that line and paste it after the price block, generally below:
{%- render 'price', product: product, price_class: 'price--large' -%}

Your structure should look like this:

{%- render 'price', product: product, price_class: 'price--large' -%}

{%- render 'product-badge', product: product -%}
  1. Save the file → Refresh Collection or Search page.
9

This hides the badge, but doesn’t relocate it as OP has requested.

10

Please add more this code

.card--card.card--media>.card__content .card__badge { 
  display: flex !important;     
  grid-row-start: 3 !important; 
  margin-top: -12px !important; 
}

Best regards,
Dan from Ryviu: Product Reviews App