Coding help! Make variants swatches bigger

Store Design
, , , ,

Topic summary

A user needs help increasing the size of product variant swatches on their Shopify store, which are currently too small on the product page.

Proposed Solutions:

  • One responder asked for clarification on the desired size and shared a preview image of potentially larger swatches
  • Another provided a detailed step-by-step CSS solution:
    • Create a new snippet file called “custom-swatch-styles.liquid”
    • Add custom CSS styling to increase swatch dimensions
    • Render the snippet in theme.liquid before the closing body tag
    • Includes before/after screenshots showing larger swatches on both desktop and mobile

Status: The thread appears resolved with a working technical solution provided, though the original poster hasn’t confirmed implementation. The solution uses custom CSS to override default swatch sizing without modifying core theme files.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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

IMG_0566.jpeg
IMG_0566.jpeg1170Ă—2421 142 KB

1 Like
2

Hi @leoking ,

How is size do you want to increase for variant?

DitalTek_0-1746630152901.png
DitalTek_0-1746630152901.png868Ă—456 92.2 KB

Will it look like this?

3

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.

swym_0-1746637814380.png
swym_0-1746637814380.png1600Ă—734 116 KB

  1. 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.

swym_1-1746637911319.png
swym_1-1746637911319.png1600Ă—727 84.5 KB

  1. Now, inside this file, paste in the below code:
  1. Finally, let’s render this file inside your theme.liquid file at the bottom just before the closing body () tag. Screenshot below for reference.

swym_2-1746638645595.png
swym_2-1746638645595.png1600Ă—678 222 KB

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

For Desktop:

swym_3-1746638704820.png
swym_3-1746638704820.png1600Ă—692 92.7 KB

For Mobile:

swym_4-1746638736635.png
swym_4-1746638736635.png738Ă—1600 117 KB

I hope this helps!

If my response helped you, please consider giving it a like ( :+1: ) 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