JoomShaper Velvet - Шаблон Joomla

Руководство по настройке JoomShaper Velvet для Joomla-магазина модной одежды

JoomShaper Velvet стоит рассматривать не как обычный визуальный шаблон, а как готовую основу для магазина на Joomla: в нём сходятся внешний вид витрины, страницы каталога, карточка товара, блоговые материалы, меню, позиции модулей и связка с EasyStore. В этом руководстве разберём, как подойти к установке, что проверить до запуска, где менять главную страницу, как аккуратно настроить витрину и как понять, что результат действительно готов к тестированию.

Материал рассчитан на владельца сайта, вебмастера или редактора, который уже получил архив шаблона и хочет превратить демо в рабочий проект. Здесь не будет повторения карточки продукта и общих обещаний. Вместо этого - практическая карта: quickstart или установка на существующий сайт, настройки Helix Ultimate, страницы SP Page Builder, товары и категории EasyStore, модульные позиции, проверка адаптивности, диагностика типичных проблем и близкие альтернативы.

Особое внимание уделено тому, что в шаблонах для модного магазина часто ломает впечатление: чужие демо-фото, неподготовленные категории, не назначенные модули, слабые карточки товаров, конфликт кеша с визуальным редактором и невнятная мобильная навигация. Главная цель настройки - не просто установить шаблон, а получить проверяемую цепочку: демо-страница, реальные товары, понятное меню, корректная корзина и предсказуемый результат на публичной части сайта.

Что именно даёт Velvet и где проходит граница его ответственности

Velvet создан для fashion-магазина: одежды, аксессуаров, капсульных коллекций, сезонных подборок, небольших брендов и визуально сильных каталогов. По официальным материалам JoomShaper шаблон использует Helix Ultimate, SP Page Builder Pro и EasyStore. Это важно, потому что большая часть работы после установки проходит не в одном единственном разделе, а между тремя слоями.

Первый слой - шаблон и его стиль. Он отвечает за общий каркас: шапку, навигацию, модульные позиции, сетку, отступы, типографику, адаптивное поведение и внешний ритм страниц. Второй слой - страницы SP Page Builder. Через него обычно редактируется главная, промо-блоки, секции коллекций, визуальные истории и часть страниц магазина. Третий слой - EasyStore. Он отвечает за товары, категории, витрину, карточку товара, корзину, параметры оформления заказа и часть торговой логики.

Из этого следует практический вывод: если на сайте не совпадает текст в hero-блоке, ищите страницу в SP Page Builder; если товар не появляется в каталоге, проверяйте EasyStore; если модуль виден не там, где ожидали, смотрите позиции и назначение меню; если вся шапка ведёт себя неправильно на мобильном, начинайте с настроек Helix и меню. Один и тот же внешний экран может быть собран из нескольких систем Joomla, поэтому диагностика должна идти по слоям.

Кому шаблон подходит

Velvet будет особенно удобен, если проекту нужна готовая визуальная сцена для модного бренда, но команда не хочет собирать каждую страницу с нуля. Он подходит для магазина с небольшим или средним каталогом, где важны крупные фотографии, аккуратная типографика, разделы коллекций, карточки товара, блог о стиле и чистая навигация без тяжёлой перегрузки интерфейса.

Шаблон также полезен агентству, которое быстро разворачивает демо для клиента, показывает несколько вариантов главной страницы, а затем заменяет демо-контент реальными товарами. Quickstart особенно удобен для этого сценария, потому что он устанавливается как готовый сайт с предварительно настроенными расширениями и демо-страницами.

Кому лучше выбрать другой подход

Velvet может оказаться лишним, если у вас уже есть большой действующий магазин с глубокой интеграцией заказов, нестандартными службами доставки, сложными ролями покупателей и критичными доработками checkout. В таком случае шаблон нужно тестировать на копии сайта, а не ставить поверх рабочего проекта. Он также не решает задачи складского учёта, юридических документов, платёжных шлюзов и бизнес-процессов сам по себе - эти части остаются за EasyStore, Joomla и дополнительными расширениями.

Если задача - просто поменять цвет шапки существующего Joomla-сайта, Velvet может быть слишком большим решением. Если задача - собрать визуально цельную fashion-витрину с каталогом, карточками товара и готовыми страницами, шаблон уже ближе к нужному инструменту.

Что проверить перед установкой: сервер, сайт и демо-контент

