Adjust Design of Sizing and Color for Products

Store Design
,
1

Hi,

How can I remove the square boxes around the sizes and color options?

https://theothelabel.com/collections/all-clothing/products/echo-pearly-shirt

2

Hi @JoeyRoo , go to product.css and add the following code :

.variations .product-form__input--block input[type=radio]+label {
    box-shadow: none !important;
}
3

Hello @JoeyRoo

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product .variations .product-form__input--block input[type=radio]+label { box-shadow: unset !important; }
4

Thanks. This removed the boxes from the sizes. Is there a way to also remove the boxes from the Color options?

5

Hi @JoeyRoo

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.product .variations .product-form__input--color input[type=radio]+label { width: 48px; height: 48px; display: inline-flex; text-indent: -9999em; position: relative; margin-left: -1px; color: transparent; cursor: pointer; z-index: 4; box-shadow: unset !important; } .product .variations .product-form__input--color input[type=radio]:checked+label { z-index: 5; box-shadow: unset !important; }

If my both solution worked then please like and accept solution.

6

Perfect! Thank you so much