How to change the size for color swatch in product page

[NOT1]

How to change the size for color swatch circle in product page in DAWN theme 

[Tech_Coding · Accepted solution]

Hello @NOT1 

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 </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
   .product-form__input--swatch .swatch-input__input+.swatch-input__label {
      --swatch-input--size: 1.8rem !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.swatch-input__input+.swatch-input__label {
      --swatch-input--size: 1.5rem !important;
    }
</style>

 Hope this can help you 😍

[topnewyork]

Hi @NOT1 , please share your store URL. Thanks!

[NOT1]

Thanks

[topnewyork · Accepted solution]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media screen and (min-width: 750px) {
   .product-form__input--swatch .swatch-input__input+.swatch-input__label {
      --swatch-input--size: 1.6rem !important;
    }
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[Tech_Coding · Accepted solution]

Hello @NOT1 

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 </body> on theme.liquid
<style>
@media screen and (min-width: 750px) {
   .product-form__input--swatch .swatch-input__input+.swatch-input__label {
      --swatch-input--size: 1.8rem !important;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.swatch-input__input+.swatch-input__label {
      --swatch-input--size: 1.5rem !important;
    }
</style>

 Hope this can help you 😍