Перед установкой не стоит начинать с распаковки архива в корень сайта. Сначала проверьте, какой сценарий вам нужен: новый сайт на базе quickstart или установка шаблона на уже существующую Joomla. Это разные пути. Документация JoomShaper прямо указывает, что quickstart содержит ядро Joomla и ставится как новый сайт, а не через менеджер расширений существующей установки.

Для чистого запуска quickstart проверьте хостинг: семейство PHP 8, достаточный лимит памяти, размер загрузки файлов, время выполнения, MySQL или MariaDB, включённые cURL и OpenSSL. В статье не нужно запоминать конкретные цифры - они меняются и должны сверяться с документацией разработчика, но логика остаётся неизменной: архив quickstart крупнее обычного шаблона, а установка демо требует больше ресурсов, чем включение небольшого расширения.

Чек-лист перед запуском quickstart

• Подготовьте отдельную базу данных или хотя бы отдельный префикс таблиц, если работаете в тестовой среде.
• Проверьте, что корневая папка не содержит старый configuration.php, который может подхватить чужие настройки.
• Убедитесь, что в корне нет лишнего index.html, если он мешает запуску установщика Joomla.
• Сохраните доступ к файловому менеджеру или SFTP до конца установки, потому что после установки может понадобиться удалить временные файлы и проверить .htaccess.
• Не используйте очевидное имя суперпользователя вроде admin; это базовая, но важная мера безопасности.
• Сразу решите, какие демо-фотографии будут заменены реальными изображениями бренда, потому что часть изображений из демо может не входить в пакет.

Для существующего сайта логика другая. Перед установкой сырого шаблона сделайте резервную копию файлов и базы, проверьте совместимость расширений, отключите агрессивную оптимизацию на время настройки и создайте тестовый пункт меню. Так вы сможете назначить новый template style только на тестовую страницу, не меняя весь сайт сразу.

Почему демо-фотографии нельзя считать готовым контентом

Шаблон fashion-магазина держится на визуале. Но фотографии из демо обычно нужны для показа дизайна, а не для коммерческого повторного использования. JoomShaper в документации по своим шаблонам объясняет, что изображения из демонстраций могут заменяться заглушками из-за лицензионных ограничений. Для Velvet это особенно важно: крупный hero, карточки товаров и коллекции выглядят убедительно только с собственными снимками бренда.

Подготовьте минимум три набора визуалов: широкие hero-фото, квадратные или вертикальные карточки товаров, а также изображения для коллекций и блога. Если собственных фото ещё нет, лучше временно использовать легальные стоковые изображения с понятной лицензией, чем оставлять серые заглушки. Проверка демо-фото - один из первых признаков, что сайт готов не только к показу клиенту, но и к реальному наполнению.

Установка: quickstart, сырой шаблон и первичная проверка

Самый быстрый путь к виду, похожему на демо, - quickstart. Он разворачивает Joomla-сайт с шаблоном, компонентами и демо-данными. Этот путь хорош для нового проекта, демонстрационного стенда, прототипа магазина или переноса дизайна в отдельную тестовую среду. Но quickstart нельзя ставить поверх действующего сайта через System или Extensions, потому что это не обычный установочный пакет шаблона.

Если сайт уже существует, используйте пакет шаблона и связанные расширения отдельно. После установки откройте System, затем раздел шаблонов сайта, найдите стиль Velvet и назначьте его сначала на тестовый пункт меню. Это позволяет проверить шапку, футер, позиции модулей и основные страницы без риска внезапно изменить весь публичный сайт.

Как понять, что quickstart установился корректно

1. Откройте публичную часть сайта и убедитесь, что загружается главная страница с узнаваемой структурой Velvet: верхняя промо-полоска, минимальная шапка, крупный fashion-hero, блоки коллекций и карточки товаров.
2. Зайдите в админ-панель по адресу /administrator и проверьте, что доступны Components, SP Page Builder Pro и EasyStore.
3. Откройте список страниц SP Page Builder и найдите страницу, назначенную как Home в главном меню.
4. Проверьте, что товары и категории EasyStore опубликованы, а не скрыты или оставлены как черновики.
5. Включите просмотр на мобильной ширине в браузере и посмотрите, не ломается ли шапка, меню и сетка карточек.

После этой проверки не спешите менять всё подряд. Сначала создайте копию домашней страницы в SP Page Builder или сохраните текущую конфигурацию. Это даст простой откат, если первый эксперимент с секциями или отступами испортит композицию.

Первичная настройка на существующем сайте

