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 Expert
713 232 243

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PM98
Excursionist
46 0 7

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

BSSCommerce-HDL
Shopify Expert
713 232 243

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

devcoders
Shopify Partner
190 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!