How to add size filter to shopify on product page

Store Design
, , ,

Topic summary

A user seeks help adding a size filter for clothing products on their Shopify product page’s left sidebar, admitting they have no coding experience.

Initial Solution Provided:

  • Check if Shopify’s built-in filtering supports size filters via Admin > Navigation > Collection and search filters
  • If unavailable, manually add a custom filter by editing theme code

Technical Implementation Steps:

  1. Navigate to Online Store > Themes > Edit Code
  2. Locate sections/main-product.liquid file
  3. Insert provided HTML markup code to create size checkboxes
  4. Add CSS styling for filter appearance
  5. Implement JavaScript functionality for dynamic filtering

Current Status:
The discussion remains ongoing and unresolved. The original poster is stuck at step 3, unable to identify the exact location within the code file where the HTML markup should be inserted. The helper has offered to provide further simplified guidance and is awaiting clarification about whether the user is working on a product page or collection page in the Focal theme.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

How do I add a size filter for clothes on a product page to show on the left ? would appreciate if someone could give me a hand since I have no idea thank you

1 Like
2

Hey @JGBowie ,

Since you’re new to coding and Shopify development, I’ll break this down step by step for you. You want to add a Size filter on the left side of your product page in the Focal theme. Here’s how you can do it:

  1. Enable Filtering in Shopify

Before adding the filter manually, check if Shopify’s built-in filtering can do the job:

  • Go to Shopify Admin > Online Store > Navigation.

  • Click Collection and search filters.

  • Under Available filters, check if Size is listed.

  • If it’s there, enable it, and Shopify will handle filtering automatically.

If Size is missing, it means Shopify doesn’t recognize it as a filter. In that case, we’ll need to add a custom filter.

  1. Add a Custom Size Filter to the Product Page

Since Focal doesn’t have a built-in size filter on the product page, we can manually add one.

Follow these Steps:

  1. Online Store> themes > Edit Code.

  2. Find sections/main-product.liquid (or similar).

  3. Locate where you want the filter (likely in the sidebar area).

Add the Size Filter Code

Inside main-product.liquid, add this code where you want the filter to appear:


  ### Filter by Size
  
    {% for variant in product.variants %}
      {% assign size = variant.option1 %}
      {% if size %}
        - 
      {% endif %}
    {% endfor %}

This code: Loops through product variants to get sizes Creates checkboxes for each available size

  1. Style the Filter (CSS)

Now, we need to move the filter to the left.

Go to Edit Code > Assets > base.css (or theme.css) and add:

.product-size-filter {
  position: absolute;
  left: 0;
  top: 100px;
  width: 200px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 5px;
}

.product-size-filter ul {
  list-style: none;
  padding: 0;
}

.product-size-filter li {
  margin-bottom: 10px;
}
  1. Add Filtering Functionality (JavaScript)

If you want users to filter sizes dynamically, add this to Edit Code > Assets > theme.js:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".size-filter").forEach(filter => {
    filter.addEventListener("change", function() {
      let selectedSizes = Array.from(document.querySelectorAll(".size-filter:checked"))
                               .map(input => input.value);

      document.querySelectorAll(".product-variant").forEach(variant => {
        variant.style.display = selectedSizes.includes(variant.dataset.size) ? "block" : "none";
      });
    });
  });
});

Let me know if you need help!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

3

Have no idea sorry

4

No worries! I’ll simplify things for you and guide you step by step. Just let me know where you’re stuck, and I’ll break it down even further.

Are you using Shopify’s Focal theme and trying to add a Size filter to the left side of the product page? Or are you working on a collection page (where multiple products are listed)?

Let me know, and I’ll make it super easy! :blush:

Feel free to reach out to me anytime!

5

Stuck on step 3. on where to actually put the code in that code?