Coding help! Make variants swatches bigger

[leoking]

My url is ee3dc1-3.myshopify.com

my swatches are way too small please go on this link to see the variants https://lexxyy.com/products/caspium

I would like it to be quite bigger 

 

[DitalTek]

Hi @leoking ,

How is size do you want to increase for variant?

Will it look like this?

[swym]

Hi @leoking! 

The swatch size can easily be modified by adding some very simple styling to your theme.

Here’s a step-by-step guide to do this:

1. Open the Code Editor for the theme where you would like to apply the modifications as directed in the example screenshot below.

2. Let’s create a new snippet titled "custom-swatch-styles.liquid" to add these modifications. We suggest using a snippet so you can easily remove/include it as needed. Also, adding these changes using this snippet will ensure that they do not get overridden by any styles added before it. The screenshot below shows how to create a new snippet. 

3. Now, inside this file, paste in the below code:  

<style>

   /* FOR DESKTOP SCREENS */

   .product-form__input input[type='radio'] + label.color-swatch.variant-swatch {
      width: 75px;     /* adjust these values as per your requirement */
      height: 75px;    /* adjust these values as per your requirement */
   }

    /* FOR MOBILE DEVICES */

  @media only screen and (max-width: 767px){
     .product-form__input input[type='radio'] + label.color-swatch.variant-swatch {
        width: 75px;   /* adjust these values as per your requirement */
        height: 75px;  /* adjust these values as per your requirement */
     }
  }

</style>

4. Finally, let's render this file inside your theme.liquid file at the bottom just before the closing body (</body>) tag. Screenshot below for reference.

5. Done? Now save the file and try previewing the store, the swatches should look bigger as shown in the screenshots below:

For Desktop: 

For Mobile:  

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions. 

Thank you!

Regards, 

Aaryan from Swym