I would like to remove the frame around the size under product page

Solved
Antoninias
Tourist
41 0 3

I would like to remove the frame around the size under product page, my theme is prestige and my website Is www.antoninias.com   if possible I would like the chosen size to appear in opacity difference

Accepted Solution (1)

Accepted Solutions
MarinaPetrovic
Navigator
494 111 156

This is an accepted solution.

Hi @Antoninias , if this is the result you'd like to get:
Screenshot 2022-06-06 at 15.34.10.pngScreenshot 2022-06-06 at 15.34.14.png

 

Open you theme.css file (assets/theme.css), find these elements:

.SizeSwatch.is-active:after, .SizeSwatch__Radio:checked+.SizeSwatch {
    border-color: #1d1d1d;
    color: #1d1d1d;
}
.SizeSwatch {
    display: inline-block;
    text-align: center;
    min-width: 36px;
    padding: 6px 10px;
    border: 1px solid #dddddd;
    color: #2c2c2c;
    cursor: pointer;
}

 

And change them to:

.SizeSwatch.is-active:after, .SizeSwatch__Radio:checked+.SizeSwatch {
    opacity:1;
    color: #1d1d1d;
}
.SizeSwatch {
    display: inline-block;
    text-align: center;
    min-width: 36px;
    padding: 6px 10px;
    opacity:0.5;
    color: #2c2c2c;
    cursor: pointer;
}

Hope this helps!

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 5 (5)
MarinaPetrovic
Navigator
494 111 156

This is an accepted solution.

Hi @Antoninias , if this is the result you'd like to get:
Screenshot 2022-06-06 at 15.34.10.pngScreenshot 2022-06-06 at 15.34.14.png

 

Open you theme.css file (assets/theme.css), find these elements:

.SizeSwatch.is-active:after, .SizeSwatch__Radio:checked+.SizeSwatch {
    border-color: #1d1d1d;
    color: #1d1d1d;
}
.SizeSwatch {
    display: inline-block;
    text-align: center;
    min-width: 36px;
    padding: 6px 10px;
    border: 1px solid #dddddd;
    color: #2c2c2c;
    cursor: pointer;
}

 

And change them to:

.SizeSwatch.is-active:after, .SizeSwatch__Radio:checked+.SizeSwatch {
    opacity:1;
    color: #1d1d1d;
}
.SizeSwatch {
    display: inline-block;
    text-align: center;
    min-width: 36px;
    padding: 6px 10px;
    opacity:0.5;
    color: #2c2c2c;
    cursor: pointer;
}

Hope this helps!

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Antoninias
Tourist
41 0 3

it worked thanks a lot!, do you perhaps know how I can have the text saying only Size without :, because now it says size: 

MarinaPetrovic
Navigator
494 111 156

You're welcome @Antoninias . Glad I could help. 🙂 
Sure, we can change that too. Can you find this element:

<span class="ProductForm__Label">

It's probably in some of your sections or snippets that are called product-form, product, or something related to product. 🙂 
When you find it, please take a screenshot or copy code for that whole element (from <span class="ProductForm__Label"> to the point where you see </span>), so I can take a look. 
There is even a possibility that after that element you'll see wording 'SIZE:', in that case, just delete ':'. 

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Antoninias
Tourist
41 0 3

Dear Marina

 

On further question for you since you already helped me before with this issue. Do you know how I can make all sizes in black and underline on the one that is selected and of now some think that those that are grey are out of stock?

 

Let me know

 

Best

 

Antoninias

Antoninias
Tourist
41 0 3

Dear Marina

 

On further question for you since you already helped me before with this issue. Do you know how I can make all sizes in black and underline on the one that is selected and of now some think that those that are grey are out of stock? attaching an image how I would like it to be. thank you

 

Let me know

 

Best

 

Antoninias