Remove Borders in the variant picker (size picker)

Store Design
1

Hi can someone please help me? I want to remove the rectangular border in the variant picker where the sizes are. My website is elliotkohn.co.il. Thank you!

1 Like
2

Hi @Ady2 ,

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
fieldset.variant-picker__option.v-stack.gap-2.no-js\:hidden {
    border: none;
}

Result:

Ribe_Dagandara_0-1689093233444.png
Ribe_Dagandara_0-1689093233444.png510Ă—174 1.3 KB

I hope it help.

1 Like
3

You are awesome!! Thank you very much for your help!!! Do you mind helping me in another issue i have? Bellos the variant picker i have the quantity picker and i dont know why It turns in bold Borders. Can you please help me fix this? Thank you very much!!

4

In the quantity picker, the Borders turns in bold and i dont know why

1 Like
5

Try this.

Same Instruction.

input.quantity-selector__input {
    border: 1px solid gray;
}
button.quantity-selector__button {
    border: 1px solid gray;
}

Result:

Ribe_Dagandara_0-1689095174611.png
Ribe_Dagandara_0-1689095174611.png338Ă—198 1.33 KB

1 Like
6

You are a genius! Thank you very very much for your help!!!

1 Like