На действующем сайте безопаснее идти через тестовый маршрут. Создайте скрытый пункт меню, назначьте на него стиль Velvet, выведите туда одну страницу SP Page Builder и один набор модулей. Такой подход показывает, как шаблон ведёт себя с реальным контентом, но не меняет главную страницу, каталог и SEO-структуру сайта до тех пор, пока вы не будете уверены в результате.

Если в процессе настройки используются кеширование, объединение CSS или оптимизация JavaScript, временно отключите эти функции или исключите тестовую страницу. Иначе вы можете редактировать SP Page Builder, нажимать Save, а видеть на публичной части старую версию страницы. Это не ошибка Velvet как шаблона, а типичная проблема кэшированного Joomla-сайта.

Контрольная точка перед переносом на главный пункт меню

Перед тем как назначить Velvet на основную главную страницу, сохраните список сделанных изменений: какой template style использовался, какая страница SP Page Builder назначена, какие модули опубликованы, какие категории EasyStore выводятся в блоках. Это не бюрократия, а быстрый способ отката. Если после переноса пропадёт модуль, изменится шапка или станет пустым блок товаров, вы сразу увидите, где была разница между тестовой и рабочей страницей.

Не переносите шаблон на весь сайт одним действием, если ещё не проверили хотя бы одну страницу магазина, одну карточку товара и одну служебную страницу. Для eCommerce-проекта красивой главной недостаточно: покупатель должен без препятствий пройти до товара и корзины, а администратор - понимать, какой слой отвечает за каждый видимый блок.

Главная страница: как сохранить настроение Velvet и заменить демо на свой бренд

Главная страница Velvet в документации описана как чистая и сдержанная, а переданный визуальный референс показывает именно это: белое пространство, тонкая шапка, крупные fashion-фото, выразительная serif-типографика в hero, блок логотипов, затем коллекция товаров. Это не шаблон с тяжёлой анимацией и множеством цветных баннеров. Его сила - в паузах, пропорциях и крупных изображениях.

Редактирование главной страницы проходит через SP Page Builder Pro. В админ-панели откройте Components, затем SP Page Builder Pro, затем Pages и выберите страницу, назначенную в Main Menu как Home. В зависимости от версии конструктора часть действий удобнее делать в админ-редакторе, а визуальную подгонку отступов и блоков - во фронтальном редакторе.

Что менять в первую очередь

Начните с контента, который влияет на доверие к магазину. В hero-блоке замените заголовок, подзаголовок, call-to-action и фото. Затем проверьте блок популярных коллекций: карточки должны вести либо на категории EasyStore, либо на заранее подготовленные страницы коллекций. После этого замените демо-логотипы партнёров, если они есть, на реальные бренды, публикации или вовсе уберите блок, если он не подтверждает доверие.

Не меняйте одновременно типографику, сетку, фон, отступы и порядок секций. Velvet построен на минимальном визуальном контрасте, поэтому грубая замена шрифтов или случайное уменьшение отступов быстро превращает аккуратный магазин в плотный каталог. Работайте итерациями: одна секция - одно изменение - проверка на мобильной ширине.

Что оставить от исходного ритма

• Крупный визуальный первый экран, потому что он задаёт стиль бренда до просмотра каталога.
• Свободное белое пространство вокруг блоков, иначе премиальный fashion-ритм исчезнет.
• Небольшое количество акцентных кнопок, чтобы пользователь не терял главный маршрут к магазину.
• Карточки товаров с понятной ценой, названием и быстрым визуальным различием между товарами.
• Раздел блога или историй, если бренд продаёт не только товар, но и стиль, подборки или сезонные советы.

Мини-проверка после редактирования главной: пользователь должен за несколько секунд понять, что продаёт бренд, куда перейти за товарами и чем текущая коллекция отличается от обычного списка вещей.

Как не испортить минималистичный стиль

У Velvet сдержанная визуальная логика: крупные фото, небольшое количество текста, контраст чёрного и белого, заметная serif-типографика в промо-зонах и спокойная сетка товаров. Если заменить всё на плотные баннеры, мелкие карточки и несколько разноцветных кнопок, шаблон формально останется Velvet, но его сильная сторона исчезнет. Лучше добавить одну убедительную историю коллекции, чем пять одинаковых рекламных блоков.

Полезный приём - вести список «что удалено из демо». Если вы убрали блок логотипов, блог, промо-полоску или вторую секцию коллекции, запишите почему. Это помогает не оставить пустоты и не вернуть лишний блок только потому, что на демо он выглядел красиво. Настройка визуального шаблона - это редактирование смысла страницы, а не только замена картинок.

