Hydrophob.ua — product catalog

About the project

Hydrophob.ua is a multi-page brand catalogue with a separate introductory store-selection page. It presents protection products for cars, clothing and footwear, and building materials, taking visitors from product discovery to ordering. The interface began as a responsive implementation of PSD layouts and was transferred to OpenCart with its custom page structure intact.

Scope of work

The homepage includes a video slider, brand introduction, catalogue overview, promotional media and FAQs. Other pages cover the company, warranty, delivery, contacts, reviews, blog articles and legal documents. Customers have access to a mini basket, favourites and an account with profile and order sections.

The catalogue provides a shared interface for selecting and viewing products, with faceted filters, product switching, an image gallery with a lightbox, and product reviews. A direct product link opens the same interface with that item already selected. On desktop, arrows move thumbnails in groups; mobile product strips display two complete cards. Add-to-basket button states stay in sync with the basket.

A single checkout page replaces OpenCart’s step-by-step process. It collects contact details, delivery and payment choices, and creates the order in the system. Validation returns errors for individual fields, which are highlighted alongside a general notification. In the admin area, repeatable fields allow editing of FAQ questions and answers and the category overview copy.

Technical implementation

The project developed from a section-based PHP site with JSON data into an OpenCart store backed by live catalogue data. Main pages use custom templates with a shared header, footer and mini basket; standard Bootstrap, jQuery and Font Awesome assets are not loaded on these pages. The product page delegates rendering to the catalogue controller, so item selection and detailed viewing share one implementation.

City and branch searches for Nova Poshta use its public API with cached responses. A delivery module holds methods and rates for Nova Poshta, Ukrposhta, Meest, courier delivery and collection. Main product images are generated as 1200-pixel WebP files, while gallery and enlarged views use 1600-pixel images.

SEO and performance

Ukrainian and Russian versions use language-specific URLs, hreflang and redirects from legacy language parameters. The site includes readable search URLs, Open Graph, Twitter metadata, Organization and WebSite structured data, and FAQPage markup in the question section. SEO metadata templates and the overall indexing setting are available in the admin area; the 404 page is marked noindex.

Videos load through IntersectionObserver only when their section enters the viewport. Video reviews are compressed and prepared with faststart, allowing playback to begin without downloading the entire file. Selected large photographs have separate WebP crops for mobile screens. Responsive refinements include larger touch targets and a dedicated phone layout for the customer account.

The result is an OpenCart site with a custom catalogue browsing flow, information pages and order processing. Video-led presentation and large product photographs are combined with editable content and store functionality.