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

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

PM98
Excursionist
46 0 7

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

 

Screenshot 2024-05-19 at 12.54.15.png

Replies 4 (4)

BSSCommerce-HDL
Shopify Partner
1134 392 460

Hi @PM98

You can try this code by following these steps:

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

BSSTechVenture_1-1716120829315.png

 

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

BSSTechVenture_2-1716120837125.png

 

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: 

BSSTechVenture_0-1716120717234.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PM98
Excursionist
46 0 7

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

BSSCommerce-HDL
Shopify Partner
1134 392 460

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

devcoders
Shopify Partner
191 31 48

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;
}

devcoders_0-1716121000239.png

 

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!