Please increase the size of soldout , new tags also reduce the title size

Store Design
, , , , , , , , ,

Topic summary

A user requests CSS modifications for their Shopify storeā€™s product cards: enlarging ā€œsold outā€ and ā€œnewā€ badges, reducing product title size, and adjusting cell spacing to fill gaps on both mobile and desktop.

Solutions Provided:

Two community members offered CSS code snippets to be added to the theme files:

  • Target .card-badge or x-grid for badge sizing
  • Use h2.card-title.h4 selector to reduce title font size
  • Code should be placed in theme.liquid under <style> tags or in CSS files like base.css

Follow-up Issues:

The original poster clarified that the initial solution also increased sale tag and price font sizes unintentionally. They requested:

  • Modifications to affect only the sale badge (not price)
  • Mobile-only targeting (desktop appearance is acceptable)
  • Alignment fix so all product card prices appear at the same height

The discussion remains open with these refinements pending.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

please help me increase this soldout , and new tags size and also reduce title size please , increase the cell span to fill in the gaps . both mobile and pc

https://d6oz19p5it2titfi-71576191201.shopifypreview.com

IMG_6506.jpeg
IMG_6506.jpeg1290Ɨ1250 48.9 KB

1 Like
2 
x-grid {
    font-size: large;
}
h2.card-title.h4 {
    font-size: small;
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

3

Hi @Shahil1

Try this one.

  1. From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  2. Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  3. In the ā€œAssetsā€ folder, click on ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.card-badge.text-end {
    font-size: 1.8rem;
}

h2.card-title.h4 {
    font-size: 1.2rem;
}

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

4

this increases the size of the sale tag as well as the price font. i only want to focus on the sale tag, secondly make it mobile only since its okay in pc but can you make all the price of the cards on same line in both because i see it in different heights in each product card right now

5

Welcome! Would you mind hitting ā€˜likeā€™ as well? Thanks!