Template Styles, Helix Layout Builder и позиции модулей

Для Joomla-шаблона ключевая работа часто происходит не в тексте страницы, а в template style. В Joomla template style можно назначать разным пунктам меню разные варианты внешнего вида. Это удобно, когда главная должна быть визуально широкой и промо-ориентированной, а каталог, блог или служебные страницы - более спокойными и читаемыми.

Velvet построен на Helix Ultimate, а документация Helix описывает Layout Builder как инструмент настройки рядов, колонок, позиций модулей и адаптивного поведения. Для Velvet это особенно важно: шапка, off-canvas меню, блоки над компонентом, футер, промо-полоска и дополнительные позиции должны быть не просто опубликованы, а назначены на правильные пункты меню.

Как работать с позициями без хаоса

Откройте стиль шаблона и найдите настройки layout. Сначала зафиксируйте текущие позиции, затем решите, какие модули должны быть глобальными, а какие показываются только на отдельных страницах. В Joomla модуль может быть опубликован, но не виден, если он назначен не на тот пункт меню, имеет неподходящий уровень доступа или находится в позиции, которую текущий template style не выводит.

Практичная схема для Velvet выглядит так: шапка и основная навигация - глобальные; промо-полоска со скидкой или служебным сообщением - глобальная, но легко отключаемая; блоки коллекций - только на главной; фильтры и категории - только на страницах магазина; блоговые модули - только на страницах материалов. Чем точнее назначение модулей по меню, тем меньше случайных блоков появляется на checkout, карточке товара и служебных страницах.

Настройки, которые стоит проверить после установки

Не начинайте с добавления новых позиций, если не разобрались с существующими. Helix позволяет создавать и менять позиции, но для первого запуска Velvet обычно важнее аккуратно назначить уже предусмотренные области. Новые позиции имеют смысл, когда у вас есть конкретная задача: например, вывести сезонный баннер между hero и коллекциями или показать узкий информационный модуль только на странице каталога.

Как проверять позиции без догадок

В Joomla полезно включить предпросмотр модульных позиций и открыть страницу с параметром ?tp=1, если это разрешено в настройках шаблонов. Так вы увидите не абстрактные названия из админки, а реальные области вывода на странице. После проверки режим лучше выключить, чтобы посетители не видели техническую сетку. Такой способ особенно полезен, когда модуль в админке опубликован, но на публичной части кажется «потерянным».

Если позиция существует, но модуль всё равно не появляется, переходите к назначению меню. В Joomla один и тот же модуль может выводиться на всех страницах, ни на одной странице, только на выбранных пунктах меню или на всех, кроме выбранных. Поэтому проблема часто решается не в Helix, а во вкладке assignment самого модуля. Для Velvet это критично на страницах магазина: лишние промо-модули не должны случайно попадать в корзину и checkout.

EasyStore внутри Velvet: товары, категории и страницы магазина

Velvet опирается на EasyStore как на торговый слой. Это значит, что визуальная красота шаблона не заменяет нормальную товарную структуру. Если категории не продуманы, товары без изображений, скидки выставлены хаотично, а checkout не проверен, красивый hero не спасёт магазин. Начинайте настройку EasyStore с минимальной рабочей модели: категории, несколько тестовых товаров, карточка товара, корзина и оформление заказа.

Категории в EasyStore создаются через Components, EasyStore, Categories. Документация описывает название, alias, описание, статус, родительскую категорию и изображение категории. Для fashion-магазина это не формальность. Категория должна быть понятной покупателю: не Collection 01, а «Платья», «Костюмы», «Аксессуары», «Новая коллекция» или другой реальный язык бренда.

Товарная карточка: что заполнить до визуальной полировки

При добавлении товара EasyStore предлагает заголовок, alias, описание, изображения, цену, скидку, налоговые параметры, статус, категорию, признак featured, инвентарь, SKU, теги, вес, размеры и SEO-поля. Не все поля нужны каждому магазину, но базовая карточка должна быть достаточно полной, чтобы Velvet мог показать товар убедительно.

• Название товара должно отличать модель от соседних карточек, а не повторять одно общее слово.
• Изображения должны быть одного визуального качества и близких пропорций, иначе сетка коллекции будет выглядеть случайной.
• Категория должна быть назначена до проверки витрины, иначе товар может не попасть в нужный блок.
• Статус публикации и наличие должны соответствовать реальному сценарию проверки.
• SEO-поля полезно заполнить для ключевых товаров, но без обещаний, что один шаблон сам даст рост позиций.

