Add Border Around White Color Swatch (Label Theme)

Solved

Add Border Around White Color Swatch (Label Theme)

Mike213
Excursionist
19 1 10

Currently the white color swatch on a white background just blends in.  I would like to add a border around it or all of them if that's the best fix.   I have searched the forums and tried every code where someone asked a similar questions but none have worked.  I figured its because of the theme I am using. 

Accepted Solution (1)
devcoders
Shopify Partner
990 127 250

This is an accepted solution.

Hello @Mike213 

 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.min.css Add the provided code at the end of the file.

 

.color-swatch+label {
border-color: #000!important;
}
Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 7 (7)

devcoders
Shopify Partner
990 127 250

Hello @Mike213 

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Mike213
Excursionist
19 1 10

here is the link https://cowboysjukejoint.com/

devcoders
Shopify Partner
990 127 250

Hello @Mike213 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.


.color-swatch+label {
border-color: #000;
}

 

devcoders_0-1736918333667.png

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Mike213
Excursionist
19 1 10

This theme doesn't have base.css or style.css .  it does have theme.css so i tried that code there at the bottom but it did not work.   I saw others asking the same question and those were the 3 css's that were suggested to look for. 

devcoders
Shopify Partner
990 127 250

This is an accepted solution.

Hello @Mike213 

 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/theme.min.css Add the provided code at the end of the file.

 

.color-swatch+label {
border-color: #000!important;
}
Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Mike213
Excursionist
19 1 10

Thank you.  That worked.   

devcoders
Shopify Partner
990 127 250

Hello @Mike213 

 

You're very welcome! I'm thrilled to hear that you're pleased with the outcome. Don't hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!