Labels

This topic has 17 replies, 2 voices, and was last updated 4 years, 1 month ago by Elise Noromit.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
September 28, 2020 at 11:55 pm #229439

sandrofinoribeiro
Participant

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

September 29, 2020 at 7:25 am #229501

Elise Noromit
Member

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

September 29, 2020 at 8:42 am #229540

sandrofinoribeiro
Participant

Thanks!

September 29, 2020 at 10:13 am #229575

sandrofinoribeiro
Participant

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

September 29, 2020 at 1:01 pm #229663
Elise Noromit
Member
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
September 30, 2020 at 9:57 am #229856

sandrofinoribeiro
Participant

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

September 30, 2020 at 10:19 pm #230023
Elise Noromit
Member
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
October 1, 2020 at 11:28 am #230175

sandrofinoribeiro
Participant

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

October 1, 2020 at 11:36 am #230178

sandrofinoribeiro
Participant

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

October 1, 2020 at 11:37 am #230179

sandrofinoribeiro
Participant

with attached image…

Attachments:
You must be logged in to view attached files.

October 1, 2020 at 12:56 pm #230197

sandrofinoribeiro
Participant

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

October 1, 2020 at 1:46 pm #230224

Elise Noromit
Member

Hello,

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

Best Regards

October 2, 2020 at 12:37 am #230321

sandrofinoribeiro
Participant

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

October 2, 2020 at 6:51 am #230358
Elise Noromit
Member
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
October 12, 2020 at 9:17 am #232537

sandrofinoribeiro
Participant

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

October 12, 2020 at 6:50 pm #232721
Elise Noromit
Member
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
October 13, 2020 at 7:59 am #232843

sandrofinoribeiro
Participant

Hello!

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

Thanks,
SR

October 13, 2020 at 10:37 am #232880
Elise Noromit
Member
Hello,

You need to change (increase/decrease) width and height:
```
	height: 80px;
	width: 80px; 
```
Best Regards
Author

Posts