После создания товаров проверьте, как они отображаются в SP Page Builder-блоках. Документация EasyStore показывает, что категории можно выводить на страницах SP Page Builder через соответствующий addon. В Velvet это удобно для главной: можно показать подборки, сезонные категории или отдельные группы товаров, не превращая первый экран в полный каталог.

Checkout и служебные страницы

Раздел checkout в EasyStore настраивается отдельно. В документации указаны параметры гостевого оформления, сохранения гостевой информации, адресных полей, телефона, налогов, купонов и юридической информации. В руководстве по шаблону не нужно расписывать платёжные сценарии, но обязательно нужно проверить, что Velvet не ломает служебные страницы магазина визуально.

Создайте тестовый товар, добавьте его в корзину, перейдите к оформлению и проверьте поля на desktop и мобильной ширине. Если модуль промо, блоговый блок или крупный баннер попадает на checkout, вернитесь к назначению модулей по меню. Страница оформления должна быть спокойной и функциональной, а не соревноваться с главной за внимание.

Минимальный набор данных для тестового товара

Тестовый товар не должен быть пустой заглушкой. Дайте ему реальное название, одну основную фотографию, категорию, цену, статус публикации, SKU или другой внутренний идентификатор, короткое описание и хотя бы одну характеристику. Тогда проверка покажет не только наличие страницы, но и то, как Velvet справляется с реальным текстом, пропорциями изображений и дополнительными данными. Если тестировать шаблон на товаре без изображения и описания, можно пропустить проблемы, которые появятся при настоящем наполнении.

Отдельно проверьте состояние товара со скидкой и обычного товара без скидки. В референсе Velvet видны аккуратные скидочные метки на карточках, поэтому важно убедиться, что такие элементы не ломают сетку и не перекрывают изображение. Если скидка выглядит шумно, сначала ищите настройку в EasyStore или SP Page Builder-блоке, а не начинайте править шаблонные файлы.

Практический сценарий: собрать главную витрину для новой коллекции

Допустим, нужно быстро подготовить главную страницу для запуска капсульной коллекции одежды. У нас есть несколько фотографий, пять-десять товаров, короткий текст бренда и задача направить посетителя в каталог. Это типичный сценарий для Velvet: шаблон уже задаёт настроение, а вам нужно заменить демо-контент и связать главную с реальными товарами EasyStore.

Цель

Получить главную страницу, где посетитель видит новую коллекцию, понимает стиль бренда, может перейти в категорию товаров и открыть карточку товара без лишних переходов. Результат должен выглядеть цельно на desktop и мобильной ширине.

Подготовка

• Шаблон установлен через quickstart или назначен на тестовый template style.
• В EasyStore созданы категории для коллекции и опубликованы тестовые товары.
• У товаров есть изображения, цена, статус публикации и понятные названия.
• В SP Page Builder доступна домашняя страница, назначенная в главном меню.
• Кеш Joomla и внешняя оптимизация отключены на время активной настройки или очищаются после каждого изменения.

Шаги настройки

1. Откройте Components, SP Page Builder Pro, Pages и выберите страницу Home.
2. Замените hero-заголовок и фото на материалы новой коллекции. Сохраняйте крупную композицию и не добавляйте несколько конкурирующих кнопок.
3. В блоке коллекций укажите категории EasyStore или ссылки на страницы, которые выводят нужные товары.
4. Проверьте карточки товаров: название, изображение, цена, скидка, состояние Featured, если блок показывает избранные товары.
5. В меню оставьте короткий маршрут: Home, Shop, Categories, Blog, служебные страницы в выпадающем меню.
6. Сохраните страницу, очистите кеш, откройте публичную часть в приватном окне и проверьте маршрут от hero до товара.

Проверка результата

Проверка должна быть пользовательской, а не только административной. Откройте сайт как обычный покупатель: нажмите кнопку в hero, перейдите в категорию, откройте товар, добавьте в корзину, вернитесь на главную и проверьте, что мобильное меню не закрывает важные элементы. Если пользователь теряется между коллекцией и товаром, проблема не в «красоте» шаблона, а в связке меню, категорий и блоков.

Нюанс, который часто мешает

