Limit number of visible swatches on featured products.

Store Design
, ,
1

Hey guys, I am in the process of researching the best way of implementing this below:

I am trying to limit the number of visible swatches on the featured products.

The customer has products with over 10 colours, and it doesn’t look good on the featured products. I don’t have swatches on collections.

I want to achieve something like this
Screenshot.png

where the number of not-visible swatches are displayed as number

I have tried hiding with CSS but doesn’t work for me.

Could you give me some guidance please and advice ? The theme is Dawn v15

Thanks in advance!

2

Hello @kreed18

Yes, i can help you if you want this type swatches show u can message me.

3

Hey @kreed18 ,

Have you considered using the :nth CSS selector to hide the excess swatches and then leveraging the ::after pseudo-selector to add the number? You can dynamically add the number as an HTML attribute using Liquid and then capture it in CSS using the attr() function within the ::after selector.

If you’d like, please share the link and I’d be happy to inspect and provide the code for you.