Coding help! Make variants swatches bigger

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.

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

1 Like

Hi @leoking ,

How is size do you want to increase for variant?

Will it look like this?

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.

  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.

  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.

  1. 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 ( :+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