Filter for the website on the Shopify platform and Zoom for products

Technical Specification

Platform: Shopify

Goal: Implement a filter system on the painting catalog page that allows users to quickly find the necessary works based on specified parameters.

Current situation:

Currently, filters are implemented through the Shopify Search & Discovery app, but:

•    filters do not work in collections with more than 1000 products

•    there is a limit on the number of displayed products

•    filters are not displayed in collections if the threshold of 1000+ items is exceeded

Therefore, it is necessary to develop a custom solution or improve the existing one that will work independently of Shopify's limitations.

 Filters to be implemented:

1.    Size

o    Width: from and to (in cm or inches)

o    Height: from and to

Implementation example 

2.    Subject

o    Dropdown list

      Source: subject metafield in the product

3.    Artist

o    Dropdown list

       Source: artist metafield in the product

4.    Price

o    Price range (slider or "from" – "to" fields)

o    Currency: USD

5.    Availability

o    In stock

o    Made to order

         Source: tag or metafield in the product

6.    Materials

o    Dropdown list

       Source: materials metafield in the product

7.    Basis

o    Dropdown list or checkboxes

             Source: basis metafield (e.g., canvas, board, etc.)

8.    Product Type

       Source: standard Shopify field or tag

 Technical requirements:

•    Filters must work without page reload (AJAX)

•    Ability to apply multiple filters simultaneously

•    "Clear filters" button

•    Responsiveness: proper display on mobile devices

•    Support for URL structure with filters to enable sharing links

•    Fast page loading speed, even with a large number of products

Current filter link https://ukrainianvintage.com/collections/autumn-landscape

Технічне завдання

Платформа: Shopify

Мета: Реалізувати систему фільтрів на сторінці каталогу картин, яка дозволить користувачам швидко знаходити необхідні роботи за заданими параметрами.

Поточна ситуація:

На даний момент фільтри реалізовані через додаток Shopify Search & Discovery, однак:

•    фільтри не працюють у колекціях, де понад 1000 товарів

•    існує обмеження по кількості відображених товарів

•    фільтри не відображаються на колекціях, якщо перевищено поріг у 1000+ елементів

У зв'язку з цим необхідно розробити кастомне рішення або вдосконалити наявне, яке буде працювати незалежно від обмежень Shopify.

 Фільтри, які потрібно реалізувати:

1.    Size

o    Width: від і до (в см або дюймах)

o    Height: від і до

Приклад реалізування 

2.    Subject

o    Випадаючий список (dropdown)

      Джерело: метаполе subject у продукті

3.    Artist

o    Випадаючий список

       Джерело: метаполе artist у продукті

4.    Price

o    Діапазон цін (повзунок або поля "від" – "до")

o    Валюта: USD

5.    Availability

o    In stock

o    Made to order

         Джерело: тег або метаполе у продукті

6.    Materials

o    Випадаючий список

         Джерело: метаполе materials у продукті

7.    Basis

o    Випадаючий список або чекбокси

             Джерело: метаполе basis (напр., canvas, board тощо)

8.    Product Type

         Джерело: стандартне поле Shopify або тег

 Технічні вимоги:

•    Фільтри мають працювати без перезавантаження сторінки (AJAX)

•    Можливість застосовувати кілька фільтрів одночасно

•    Кнопка "Очистити фільтри"

•    Адаптивність: коректне відображення на мобільних пристроях

•    Підтримка URL-структури з фільтрами, щоб можна було ділитись посиланнями

•    Швидка швидкість завантаження сторінки, навіть при великій кількості товарів

Посилання на фільтр зараз https://ukrainianvintage.com/collections/autumn-landscape