Online store · 2024

Skargart — an online shop for a manufacturer of standalone diesel heaters

WooCommerce-магазин виробника з лендинг-style PDP, WOOF-фільтром і 4-кроковою діаграмою принципу роботи

I want a project like this Open the site

Skargart is a Ukrainian online shop and the official channel for SKÄRGÅRT, a manufacturer of standalone diesel heaters, with a warehouse and pickup point in Vyshneve (Kyiv region, Promyslova St., 10). The site runs on WordPress with a custom skargart theme, WooCommerce 9.6, and WPML/WC-Multilingual in the infrastructure — but every product page isn’t the default WC product layout, it’s a full landing page with a 4-step diagram of how the heater works, a technical illustration of air/fuel/vapour flows, a power-parameters section, and a repeated CTA block.

A hero with a 6-channel segment switcher — one product, six contexts

The first screen is a slick carousel with 6 background scenes, each for its own use-case segment: electric vehicles, buses, trucks, motorhomes, dugouts and trenches, heavy equipment. On the right is a vertical navigation list of the same 6 items, highlighting the active segment and letting you switch scenes manually. The persistent H1, “A standalone diesel heater — a universal comfort solution”, and the blue “To the shop” CTA don’t change — only the background scene does. This is a strong product-marketing device: the product is physically one and the same, but customer recognition differs — a heavy-equipment operator sees an excavator, a motorhome owner sees a caravan, a soldier sees a dugout. All 6 land on the exact same PDP.

The header holds the SKÄRGÅRT logo with its diacritics (a signature stylisation), 7 menu items (Catalogue / Promotions / Delivery / Partnership / Contacts / About us / Blog), a WPML language switcher, two messenger channels (Telegram and WhatsApp as round coloured icons), and my-account and cart icons. The lead channel isn’t a phone number in the header, it’s the messengers — aimed at a B2B audience of truckers and drivers who are more used to messaging than calling.

Two category cards instead of a default WC mega-nav

Instead of a standard /shop/ link or a dropdown mega-menu, right after the hero come two enormous black cards, “Heaters” and “Parts”, with photo models of the products. This is a hard binary fork: the customer is either buying the heater itself (a new buyer) or looking for a part for one they already own (a repeat customer). The path is short: / → click a card → /product-category/obigrivachi/ or /product-category/zapchastyny/. Below that is a tab switcher with the same two categories, showing the first 4 products of each category right on the home page.

Two black cards, 'Heaters' and 'Parts', with product photos, each opening its own category-archive page on click — The signature black background of the cards contrasts with the white header and the light background of the rest of the page — creating a visual anchor precisely on the two category decisions. Below is a “Heaters / Parts” tab switcher with an active blue underline on the selected tab, duplicating the card navigation for anyone scrolling further.

A catalogue tab with a product-card grid — no overlay prices, with voltage/power badges

The tab section shows 4 product cards in a row: Universal 5 kW (4,990 UAH), Universal 2 kW (4,990 UAH), CUBE 5 kW 12+24+220V (6,790 UAH), BOX 5 kW 12+24+220V (6,790 UAH). Each card carries two technical badges: “12 volts, 24 volts” in blue and “5 kW” or “2 kW” in black. The CUBE/BOX cards additionally show an “Out of stock” tag — these models exist in the catalogue but not in stock, which is honest and doesn’t mask availability.

4 product cards in a row — Skargart 5kW, 2kW, CUBE, BOX — with voltage/power badges, prices 4,990 UAH/6,790 UAH and an add-to-cart button — The CUBE and BOX model photos carry the sub-brand name “LF Bros” — an OEM partner manufacturing this form factor, sold by Skargart under its own brand. The pricing strategy is transparent: base 5/2 kW models at 4,990 UAH (a low barrier to entry) and a 5 kW model with 220V support at 6,790 UAH (a premium for people with a 220V outlet in a garage or a dugout with a generator).

“Warmth anywhere” — 4 USP cards with a 3D heater render

The “Warmth anywhere” section is black, with 4 USP cards on the left and a large 3D render of the heater with coloured flow arrows on the right (red for hot vapours, light blue for cold air). The USPs are chosen to close four different objections: Powerful (because the customer worries whether it will heat a large space), Universal (12+24V, any infrastructure), Temperature under control (electronic control, not analogue), Reliable (diesel vs gas — the safest fuel).

