How to limit color swatches (Impulse Theme) to a certain amount on product/category listing?

Store Design
,

Topic summary

A user sought to limit the number of color swatches displayed on product and category listing pages in the Impulse theme, as too many swatches were appearing.

Initial Response:

  • One suggestion involved modifying the liquid file for product variants in the theme files to add a code limit.

Working Solution Found:
The original poster discovered a CSS-based approach:

  1. Navigate to Shopify Admin → Online Store → Themes → Customize
  2. Access Theme Settings → scroll to Custom CSS section
  3. Add CSS code: .grid-product__colors a:nth-of-type(n+4) { display: none; }
  4. Save changes

This CSS rule hides color swatches beyond a specified number (in this case, after the 3rd swatch), providing a clean solution without modifying theme files directly.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I was wondering how to limit the amount of color swatches shown on the category / product listing page?

Right now it looks like this:

Screen Shot 2020-07-15 at 4.35.29 pm.png
Screen Shot 2020-07-15 at 4.35.29 pm.png209Ă—262 10.6 KB

Would love to hear any hints or help :slightly_smiling_face:

2

Yes you can do it By putting limit in code of product.liquid file for variants in theme files

3

Found a own way!

  1. Log in to your Shopify admin panel.
  2. Click on “Online Store” and then “Themes”.
  3. On the right-hand side, click “Customize” for the theme you want to edit.
  4. In the left-hand side navigation, click “Theme settings”.
  5. Scroll down to the “Custom CSS” section.
  6. Paste the CSS code below in the box.

.grid-product__colors a:nth-of-type(1n+4) {
display: none;
}

Click “Save” at the top of the page to apply the changes.

That’s it!