Product Page Badge Size

[beckstead]

How do I go about increasing the badge size on the product pages? In this case I'd like to make the best seller badge larger in size.

 

[TheUntechnickle]

Hey @beckstead,

Can you please share your store URL? We'd love to help 😄

Thanks,
Shubham | Untechnickle

[Liquid_xPert_SJ]

Hi@beckstead welcome to the Shopify Community,

Can you please share the store URL or the theme name you are using? currently? It will be easy for me to get back to you with a solution.

Thanks

[beckstead]

The theme I'm using is Demati OS 2.0.

[Liquid_xPert_SJ]

@beckstead 

you can put the below css into your site.scss.css file which is located in the theme files asset folder

.product-card__label > span {
	width: 150px;
	height: 150px;
}

you can change the width height according to your need.

Thanks

[TheUntechnickle]

You can add this CSS to your base.css file 🙂

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  transform: scale(1.5); /* Increases the badge size by 50% */
  transform-origin: top left; /* Keeps the badge anchored to its original position */
}

/* If the above selector doesn't work, try these alternative selectors */
.badge-bestseller,
.product__badge--bestseller,
.bestseller-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  transform: scale(1.5);
  transform-origin: top left;
}

/* Additional specificity if needed */
.product__media-wrapper .product-badge,
.product-single__media-wrapper .badge-bestseller {
  transform: scale(1.5);
  transform-origin: top left;
}

You can adjust the scale(1.5) value to make the badge larger or smaller. For example:

• scale(2.0) would make it twice the original size
• scale(1.25) would make it 25% larger

Cheers!
Shubham | Untechnickle

[beckstead]

........

[TheUntechnickle]

Can you please share the storefront password too?

[rajweb]

Hey @beckstead ,

To increase the size of the "Best Seller" badge on your product page, you will need to modify the CSS that controls the badge's appearance. Here’s how you can do it:

1. Identify the Badge CSS Class:

- Use your browser's developer tools (right-click on the badge and select "Inspect") to find the CSS class or ID associated with the badge.

2. Increase the Badge Size:

.badge-class {
    width: 150px; /* Adjust to your desired size */
    height: auto; /* Maintain aspect ratio */
    font-size: 1.5em; /* Adjust text size if needed */
}

If you provide access to the HTML or CSS for your product page, I can guide you more precisely on where to make the changes! Let me know if you'd like additional help.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[beckstead]

@rajweb 

If I change from 65px to 165px for example the badge size increases on both the collections page and the product page. However, I only want the size to change on the product page as I find the size is too small for that page.

From: 

.custom_badge.badge_bestseller{ left:0px; right:0px; max-width:165px;}

To:

.custom_badge.badge_bestseller{ left:0px; right:0px; max-width:165px;}

See below.

/*badges css start*/

.custom_badge{ position:absolute; width:100%; z-index:2;}

.custom_badge.badge_bestseller{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_bogo{ left:0px; right:0px; max-width:85px;}
.custom_badge.badge_special{ left:0px; right:0px; max-width:120px;}
.custom_badge.badge_clearance{ left:0px; right:0px; max-width:120px;}
.custom_badge.badge_comingsoon{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_deal{ left:0px; right:0px; max-width:120px;}
.custom_badge.badge_gift{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_new_arrival{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_new_colour{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_new_flavour{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_new_option{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_new_size{ left:0px; right:0px; max-width:65px;}
.custom_badge.badge_outofstock{ left:0px; right:0px; max-width:120px;}
.custom_badge.badge_sale{ left:0px; right:0px; max-width:85px;}

@media(max-width: 540px){
.custom_badge.badge_bestseller{ max-width:50px;}
.custom_badge.badge_bogo{ max-width:60px;}
.custom_badge.badge_special{ max-width:80px;}
.custom_badge.badge_clearance{ max-width:80px;}
.custom_badge.badge_comingsoon{ max-width:50px;}
.custom_badge.badge_deal{ max-width:80px;}
.custom_badge.badge_gift{ max-width:50px;}
.custom_badge.badge_new_arrival{ max-width:50px;}
.custom_badge.badge_new_colour{ max-width:50px;}
.custom_badge.badge_new_flavour{ max-width:50px;}
.custom_badge.badge_new_option{ max-width:50px;}
.custom_badge.badge_new_size{ max-width:50px;}
.custom_badge.badge_outofstock{ max-width:80px;}
.custom_badge.badge_sale{ max-width:60px;}
}

/*badges css ends*/

 

 

 

[Amanda_Fordeer]

Hi @beckstead,

You can effortlessly adjust size, position, add dynamic text, change colors, and more using the Product Labels & Badges app.