Labels

Hello!

Its possible to add different labels to the product photo, i already saw where to activate the “New” label, where or how can i had other labels like “On Sale” or “Awarded”?

Thanks,
SR

Hello,

You can create an attribute with different attribute items as per your needs and then in Products > Attributes > enter the attribute and enable “Show attribute label on products”

A result, your product image would have the label.

Best Regards

Thanks!

Elise,
Only one more question about labels, how can i change the color of default label for “NEW” and discount on sale products ex: “15%” ???
Thanks,
SR

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .labels-rounded .onsale{
background:red;
color:yellow;
}

If you do not need to change the background, remove this line: background:red; set the colors as per your needs.

body .labels-rounded .new{
background:red;
color:yellow;
} 

Best Regards

Thanks.

And how can we increase the size of the product labels, like the “NEW”, the “ON SALE” and the ones we configure in attributes?

Thanks,
Sandro

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-label.onsale {
	height: 70px;
	width: 70px;
}
.product-label.new {
	height: 70px;
	width: 70px;
}

Best Regards

And how to change the size of the ones we configure in attributes?

If i change this, for example, to 80px:

.product-label.new {
height: 80px;
width: 80px;
}

doesn´t appear a circle as you can see in the attached image.

Thanks,
SR

with attached image…

Attachments:

You must be logged in to view attached files.

How can i increase the size of the font inside “ON SALE” label? The percentage of the value?
Thanks,
SR

Hello,

Please add this line to each code: border-radius:50%;

Best Regards

How can i increase the size of the font inside “ON SALE” label? The percentage of the value?
Thanks,
SR

Hello,

Please replace the code with this one:

.product-label.new {
height: 80px;
width: 80px;
border-radius:50%;
}
.product-label.onsale {
	height: 80px;
	width: 80px;
border-radius:50%;
}

Best Regards

Hello,
How can i increase the size of the FONT inside “ON SALE” label? The percentage of the price discount?
Thanks,
SR

Hello,

Please replace this code:

.product-label.onsale {
	height: 80px;
	width: 80px;
border-radius:50%;
} 

With this one:

.product-label.onsale {
	height: 80px;
	width: 80px;
border-radius:50%;
font-size: 20px;
}

Change the font-size as per your needs.

Best Regards

Hello!

How can I change the size of the Labels we configure in attributes?

Thanks,
SR

Hello,

You need to change (increase/decrease) width and height:

	height: 80px;
	width: 80px; 

Best Regards

[Author]

Posts