Доработка сайта · OpenCart / ProStore
Визуальная доработка магазина: скругления и шапка в духе маркетплейса за 10 часов
Обновили визуальный язык ProStore через отдельный CSS-слой — без правок ядра темы и без пересборки. Сохранили обновляемость и работу на мобильных.
-
10 чобъём работ
-
5блоков изменений
-
0правок app.css
-
6–24pxшкала радиусов
Проблема
Нужно было обновить визуальный язык магазина: скругления и шапка в духе современных маркетплейсов (как у Ozon), без полной пересборки темы и без правок ядра app.css / app.min.css. Важно сохранить обновляемость ProStore и корректную работу на мобильных.
Острые 4–5px, дефолтная шапка, правки в вендорных CSS рискованны
Единые радиусы, шапка-оболочка, кастом в одном override-файле
Задачи
Все изменения вынесли в ozon-radius.css и подключили после стилей темы. В :root — токены радиусов и цвета шапки.
Ограничения
Рамки проекта определили формат работ заранее.
Как делали
Отдельный слой переопределений и CSS-переменные вместо правок минифицированных стилей вендора.
Override-файл
ozon-radius.css после основных стилей темы
Токены в :root
Радиусы 6–24px, «таблетка», цвета шапки
Шапка и sticky
Фон и акцент после скролла без «просвечивания»
Mobile-фиксы
margin: auto вместо transform; оверлеи fullscreen
Диагностика баннеров
Отделили баг вёрстки от рамки в самом JPG
Результат
Интерфейс ближе к маркетплейсному виду без смены темы. Ядро ProStore не трогали. Починили регрессии мобильного меню и sticky-шапки.
| Правки в app.min.css | Отдельный ozon-radius.css |
|---|---|
| Острые радиусы 4–5px | Единая шкала 6–24px + таблетка |
| Шапка «просвечивает» | Sticky с фоном и акцентом |
| «Бордер» лечили CSS | Нашли рамку в JPG баннера |
FAQ
Почему не править app.css / app.min.css напрямую?
На готовой теме безопаснее отдельный слой переопределений: обновления ProStore не затрут кастом, откат — удаление одного файла.
Что проверить в первую очередь при редизайне шапки?
Мобилку: transform, overflow и position: fixed часто конфликтуют — offcanvas и sticky ломаются первыми.
Если «бордер» не уходит стилями — что делать?
Сначала проверить пиксели ассета. Рамка может быть в JPG/WebP; тогда нужно пересохранить баннеры и сбросить кэш изображений.
Подойдёт ли такой подход для другой темы OpenCart?
Да: override-CSS + переменные в :root. Селекторы и исключения под мобилку адаптируются под конкретную тему.
Получить оценку доработки
Пришлите ссылку на сайт и список задач — вернём оценку по часам и план этапов.
Запросить смету