How to change the label Size, when you choose the size of the product?

Tourist
11 0 1

Hi people!

I have a question. How can I change a lable for size options? Now on my page is shown "Shoe Size". In what shopify file can I change the settings in order to show just "Size".

Thanks a lot.

0 Likes
Excursionist
42 0 6

Can you right click on the words shoe size and click Inspect? Take the first couple word of the class and then try to find it in the theme.scss.liquid (Online Store --> Themes -->  Actions --> Edit Code --> Assets -->  theme.scss.liquid).  Once you find the class, add in this code: font-size: 16px;

DeKs Tech | www.dekstech.com
0 Likes
Tourist
11 0 1

Yes, I did that. It points to the label which has no class: 

<label for="productSelect--1443536044055-option-1">Shoe Size</label>

And also I don't have theme.scss file in my Assets folder. But I found theme.liquid file in Layout folder. In that file I searched "productSelect" and found next code: 

// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
{% endif %}

 

0 Likes
Excursionist
42 0 6

Can you share your shopify store so I can triage properly?  I am not sure you're really looking in the right place and you should have a scss file of some sort which is storing some sort of "label" tag that you can update the font size on.  Very unlikely that it wouldn't be in there somewhere.  Almost all predefined elements on these themes have these tags so you can update them yourself accordingly.  It is labeled with h1, h2, or p?

If you're not comfortable sharing it here, just send it to me at https://dekstech.com/pages/contact-us

Best Regards,

DeKs Tech

DeKs Tech | www.dekstech.com
0 Likes
Tourist
11 0 1

Thanks a lot, I have just sent a letter with a link to the email which is specified in your contacts.

Best Regards,

Denys

1 Like
Excursionist
42 0 6

Denys,

Go to your vendors.min.css

Change the following code from:

.select-size-options label{color: #8d8d8d; font-size: 16px; padding-right:15px;}

to:

​
.select-size-options label{color: #8d8d8d; font-size: 22px; padding-right:15px;}

​

Best Regards,

DeKs Tech

DeKs Tech | www.dekstech.com
0 Likes
New Member
9 0 0

Hi there,

Would really appreciate if you could help me too.

I need to reduce the size of the product label - the one that shows "sale" on the product image.

Have tried doing that in styles.scss.liquid but it doesn’t  work.

was trying to reduce the height & width to 70 px:

 

@media only screen and (max-width: 480px){
.block.product .productlabel {
font-size: 60%;
height: 50px;
width: 50px;
-webkit-border-radius:80px;
-moz-border-radius:80px;
border-radius:80px;.productlabel {
background:{{ settings.coll_col_sale }};
@IF (lightness({{ settings.coll_col_sale }}) > 70) {
color: #333;
} @else {
color: #fff;
}
display: table;
-moz-transition: opacity 200ms;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
height: 80px;
width: 80px;

0 Likes