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

Store Design
, , , ,

Topic summary

Goal: Move the “Sold Out” badge to appear below the price on Collection and Search result product cards in the Refresh theme (currently overlays the product image). A screenshot was shared; the “Available in stock” badge is a separate custom badge on the Product page.

Proposed solutions:

  • Theme code change (most direct): Edit snippets/card-product.liquid and move the badge include below the price include. Specifically, cut {% render 'product-badge', product: product %} from near the top of the card and paste it after {% render 'price', product: product, price_class: 'price--large' %}. This reorders HTML so the badge renders under the price.
  • CSS workarounds: One CSS snippet hides the badge when sold out (does not relocate). A follow-up CSS attempts layout repositioning using grid and margin to place .card__badge in row 3.

Requests for access: Several participants asked for the store URL (and password if protected). The product card code was requested; a GitHub repo link was provided by the OP.

Status: No confirmation of a working fix yet; awaiting store details/feedback. The code-reorder approach targets both Collection and Search if they share the same product card snippet.

Summarized with AI on December 10. AI used: gpt-5.
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

1 Like
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