Самая частая ловушка - редактировать визуальный блок на главной и забыть, что он показывает не вручную набранные карточки, а данные EasyStore или связанную страницу. В таком случае на самой главной всё может выглядеть правильно, но переход ведёт в пустую категорию, товар скрыт, карточка не опубликована или модуль назначен не на тот пункт меню. Проверяйте не только блок, но и источник данных.

Как оформить результат для клиента или команды

После настройки коллекции сделайте короткую внутреннюю запись: какие категории участвуют в блоке, какие товары отмечены как featured, где редактируется hero и какие изображения нельзя удалять из медиаменеджера. Это особенно полезно, если сайт дальше будет вести контент-менеджер. Без такой записи команда часто меняет товар в EasyStore, но не понимает, почему он не появился на главной, или меняет hero в не той копии страницы.

Для финального согласования покажите не статичный скриншот, а маршрут: главная, категория, товар, корзина, возврат в меню. Такой показ быстрее выявляет слабые места: слишком длинный заголовок товара, неудачное фото, лишний модуль в checkout, непонятный пункт меню. Практический пример считается завершённым только тогда, когда его можно повторить по шагам и проверить на публичной части сайта.

Практичные идеи применения Velvet без выдуманных функций

Velvet не ограничивается одной витриной «товары в сетке». Его можно использовать как основу для нескольких рабочих сценариев, если не выходить за подтверждённые возможности: страницы SP Page Builder, EasyStore, категории, карточки товаров, блог, модули и template styles. Ниже - идеи, которые можно реализовать через стандартные слои Joomla и расширения, входящие в экосистему шаблона.

Капсульная коллекция с коротким маршрутом покупки

Создайте отдельную категорию EasyStore, добавьте товары коллекции, выведите блок на главную через SP Page Builder и оставьте одну главную кнопку перехода в категорию. Такой сценарий работает для сезонного запуска, ограниченной подборки или новой линейки аксессуаров. Проверка простая: каждый товар из блока должен открываться, быть опубликованным и вести к корректной корзине.

Витрина бренда с блогом о стиле

Если магазин продаёт не только вещи, но и визуальный образ, используйте блоговые страницы для материалов «как носить», «история коллекции», «уход за тканью». На главной можно оставить несколько статей как поддержку доверия, но не перегружать её длинными текстами. Проверяйте, что блоговые модули не появляются в checkout и не мешают карточкам товара.

Каталог без агрессивной продажи

Для брендов, которые принимают заявки вручную или показывают ассортимент перед запуском продаж, Velvet можно настроить как визуальный каталог. EasyStore всё равно помогает структурировать товары и категории, но часть торговых действий можно вводить постепенно, в зависимости от готовности магазина. В статье важно сформулировать это осторожно: конкретный режим зависит от вашей конфигурации EasyStore и установленных возможностей.

Мультиязычная витрина

Joomla хорошо подходит для многоязычных сайтов, но шаблон сам не переводит контент. Для Velvet это означает отдельную подготовку меню, страниц SP Page Builder, категорий, товаров и текстовых строк. Начинайте не с полного перевода всего сайта, а с одной тестовой языковой версии главной, категории и карточки товара. Так проще увидеть, где текст берётся из конструктора, где из EasyStore, а где из языковых файлов Joomla.

Промо-лендинг для временной распродажи

Верхняя промо-полоска и крупный hero Velvet подходят для короткой кампании, но такую кампанию лучше держать управляемой. Создайте отдельную страницу или секцию в SP Page Builder, выведите только нужную категорию EasyStore, ограничьте количество товаров и проверьте, что после окончания кампании блок можно быстро отключить. Не привязывайте временную акцию к глобальным элементам, если она должна исчезнуть без переделки всей шапки.

Проверка здесь простая: после отключения секции на сайте не должно остаться битых ссылок, пустых категорий и промо-текста в меню. Если акция затрагивает скидочные метки, дополнительно проверьте карточки товаров без скидки, чтобы верстка не зависела от одного состояния.

Безопасные улучшения: CSS, локализация и аккуратный откат

В шаблоне для магазина почти всегда появляются мелкие правки: сделать товарные карточки ровнее, уточнить подписи, скрыть лишний блок на мобильной ширине, перевести строку интерфейса, поправить отступы. Главное правило - не редактировать ядро Joomla, файлы расширений и шаблона напрямую, если ту же задачу можно решить через настройки, пользовательский CSS, language override или копию страницы.

