Goal: Limit the number of color swatches shown under each product on a collection page in the Impulse theme.
Current behavior: All variant color swatches display, making the grid look overcrowded.
Desired behavior: Show only 4 swatches per product. Replace the remaining swatches with a “+ (all rest colors)” indicator, as illustrated in the provided screenshots.
Context: Shopify theme customization (Impulse). Relevant to CSS/HTML/JavaScript changes within product card/collection templates. Images are central to understanding the crowded vs. desired compact layout.
Request: Guidance or code approach to implement the 4-swatch cap and “+” overflow indicator.
Status: No solution provided yet; the question remains open with no agreed implementation steps.
Hello,
I would like to include product color swatches under the products in my product collection on the Impulse theme. The problem is that all the colors are appearing which makes the collection look overcrowded. Check the image below:
As you can see too many colors are appearing. I would like only 4 swatches to appear and the rest to be + (all rest colors), like the image below:
How can this be done? Any help would be appreciated!
