Change the location of discounts on the product page

How can I move the discount to the right side, like in the image I uploaded? And how can I enlarge this label?

Attachments:

You must be logged in to view attached files.

Hi,

Here is the custom code to change the Sale Label position to the right side of the product loop thumbnail. Please add the following code to Theme Settings > Custom CSS > Global:

.product-grid-item .product-labels {
	inset-inline-end: 7px;
	max-width: 100%;
}

.product-grid-item .product-label.onsale {
	position: absolute;
	inset-inline-end: 0;
}

Additionally, here is the custom code to increase the padding and font size of the Sale Label on product loop. You can adjust the values within the code to suit your specific needs:

.product-grid-item .product-label.onsale {
	padding: 8px;
	font-size: 16px;
}

Best regards

[Author]

Posts