Для маленькой визуальной правки используйте собственный класс секции в SP Page Builder. Например, добавьте классу блока товаров значение vf-product-grid-check, а затем внесите CSS в безопасное место для пользовательских стилей template style или конструктора. Такой snippet не зависит от внутренних классов Velvet и легко отключается удалением одного класса или блока CSS.

.vf-product-grid-check .sppb-addon {
  min-height: 100%;
}

.vf-product-grid-check img {
  object-fit: cover;
}

.vf-product-grid-check a:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 3px;
}

Эта правка не меняет торговую логику. Она помогает визуально выровнять блок и улучшить фокус для клавиатурной навигации, если ваш конкретный блок использует изображения и ссылки внутри секции. Проверьте результат на странице коллекции, затем на мобильной ширине. Если что-то выглядит неправильно, удалите класс vf-product-grid-check у секции или сам CSS. Такой откат безопаснее, чем правка файлов шаблона.

Локализация без правки файлов

Если нужно заменить системную подпись, сначала ищите штатный механизм переопределения языковых строк Joomla или настройки самого компонента. Не правьте языковые файлы расширения напрямую: обновление может вернуть старый текст. Для Velvet это особенно актуально на границе между шаблоном, SP Page Builder и EasyStore, потому что видимая фраза может принадлежать не шаблону, а компоненту магазина.

Когда не стоит добавлять код

Не добавляйте JavaScript для изменения корзины, checkout или цены, если точно не понимаете, какой компонент за это отвечает. Для магазина такие правки рискованны: они могут сломать оформление заказа, валидацию полей или поведение на мобильных устройствах. Если нужен нестандартный торговый сценарий, лучше искать документированный способ в EasyStore или отдельное расширение, а не вставлять случайный скрипт.

То же правило относится к правке PHP-файлов шаблона. Если нужно изменить структуру вывода, сначала проверьте, решается ли задача template style, модулем, языковым переопределением, настройкой SP Page Builder или Joomla override, созданным по правилам CMS. Прямая правка файлов продукта часто теряется при обновлении и усложняет поддержку. Безопасная доработка должна иметь место внесения, проверку результата и очевидный откат.

Проверка результата: публичная часть, мобильный вид, скорость и SEO

После настройки шаблона проверьте результат как посетитель, редактор и администратор. Посетитель смотрит на внешний вид, навигацию и понятность покупки. Редактор проверяет, насколько легко заменить блок, товар или текст. Администратор оценивает, где расположены настройки, можно ли откатить изменения и не создала ли команда лишние зависимости.

Маршрут посетителя

1. Откройте главную страницу в приватном окне.
2. Перейдите по главной кнопке в каталог или категорию.
3. Откройте товар, проверьте изображения, название, цену, наличие и описание.
4. Добавьте товар в корзину и перейдите к checkout.
5. Вернитесь на главную и проверьте, что меню, футер и служебные ссылки работают одинаково предсказуемо.

Маршрут редактора

Редактор должен понимать, где менять главную страницу, где менять товар, где менять категорию и где скрывать модуль. Если все действия приходится искать в случайных местах, составьте короткую внутреннюю памятку: Home редактируется в SP Page Builder, товары и категории - в EasyStore, шапка и позиции - в template style, видимость модулей - в настройках модуля и menu assignment.

Скорость и SEO без завышенных обещаний

Ни один шаблон не гарантирует рост позиций в поиске сам по себе. Для Velvet разумнее говорить о технической базе: чистая структура, адаптивный макет, нормальные изображения, понятные заголовки, заполненные мета-поля товаров и отсутствие лишних блоков на служебных страницах. Сжимайте изображения до разумного размера, не загружайте огромные hero-фото без необходимости и проверяйте, что карточки товаров имеют уникальные описания.

Если включаете кеш, объединение файлов или оптимизацию, делайте это после основной настройки и проверяйте SP Page Builder, EasyStore, корзину и мобильное меню. Сначала рабочий маршрут, затем оптимизация. Иначе трудно понять, что именно сломалось: настройка шаблона, кеш, минификация или данные магазина.

Что записать после финальной проверки

Сохраните короткий технический лист: активный template style, главная страница SP Page Builder, основные категории EasyStore, список модулей в шапке и футере, включённые оптимизации, место пользовательского CSS и ответственного за изображения. Это помогает не только в поддержке, но и при обновлениях. Если после обновления изменится вид карточек или пропадёт модуль, вы сможете сравнить фактическое состояние с исходной картой, а не вспоминать настройки по памяти.

