'Sold Out' badge customization and Mobile optimisation

[marycrichton123]

Hey, 

I have two questions.

1. I would like to have two badges available. 1 x 'sold out' and 1 x 'wish list'.  

For example, I would like the socks to have the sold out badge and the jacket to have wishlist badge. 

2. On mobile view I would like this banner to fit the screen rather than fill the screen and be cropped? (the models should be centred rather than cropped as is on desktop) 

Any help would be much appreciated. 

Thanks, 

Mary

[devcoders]

Hello @marycrichton123 
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[marycrichton123]

https://8wvovjd84f303k2w-86239904092.shopifypreview.com

[devcoders]

Hello @marycrichton123 

Step 1: Add the Badges in Product Grid
Go to Shopify Admin → Online Store → Themes.
Click "Actions" → "Edit Code".
Open the file card-product.liquid (or product-card.liquid, depending on your theme).
Find the existing product image and title section. Add this before the </div> of the product card:

<div class="product-badges">
  {% if product.available == false %}
    <span class="badge sold-out">Sold Out</span>
  {% endif %}

  <span class="badge wish-list" data-product-id="{{ product.id }}">Wish List</span>
</div>