where to Locate code for colour swatch display at category level

Store Design
, , ,

Topic summary

A user needed to modify color swatch display on collection pages to show fewer swatches on mobile devices. The site currently displays approximately 6 color options before showing a “more” message, but they wanted to reduce this to 3 for better mobile styling.

Solution Found:

  • The relevant code was located in Snippets -> grid-items__swatch-options.liquid
  • The limit value was changed from 6 to 3 in the counter condition: {% if counter < 3 %}

Technical Context:

  • The color swatches use a limit parameter to control how many options display before truncation
  • The modification specifically targets mobile device display while maintaining desktop functionality
  • Issue resolved by adjusting the Liquid template code that controls swatch rendering at the collection level
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi i wonder if anyone has any idea of where to start to find this in the code so we can change - basically its the colour swatches at category / collection level https://dtf2u.co.uk/collections/hoodies as you can see below it shows around 6 colours then a message if more - due to styling difference issues on a mobile we are trying to change it to display 3 at category level - does anyone have any idea for us please thanks where to start looking

thanks

Screenshot 2025-04-24 133705.jpg
Screenshot 2025-04-24 133705.jpg820×517 40.9 KB

2

Actually there is used limit to show the color swatches. This need to take a look in your theme to decrease it’s limit to 3 on just mobile devices.

3

thanks for all your replies it was in

Snippets → grid-items__swatch-options.liquid - 6 now changed to 3

{%- for value in option.values -%} {% if counter < 3 %}