Для небольшого магазина такой лист занимает несколько строк, но экономит часы диагностики. Он особенно полезен, когда сайт передаётся от разработчика владельцу бренда или редактору. Velvet остаётся удобным инструментом только тогда, когда команда понимает, какие части сайта редактируются в Joomla, какие в SP Page Builder, а какие в EasyStore.

Если Velvet выглядит не так, как в демо: диагностика по симптомам

Диагностику лучше вести не по принципу «шаблон не работает», а по видимому симптому. У Velvet несколько слоёв, поэтому один и тот же внешний сбой может иметь разные причины. Ниже - практическая карта, с которой стоит начать.

Главная страница открывается, но не похожа на демо

Симптом: структура другая, нет нужных секций, кнопки ведут не туда, карточки товаров пустые. Возможные причины: установлен сырой шаблон вместо quickstart, домашняя страница не назначена в главном меню, страница SP Page Builder не та, демо-изображения заменены заглушками, данные EasyStore не опубликованы.

Что проверить: пункт меню Home, список страниц SP Page Builder, публикацию товаров и категорий, наличие реальных изображений. Исправление: назначьте правильную страницу, проверьте связи с категориями, замените демо-контент. Если сайт действующий, не пытайтесь восстановить демо поверх рабочего сайта - используйте тестовую копию.

Модуль опубликован, но не виден на странице

Симптом: в админке модуль включён, но на публичной части его нет. Возможные причины: позиция не выводится текущим template style, модуль назначен не на тот пункт меню, уровень доступа не подходит пользователю, кеш показывает старое состояние.

Что проверить: позицию модуля, вкладку menu assignment, access, выбранный template style, очистку кеша. Исправление: назначьте модуль на нужный пункт меню, используйте позицию, которая реально есть в layout, или создайте тестовую позицию через Helix только после проверки существующих.

Карточки товаров не появляются в блоке коллекции

Симптом: блок на главной есть, но товары пустые или не те. Возможные причины: товар не опубликован, не назначена категория, блок SP Page Builder смотрит на другую категорию, не заполнено изображение, фильтр показывает только featured-товары.

Что проверить: статус товара, категорию, состояние Featured, настройки addon, кеш. Исправление: опубликуйте товар, назначьте категорию, проверьте источник данных блока. Если блок был скопирован из демо, особенно внимательно проверьте, откуда он берёт товары.

После сохранения изменений видна старая версия

Симптом: в редакторе всё сохранено, но публичная часть не меняется. Возможные причины: кеш Joomla, кеш хостинга, кеш браузера, оптимизатор CSS/JS или CDN. Что проверить: приватное окно, очистку кеша Joomla, отключение внешнего оптимизатора на время настройки. Исправление: сначала убедитесь, что данные действительно сохранены в SP Page Builder или EasyStore, затем очищайте кеши по одному.

Мобильное меню или сетка товара ломаются

Симптом: шапка переносится, карточки слишком узкие, кнопка корзины перекрывает текст, off-canvas меню неудобно. Возможные причины: слишком длинные пункты меню, лишние модули в шапке, неправильные breakpoints в layout, тяжёлые изображения без адаптивной подготовки.

Что проверить: длину меню, настройки шапки, off-canvas позицию, сетку колонок, размеры изображений. Исправление: упростите меню, вынесите второстепенные ссылки в выпадающий пункт, проверьте responsive-настройки Helix и не пытайтесь решить всё уменьшением шрифта.

Когда JoomShaper Velvet будет удачным выбором

Velvet стоит использовать, если вам нужен Joomla-шаблон для fashion-магазина с сильной визуальной главной, готовыми страницами, связкой SP Page Builder, Helix Ultimate и EasyStore, а также понятным путём от демо к рабочей витрине. Он особенно хорош там, где товар продаётся через образ: одежда, аксессуары, сезонные подборки, визуальные коллекции, брендовые истории.

Перед запуском проверьте серверные требования, выберите правильный способ установки, замените демо-фото, настройте категории и товары, назначьте модули по меню, протестируйте мобильную шапку, корзину и checkout. После этого можно скачать ZIP-архив или перейти к архиву на странице продукта и развернуть его в тестовой среде.

Хороший итог настройки - не точная копия демо, а рабочий магазин, где стиль Velvet поддерживает бренд, товары легко найти, пользовательский маршрут не ломается, а администратор понимает, где менять каждый слой сайта. Если этот маршрут подтверждён на тестовой странице, шаблон можно переносить ближе к реальному запуску.