'Warmth anywhere' section — an H2, a lead, 4 USP cards with icons, and a 3D heater render with coloured flow arrows for air and vapour — The 3D render with coloured arrows isn’t a stock promo image, it’s a purpose-made technical illustration showing where the intake air goes, where the exhaust goes and where the heat exchanger sits. The same illustration style repeats on single-product pages in the “How the heater works” block, forming a recognisable brand visual language.

“Fits any need” — a 6-card photo grid of segments

The same 6-segment logic from the hero repeats here as a full 3×2 grid block with real photos for each scenario: an electric car at a charging station, a row of yellow buses in a depot, a Volvo truck on a mountain road, a camper van in a field, a dugout shelter, an excavator at a quarry. Each card carries the segment name and 2-3 lines of a value proposition specific to that context (for example, for the electric car — “preserves battery range”, for dugouts — “heating without a power grid, improving comfort and combat readiness of personnel”).

A 6-card use-case grid — Electric car / Buses / Trucks / Motorhome / Dugouts and trenches / Heavy equipment — with real photos and a short description — This block deliberately repeats the hero: a user scrolling past the first screen wants to see the detail the hero only hinted at. The hero is a cinematic scene with one caption, this is a catalogue of segments with a concrete value proposition. It’s the same “teaser → proof” pattern that works well in B2C niches where the product has broad applicability.

The single-product page as a full landing page with a 4-step diagram of how it works

A single product page (for instance /product/skargart-universalniy/) isn’t the default WC PDP. It’s an 8-section landing page: a sticky top bar with anchor navigation (About the product / Specifications / Reviews) + price + “Buy”; a vertical slick gallery with 7 photos in a Fancybox lightbox; the main block with H1, price, availability, two CTAs (“Buy” and “Buy in one click”) and a quantity selector; 4 USP tags; delivery info (Pickup / Nova Poshta); the SKU (SK_5.0); then a “How the heater works” section with a 4-step vertical process (01 Fuel supply → 02 Mixing with air → 03 Combustion → 04 Heat transfer) and a technical illustration of the flows.

A sticky top product bar with anchor navigation and CTA, a vertical slick gallery slider, the main product card with H1, price, 4 USPs and delivery info — A sticky top bar (About the product / Specifications / Reviews + price + “Buy”) is a rare solution for WP/WC, more often seen in native e-commerce SPAs. Here it’s built with plain JS+CSS on top of the standard WC structure. The “Buy in one click” button is a separate short-checkout pattern (a modal with a single phone field) that bypasses the multi-step WC checkout flow for impulse purchases.

A 4-step vertical diagram 'How the heater works' with numbered circles 01-04 and a technical illustration of flows: Air/Diesel → combustion chamber → Vapours — The 4-step process with a vertical line between the circles isn’t a text list, it’s an interactive diagram where each step lights up on scroll or click. The technical illustration on the right shows the actual construction with labelled flows (Air — light blue, Diesel — yellow, Vapours — red), which is far more valuable to a B2B audience than a lifestyle photo of a cosy interior.

The /shop/ catalogue with a WOOF filter — 4 attribute groups instead of “variations”

The /shop/ catalogue is a WooCommerce archive with a sidebar filter built on WOOF (WooCommerce Products Filter / Husky). Four attribute groups: Product categories (Parts / Heaters), Power (2 kW / 5 kW), Voltage (12 / 220 / 24 volts), Portable (No / Yes). The catalogue spans 3 pages of products — besides heaters there’s a whole line of parts: mufflers, main wiring harnesses, remote controls, Kyocera ceramic glow plugs, fuel lines, gaskets, and compressor motors of different power and voltage.

The /shop/ catalogue with a sidebar WOOF filter (Categories/Power/Voltage/Portable) and a 4-column product grid with voltage/power badges — WOOF instead of standard WC variations is a strategic decision: with standard variations, a product like “Skargart compressor motor” would have 4 variations (12V×2kW, 12V×5kW, 24V×2kW, 24V×5kW) hidden inside a dropdown and not indexed separately. Here, every combination is a separate product with its own URL and its own title, giving 4× more SEO pages for long-tail queries (“12v 5kw skargart motor”).

Cart flow — a confirmation modal → a skinny /cart/ → a 2-step /checkout/ with 3 carriers and an NP branch picker

Clicking “Buy” on a product page doesn’t trigger a redirect to the cart, nor does the default WC bulky woocommerce-message notice with a “View cart” link appear. Instead, a centred modal pops up mid-screen with a status-avatar checkmark, the heading “Added to cart”, the current item (a photo thumbnail + name + price + qty with ± buttons) and an × close button. This is a deliberate UX choice: confirm the action, give one more interaction point with the item (you can change the qty right in the modal), but don’t interrupt the current browsing context. A user who’s added a 5kW heater and is about to add a glow plug isn’t forced through “Back / next / return to catalogue” for a second add.

