Creating a Dimensions filter for product page

[Ducky1]

Hi, I sell art and I want to create a dimensions filter so that on each product page the buyer can search in centimeters for a specific size not small, medium large (which is useless )

With 250 products of all different sizes, there needs to be some easy way to find an artwork that is exactly 152 cm or 100 cm.

Something like a Width "Minimum to Maximum" and Length Minimum to Maximum input fields.

I'm using Dawn or Craft - whichever is easier to get this resolved.

I'm also happy to buy a template with this feature but after going through 50 plus templates I cannot find anything.

Many thanks 

[akshay_bhatt]

Hi @Ducky1 ,

Custom Solution Using JavaScript

1. You can add custom code for a min/max range input on your collection page. This would include:

   • Two input fields (for min and max dimensions) that let users filter based on width/length.
   • Once the filter is applied, it will show only the products that match the selected dimensions.

2. Here's an example of how to implement a min/max input filter:

<input type="number" id="minWidth" placeholder="Min Width (cm)" />
<input type="number" id="maxWidth" placeholder="Max Width (cm)" />
<button onclick="applyFilter()">Apply Filter</button>

<script>
function applyFilter() {
    let minWidth = document.getElementById('minWidth').value;
    let maxWidth = document.getElementById('maxWidth').value;
    // Add custom logic to filter products based on the dimensions entered
}
</script>

You would need to match the dimensions with the metafields for width and length in your products.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[Ducky1]

Thanks Akshay - appreciate the quick and detailed response. I'll have a crack and let you know how I go.

Many thanks

Ducky