Pancer.BG — from a static catalog to a live ecommerce system
Technologies · React + SSR · Firebase · Vercel · Redis · UI/UX · SEO/GEO · Content · Automation
Tags · 15+ години домейн · 800+ продукта · Live ecommerce · www.pancer.bg
От статичен каталог, който създадох преди повече от 15 години, до live ecommerce платформа през 2026 г.
Реален бизнес с домейн над 15 години. Изградих технологичния, продуктовия и визуалния слой — storefront, операции, съдържание и discoverability — с AI като работен партньор без Figma и без прототипи. Днес магазинът е live на www.pancer.bg с 800+ продукта и продължава да се развива.
- 15+ години история на домейна
- 800+ продукта
- Live ecommerce операции
- Каноничен www.pancer.bg
Project snapshot
Role
Технологичен, продуктов и визуален слой — архитектура, UI/UX, ребрандинг, съдържание, медия, SEO/GEO, автоматизации
Тип
Custom ecommerce платформа за реален бизнес + пълна поддръжка
Catalog
800+ продукта · марки · категории · сезонни / нови / оферти
Status
Live · www.pancer.bg
React + SSR · Firebase · Vercel · Redis · Stripe
Централна система
PANCER.BG
Live ecommerce система
Продукт
Design
Technologies
Растеж / SEO
Бизнес
Контекст и доверие
Предишният етап беше статичен HTML каталог: марки, категории, продуктови страници и поръчки по телефон. За времето си това беше честно и работещо решение. Хората намираха продуктите. Екипът поемаше разговора. Домейнът натрупваше история.
Промяната дойде от нови нужди, не от „лош стар код“. Catalogът растеше. Клиентите очакваха online покупка. Бизнесът имаше нужда от централизирани данни, количка и checkout, ясна SEO архитектура и съдържание, което търсачките и AI системите могат да разберат последователно.
Ограниченията на стария етап не бяха „HTML не се индексира“. Бяха ръчен URL модел, повтарящ се markup, много H1 в catalog pages и липса на structured ecommerce product layer — плюс липсата на централизирана data model логика и validation при запис.
Първата версия на husqvarna.pancer.bg беше работещ статичен каталог, който сам създадох. Това не е rescue на чужд legacy проект. Екипът даде доверие и свобода да се изгради цялостен продуктов и технически слой — с базова посока, не с ред по ред спецификация.
How I Work?
Нужда
Реални проблеми на каталог, операции и customer journey — не „по-красив екран“.
Design
UX/UI, информационна йерархия, бранд и съдържание като една система.
Система
Storefront, централни продуктови данни, checkout и оперативен dashboard.
Проверка
Smoke тестове, data validation и проверки какво реално е live.
Итерация
Post-launch корекции и подобрения върху работеща платформа.
Storefront и клиентски път
Днес публичният каталог обединява 800+ продукта в структура от марки и категории — и продължава да се обновява. Има потоци за сезонни продукти, нови продукти, оферти, ТОП оферта, намаления и брошури. Клиентът може да търси, да филтрира, да листа с paging и Load More, и да се връща назад без да губи scroll контекста.
Клиентският път покрива регистрация и вход с имейл, Google, Facebook и Apple; профил; адреси; любими; отзиви; кошница и checkout. Има и бърза поръчка: след разговор с клиента екипът може да довърши заявката, без клиентът да минава през целия UI сам. При смяна на статус тръгват автоматични имейли и browser notifications.
Цените, доставката и спестяванията се показват динамично от централния каталог. През същия път вече минават реални поръчки — не само тестови сценарии.
Слоеве на системата
Кратки блокове за storefront, клиентски път, операции, discoverability и бранд — без tech dump в hero.
Не просто каталог, а продукт
800+ продукта в марки и категории, с търсене, филтри, paging и Load More — и запазен scroll контекст при back. Информацията идва от централен каталог, не от ръчно копирани HTML страници.
Клиентски път
- Профил, адреси, любими, отзиви
- Кошница и checkout
- Бърза поръчка след разговор с екипа
- Statusи с имейли и browser notifications
Оперативен контролен център
Екипът управлява продукти, поръчки, отзиви, marketing известия и секции на началната страница — с по-малко зависимост от ръчна HTML поддръжка за всяка промяна в онлайн магазина.
Откриваемост
- 960+ страници, готови за търсачки и AI
- Откриваемостта е проверена преди пускане
- Структурирани данни, AI карта и видео страница
- SEO видимостта е запазена при миграцията
Бранд и съдържание като инфраструктура
Ребрандинг, hero кадри, blog covers, продуктови изображения и branding видеа — обработени като част от платформата. Blogът и статиите към категории/продукти са жив актив за discovery, не отделен „маркетинг сайт“.
Dashboard — система, която екипът може да управлява
Зад публичния сайт стои оперативен контролен център. Екипът работи с продукти, поръчки, отзиви, методи на плащане, marketing известия, секции на началната страница и история на плащания. Добавянето или редакцията на марка, категория и продукт е част от ежедневния поток.
Смисълът е директен: съдържанието и операциите имат по-малко зависимост от ръчна HTML поддръжка за всяка промяна в онлайн магазина. Достъпът е разделен ясно — клиентите управляват личния си профил, а екипът работи в административния слой.
Бранд и съдържание
Платформата продава през доверие. Доверието идва и от това, което човекът вижда преди „Добави в кошницата“.
Изградих блог и детайлни статии към категории и продукти. Изработих и обработих ребрандинга, hero изображенията, blog covers, продуктовите изображения, рекламните и branding видеата. Продуктите и статиите са качени и поддържани лично от мен.
AI ускоряваше итерациите около структура и код като работен партньор; визуалният език, подборът на кадър и тонът на съдържанието оставаха моя отговорност.
Visual materials
Автоматизация и откриваемост
В онлайн магазина клиентът може да ползва bot/wizard асистент за препоръки при поискване — помощ при избор, вързана към каталога. Около магазина върви marketing слой за кампании и съобщения, плюс подаване към search/merchant екосистеми като обща основа за откриваемост.
SEO/GEO/AI-discovery: SSR-видима продуктова информация, структурирани данни, llms.txt, AI sitemap, публична /videos страница и VideoObject. Това не са продажбени метрики — показват, че системата става по-четима за търсачки и AI системи.
- 960+ страници, готови за търсачки и AI
- Откриваемостта е проверена преди пускане
- SEO видимостта е запазена при миграцията
Надеждност и domain миграция
Добавих server-side rendering и сървърно кеширане — включително Redis — така че ключовата продуктова информация да е налична още при първото зареждане. Workflow-ът Git → Vercel → Firebase държи промените проследими.
Миграцията към каноничния www.pancer.bg мина през phased launch и 301 redirects в съгласуван пакет, за да се запази 15+ годишната история на домейна. Днес каноничният дом е активен.
SEO видимостта е запазена при преминаването — без установени регресии след миграцията.
Какво означава да поддържаш жива система
Четирите карти не са списък с бъгове. Те показват ownership след launch — в среда с клиенти и поръчки.
Грешни данни за батерия/гориво
Problem · Девет продукта показваха неточна информация за комплектацията.
Action · Данните бяха поправени; добавени са допълнителни проверки при поддръжка на каталога.
Why it matters · Клиентът решава по вярна информация; екипът намалява шанса грешката да се повтори.
Подсилен operational контрол около checkout и поръчките
Problem · В среда с реални клиенти критичният момент на плащане трябва да остане стабилен.
Action · По-ясен operational контрол около checkout и поръчките за предвидим поток.
Why it matters · Клиентът плаща спокойно; екипът разчита на предвидими поръчки.
Натоварване в dashboard
Problem · При тежка ежедневна работа контролният център се забавяше.
Action · Оптимизация на заявките и кеширането за ежедневна работа на екипа.
Why it matters · Операциите по продукти и поръчки остават ползваеми всеки ден.
Стара страница след deploy
Problem · След пускане част от посетителите все още можеха да виждат предишна версия.
Action · По-ясни проверки след deploy какво реално е live.
Why it matters · По-малко фалшиви инциденти; по-ясен статус за екипа и клиента.
Тест, който продължава
Получих доверие да изградя технологичния и визуалния слой на реален бизнес. С AI като работен партньор без Figma и без прототипи превърнах 15-годишен статичен каталог в жива ecommerce система, която екипът може да управлява, а клиентите могат да използват уверено.
Следващият слой вече се строи върху работеща система.
Слоеве на компетентност
Ecommerce архитектура
Storefront върху централни продуктови данни — не page-per-edit HTML.
UX / UI
Информационна йерархия, listing/PDP потоци и ясен клиентски път.
Операции
Dashboard за продукти, поръчки, отзиви и съдържателни секции.
Бранд и съдържание
Визуална система, медия и editorial слой към каталога.
SEO / GEO
SSR-видима информация, structured data и AI-discovery surfaces.
Арт дирекция
madebyvladonacev
UI/UX Design
Vlado Nacev
Graphic Design
Vlado Nacev
Development (front-end + back-end)
Vlado Nacev + AI
Research
Vlado Nacev
Проектен мениджмънт
Vlado Nacev
SEO оптимизация
Vlado Nacev
Техническа поддръжка
Vlado Nacev
Frequently Asked Questions
What separates a real online store from a static product catalog?
A static catalog shows products and often relies on phone orders. A real online store adds centralized product data, cart and checkout, a customer journey, and operational control for the team. Storefront, filters, and orders then work as one system — not as hand-maintained HTML pages. That is the difference between a browse-only showcase and a daily tool for sales and operations.
When does SSR make sense for an ecommerce store?
SSR makes sense when key product information should be available on the first load — for customers, search engines, and AI systems that read the page. With a large catalog, that makes content more predictable and more readable beyond the UI alone. It is not a goal by itself; it helps when discoverability and a stable first screen are part of the business requirements.
How are product data maintained after an online store launches?
After launch, the catalog should live in a central product layer and an operational dashboard — not through hand-copied pages. The team adds and edits brands, categories, and products in the daily flow. The aim is less dependence on a developer ticket for every storefront change — and more consistent information across listings, product details, and related channels.
How do you run a safer domain and SEO migration?
A safer migration is a planned cutover: phased launch, 301 redirects, and a clear canonical home so domain history is preserved. Old URLs should point to the right pages, and indexing should follow the new canonical address. After go-live, checks for what visitors actually see reduce false incidents and team confusion.
How did Pancer.BG move from a static catalog to an ecommerce platform?
The first stage was a static HTML catalog with phone orders — built by me for an earlier moment in the business. New needs required central data, cart, checkout, operations, and content readable in the initial HTML. I built a living system: a storefront with 800+ products, customer journey, dashboard, brand/content, and a discoverability layer. Today the store is live at www.pancer.bg with real orders.
How do you reduce the risk of inaccurate product data?
Risk drops with a central catalog, maintenance-time checks, and clear verification after changes — not with page-by-page manual review alone. On Pancer.BG, nine products showed inaccurate battery/fuel details; the data was corrected and extra catalog checks were added. Customers get a truer configuration; the team gets an earlier signal before the error reaches the storefront.
Как се прави онлайн магазин и ecommerce система само с AI?
Pancer.BG е реален пример: модерна ecommerce система, изградена с AI като работен партньор в дизайна и Developmentта без Figma и без прототипи — не като „магически“ заместител на човешкия контрол. Целта беше работещ магазин и ясна оперативност, а не демо или презентация. Ако търсите как изглежда онлайн магазин с AI в практиката, този case study е конкретният ориентир.
Related Work
Explore projects that share the spirit and approach of this article.
LottoAZ — Buy Official Lottery Tickets Online
Browse · Web Design
Software · Figma · PhpStorm.
Technologies · Online Shop · Ecommerce Web Design Service · Symfony · HTML5 · CSS3 · SaaS · Bootstrap · Responsive Web Design.
onlinemashini.bg — Online Store for Machines and Tools
Browse · Web Design
Software · Figma · Photoshop · Illustrator · VS Code.
Technologies · Online Shop · Ecommerce Web Design Service · Laravel · HTML · CSS · SaaS · Bootstrap · Web Design · UX/UI Design · Responsive Web Design.