Skargart product page with a centred modal: a round blue checkmark, the title 'Added to cart', the item Standalone diesel heater 5 kW universal (12+24V) with a photo thumbnail, price 4,990 UAH and qty -/1/+ inline, an × close button, a dimmed PDP behind it with a touch gallery on the left and a black cart icon in the header — An interesting nuance — this modal has no “Go to cart” or “Checkout” CTA button. Only the “×” to close and the qty buttons. The alternative (standard in Magento/Shopify-style modals) is to always have a “Continue Shopping / View Cart” pair. Here it’s deliberate: the team understands that after “Added to cart”, the user will decide on their own via the header cart icon whether to keep browsing or go to checkout — the modal only confirms and doesn’t push. This is “positive affirmation without commercial pressure”, a device that works for a category with a slow consideration cycle: a standalone heater costs 4,990 UAH and is a decision made “after 2-3 searches”, not a 99-UAH impulse buy.

The /cart/ page isn’t the WC default with a 6-column table (image / product / price / quantity / subtotal / remove), it’s a radically skinny single row: a photo thumbnail on the left, then the name above, price and a qty control in one row below, then blank white space, then a close “×” button in the top-right corner of the card. No “Update cart”, no coupon field in the cart itself (moved to checkout as a collapsed accordion), no “Cross-sells” block with “you might also like” suggestions. On the right is a sticky “Your cart” block with “Subtotal”, “Total due”, and a CTA “Place order” + a small line “I accept the Public offer” with a link.

Skargart /cart/ at 1440 viewport: a massive sans-serif 'Cart' heading, below it one white card with a heater photo thumbnail on the left, the name Standalone diesel heater 5 kW universal (12+24V), price 4,990 UAH and qty -/1/+ in one row below, an × close icon at top right; a sticky right card 'Your cart' with Subtotal 4,990 UAH, Total due 4,990 UAH, a blue CTA 'Place order' and an offer disclaimer — What’s *missing* here matters more than what’s present. No “Cross-sells” block (the typical WC “add an exhaust pipe for 260 UAH”). No “Estimate shipping” field with a postcode or country selector. No “Add a note to your order” textarea. This is *trimming* the interface down to what’s actually needed to decide “am I buying this or not”: I see what’s in the cart, how much it costs, and I move on. A cross-sells block might seem “profitable” for a heater manufacturer — adding spare parts to bump the receipt to 5,000 UAH. But every B2C test shows: on high-consideration items, cross-sells on the cart page lower conversion (the customer reads, gets distracted, leaves to “crunch the numbers”) rather than raising AOV. Parts are upsold after the purchase instead, via a follow-up email or a blog push.

The /checkout/ page is a 2-step accordion (01 General / 02 Payment) with an “Information” block on the first step: Email*, First name*, Last name*, Phone number + a full-width “Sign in with Google” button for returning customers. Next — Delivery method with 3 radio options: Nova Poshta (default), Ukrposhta, Pickup (Promyslova St., 10, Vyshneve). Below the method is a Delivery address block with a smart dropdown for “to a branch” (a toggle to switch to “to an address” mode with Nova Poshta courier delivery), “Choose a city” with server-side autocomplete from the NP API, “Choose a branch” loading a list based on the chosen city. On the right is a sticky “Your order” block with the item (photo + name + price + qty), an expandable “Have a coupon? Click to use it” link, lines for “Subtotal”, “Delivery: as per carrier rates”, “Total due”, and a disabled CTA “Place order” (activated once the required fields are filled in).

Skargart /checkout/ at 1440 viewport: a 2-step accordion with tab '01 General' active (blue background) and '02 Payment' inactive; an Information block with Email/First name/Last name/Phone number fields + Sign in with Google; Delivery method with 3 radios Nova Poshta checked/Ukrposhta/Pickup; Delivery address with 3 dropdowns ('to a branch' / Choose a city / Choose a branch); a sticky 'Your order' card on the right with the item, a Have a coupon link, Subtotal 4,990 and a disabled CTA Place order — The smart drill-down in the “to a branch” dropdown signals that this is a genuine **Nova Poshta API** integration, not a static select with 25 regions. The “to a branch” / “to an address” toggle instantly changes the structure of the fields below: for a branch — City + Branch, for an address — City + Street + Building + Apartment + coordinate autocomplete from a map API. This isn’t a cheap WP plugin with a 3-year-old changelog, it’s a modern `nova-poshta-shipping-wc`-style integration with server-side caching of API results for 24 hours (otherwise it’s 1 request per key + rate limits). The disabled state of the “Place order” CTA is a deliberate UX signal: “you see the button, you see why it’s inactive, you don’t click into a dead end”. It’s only enabled once Email + name + phone + address are filled in — a clean validation flow.

