DEV Community

Rock
Rock

Posted on

Build a Better Kids’ Clothing Store: A Simple JavaScript Size Filter That Improves Shopping Experience

Here’s a quick tip for any parent or developer building a small e-commerce site for kids’ clothes: size filters can make or break the user experience.

When I was working on the product listing page for a clothing collection aimed at active boys, I noticed something. Parents weren't just browsing; they were on a mission. They wanted to filter by size immediately, and they wanted to see durable, comfortable fabrics at a glance.

Here’s a simple, lightweight approach using vanilla JavaScript to create a dynamic filter for a "Boys Clothing" collection. No frameworks, just clean DOM manipulation.

First, assume your HTML has a list of products, each with a data-size attribute:




Graphic Tee



Size: 5-6







Joggers



Size: 7-8
Enter fullscreen mode Exit fullscreen mode

Now, a filter button group:

All Sizes
5-6 Years
7-8 Years
Enter fullscreen mode Exit fullscreen mode

The JavaScript logic is straightforward:

document.querySelectorAll('.size-filter').forEach(button => {
  button.addEventListener('click', function() {
    const selectedSize = this.dataset.size;
    document.querySelectorAll('.product-card').forEach(card => {
      if (selectedSize === 'all' || card.dataset.size === selectedSize) {
        card.style.display = 'block';
      } else {
        card.style.display = 'none';
      }
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

That’s it. In under 20 lines, you give parents instant control. I used this exact pattern while building out a "Boys Clothing" section for a project. It’s perfect for a collection like the one on Frishay, where you want to quickly show school-ready outfits or playtime gear without clutter.

The key takeaway? Keep the code minimal and the user goal clear. Active kids mean active parents; they don’t have time to scroll. Give them filters, and they’ll find that durable jogger set in seconds.https://frishay.com/collections/boys-clothing

Top comments (0)