How do I remove the border around the variant picker on product page?

[PM98]

How do I remove the border around the variant picker on product page? (Dawn Theme)

[BSSCommerce-HDL]

Hi @PM98, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css,  theme.css or styles.css 

Step 3: Insert the below code at the bottom of the file -> Save

variant-selects .select:after {
  box-shadow: none !important;
}

variant-selects .select:hover:after {
  box-shadow: none !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[PM98]

That works, however when I select the variant picker the border comes back.

[BSSCommerce-HDL]

Hi @PM98, Pls insert this code to your file css: 

variant-selects .select__select:focus {
   box-shadow: none !important;
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[devcoders]

Hi @PM98 

Go to Online Store, then Theme, and click on Edit code.
Locate the file assets/base.css, and paste the code provided below at the end of the file.

.product-form__input.product-form__input--dropdown ::after {
box-shadow: none!important;.field:
after, .select:after, .customer .field:after, .customer select:after, .localization-form__select:after;
}