B2B channels — separate pages for dealers and repair shops with their own CF7 forms

Besides the retail flow (PDP → cart → checkout), the site has two separate B2B pages: /spivpraczya-dlya-dyleriv/ and /spivpraczya-dlya-sto/. Each has its own hero with a contextual background photo (a premium car showroom for dealers — a nod to the seriousness of the partnership), a 4-card info section (Working hours / Phone / Email / Address), and a separate Contact Form 7 with fields Name / Phone number / E-mail / Message and a “Get in touch” button (with jQuery Inputmask for correct phone formatting).

Hero of the 'Partnership for dealers' B2B page — a background photo of a premium car showroom, an H1, a 4-card contact section — Splitting into “dealers” and “repair shops” isn’t just two duplicate contact pages, it’s two different B2B scenarios: a dealer buys wholesale and resells under their own brand, a repair shop buys to install for customers as part of a service. Each form carries a separate context in its meta fields, letting a manager immediately understand the lead type.

Delivery, payment, FAQ — three synchronised interfaces on every page

On every page (home, single-product, dealers, repair shops, contacts, about us), the bottom part repeats three standard blocks: a 4-icon nav (FAQ / Delivery / Payment / Returns), then an 8-question FAQ accordion (How it works / How long it runs / Off the battery / While moving / What size / Warranty / Fuel consumption / What’s included), and a 3-card delivery-methods section (Nova Poshta 1-2 days / Pickup from Vyshneve / Courier in Kyiv).

An 8-question FAQ accordion numbered 01-08, each question in a minimalist row with a light-grey expandable answer — Numbering 01-08 with a leading zero, in a monospace font for the numbers, is an editorial choice that visually separates the “easy” questions (“How does it work?”) from the “hard” technical ones (“How do you calculate runtime off the battery?”), like sections in a magazine. The FAQ text is identical on every page — an SEO hack: one piece of content gets indexed 8+ times, soaking up every long-tail query variation.

Contacts — a 4-pill grid + a Google Maps embed over an industrial zone + a 4-field lead form with a reused FAQ block

The /kontakty/ page is built as one screen, one action: a massive H1 “Contacts”, below it a horizontal grid of 4 yellow pill cards (Working hours: Mon-Fri 9:00 AM-9:00 PM, Phone: +38 093 802 7133, Email: support@skargart.com.ua, Address: Ukraine, Kyiv region, Vyshneve, Promyslova St., 10), against a dimmed photo of a disassembled heater cutaway. Below that is a full-width Google Maps embed with a pin dropped on Vyshneve’s industrial zone, where nearby you can see Kyiv-EVO (Padlon Group blvd.), Krosna for clothing, LLC T. Vyshneve — this isn’t a cosmetic map, it’s a signal of a physically real production facility in an industrial cluster, not a coworking office with a brand board.

Skargart /kontakty/ full page: H1 Contacts, then 4 yellow pill cards in one row (Working hours Mon-Fri 9:00 AM-9:00 PM / Phone +38 093 802 7133 / Email support@skargart.com.ua / Address Ukraine Kyiv region city Vyshneve Promyslova St. 10) over a dimmed photo of a heater cutaway; below — a Google Maps embed with a pin on Vyshneve's industrial zone; then a dark-blue section 'Leave a request to get in touch' with a 4-field form (Name / Phone number + E-mail in one row / Message / Get in touch); a reused 4-tab FAQ/Delivery/Payment/Returns block + an 8-question FAQ accordion numbered 01-08 — The most interesting design choice is the *reuse* of the 4-tab FAQ / Delivery / Payment / Returns block and the 8-question FAQ accordion right at the bottom of the Contacts page. On most sites, contacts means “here’s our address, here’s the phone, goodbye”, with a minimum of content. Here it’s the opposite: if a user has scrolled all the way to Contacts, they already have a question. Instead of pushing them into Telegram or calling a manager, the interface immediately offers “maybe you’ll find the answer in the same 8 FAQs as on the home page”. This lowers the load on operator time while also boosting SEO metrics (one more long-content page indexed by Google with an identical Q&A block). The lead form in the middle is a *fallback*, not the primary path: look in the FAQ first, and only leave a request if you can’t find an answer there.

Mobile — a portrait layout with a sticky bottom nav like a native app

The mobile version (390×844, an iPhone format) is built for one-handed scrolling: a full-screen hero cropped for portrait, two stacked category cards below it, and — at the bottom of the screen — a sticky bottom nav with four icons: Home / Catalogue / Cart / My account. This is a clear borrowed pattern from native iOS/Android e-commerce apps (Rozetka, Prom, OLX mobile), significantly cutting the scroll time to checkout. The header on mobile shrinks down to the logo + two messenger icons + a burger menu.

“About us” — positioning the manufacturer with international certification

The /pro-nas/ page is built as a corporate positioning message: the SKÄRGÅRT logo with its signature diacritics, the tagline “WHERE COMFORT BEGINS”, a muted indoor background scene (a warehouse), a paragraph about the direct channel from the factory, 3 USP icons (Certified products / Maximum safety / Durability and reliability), and the key H1 “Skargart is the first brand in the pre-heater industry to hold International Certification”. Next is an H2, “Technology is changing the future, and innovation drives us forward”, with a paragraph on patented technologies (a dual thermostat, generating electricity by splitting electrical charges in a water flow).

The tagline “WHERE COMFORT BEGINS” is in English despite the Ukrainian market — positioning the brand as “global” and ready for export markets (the WPML infrastructure is in place, though translations aren’t activated yet). This is groundwork for a future EN/PL localisation, once the company moves into the EU or international B2B.

Stack, integrations, technical decisions

WordPress 6.x + a custom skargart theme (no page builder, no Elementor) — full control over the markup, the sticky bars and the product landing pages, with no extra layer on top.
WooCommerce 9.6.4 — the main e-commerce engine, with a custom single-product.php rewritten for the landing-page format.
WOOF (WooCommerce Products Filter) 1.3.6.5 — a sidebar filter on the shop archive with categories, power, voltage, and portability.
WPML 4.x + WooCommerce Multilingual 5.3.9 — the multilingual infrastructure is in place (sitepress, a language cookie), currently only Ukrainian is active; it’s ready for EN/PL/RU without switching plugins.
Contact Form 7 6.0.4 — three form instances: a footer newsletter (a single email field), dealer leads at /spivpraczya-dlya-dyleriv/ (4 fields), repair-shop leads at /spivpraczya-dlya-sto/.
Slick 1.8.1 — the slick carousel for the hero (6 background scenes with autoplay), the product gallery (7 photos with vertical thumbs), related products on the PDP, the category tab switcher.
Fancybox 3.5.7 — a lightbox for product images (clicking the main photo opens a full-screen viewer navigating across 7 frames).
jQuery 3.7.1 + jQuery Migrate 3.4.1 + jQuery BlockUI — the standard WC stack for DOM manipulation (cart fragments, AJAX add-to-cart).
jQuery Inputmask 5.0.7 — a phone mask for CF7 forms (the format +38 (___) ___-__-__).
Seraphinite Accelerator — page caching + CSS/JS minification (inlines used CSS in a <style> tag as the first payload, lazy-loads the rest); visible from the cache/seraphinite-accelerator/s/m/d/css/... prefix in the CSS URLs.
Cookie Notice + Google Analytics 4 (G-M0CNJR82K2 via MonsterInsights Premium 10.0.3) — GDPR consent and cart-event tracking.
Telegram + WhatsApp deep links (#tg, #whatsapp in the header and footer) — the main lead channel, with no classic “request a callback” form. Configured in JS — a click handler swaps the href for tg://resolve?domain=... and wa.me/....

Summary

Skargart is a WooCommerce shop that visually and functionally behaves like an 8-section landing page on every PDP, not a standard WC product. The skargart theme has rewritten the single-product template beyond recognition: a sticky anchor bar, a 4-step diagram of how the heater works with a technical illustration, a 7-photo gallery with Fancybox, a “Buy in one click” option alongside a full cart flow. The catalogue uses WOOF instead of WC variations — every voltage×power combination is a separate, indexed SEO product. The lead channels are Telegram and WhatsApp in the header and footer instead of a callback form, with separate dealer and repair-shop pages for the B2B segment. The site is export-ready (WPML + WC-Multilingual in the stack), the brand positions itself as “the first brand of pre-heaters with international certification” — and the whole UX architecture is built to serve a solo long-haul trucker (PDP→cart→Nova Poshta), a soldier ordering for a dugout (PDP→Telegram→a bulk consultation), and a dealer/repair shop (a separate B2B page with its own CF7 form) all at the same time.