Быстро и красиво оформить интернет-магазин — не проблема, даже если у вас нет большого бюджета на старте. Готовые темы дизайна созданы для того, чтобы любой предприниматель без помощи дизайнера смог красиво оформить сайт своего интернет-магазина. Сегодня расскажем о том, на что способны современные темы дизайна, чем они отличаются друг от друга и как работать с дизайном в движке Shop-Script.
Мы подготовили видеоролик, в котором показали, как работать с базовыми настройками дизайна в Shop-Script: «Темы дизайна и базовые настройки оформления в Shop-Script». Ниже — статья о том, что такое тема дизайна и чем разные темы дизайна отличаются друг от друга, и текстовая версия инструкции по настройке.
Тема дизайна для интернет-магазина: как устроена и за что отвечает
Сайт любого интернет-магазина — это не просто текст с названием товара и ценой. Это набор изображений, таблиц, кнопок и переключателей, которые выполняют определённые функции. Чтобы всё располагалось там, где нужно, выглядело красиво и правильно функционировало, эту структуру необходимо правильно описать определённым образом — запрограммировать.
В коде страницы описано местоположение каждого элемента и функции, которые он выполняет.
Сайт интернет-магазина состоит из множества страниц: категорий, карточек товара, описаний доставки и оплаты и т. д. Страницы каждого вида — однотипные, поэтому программировать каждую по отдельности не имеет смысла. Гораздо проще сделать шаблоны и использовать их для загрузки страниц на сайте, меняя только их содержимое.
Шаблон страницы — общий, а наполнение — разное.
Совокупность нескольких шаблонов для оформления разных страниц сайта и называется темой дизайна или шаблоном сайта.
За что отвечает тема дизайна
Функции, которые выполняет тема дизайна:
- как будут выглядеть и функционировать страницы: главная, категории и карточки товара;
- каким будет меню сайта;
- как будет выглядеть корзина;
- как будет реализована дополнительная функциональность, которая заложена в движке и для использования которой нужно отображать элементы управления на сайте: кнопки, фильтры, отзывы с оценками, механика выбора вариантов (артикулов) товара и т. д.
Шаблоны сайта бывают разные. Расскажем подробнее, чем и как они могут отличаться друг от друга.
Шаблоны: какие бывают и чем отличаются друг от друга
Шаблоны могут быть довольно простыми — это код, который отвечает только за вывод элементов на странице. Например, это может быть шаблон для лендинга, где у каждого элемента есть своё закреплённое место. И чтобы это место поменять, нужно редактировать код шаблона.
Более сложный вариант шаблона — это код, в котором дополнительно программируется меню настроек. С ним вносить изменения в работу сайта сможет любой пользователь, а не только программист. Достаточно открыть меню с настройками и выбрать нужный вариант. Например, для корзины вы можете выбрать: место, где она будет отображаться на витрине; внешний вид кнопки, по которой покупатель перейдёт в корзину; перечень данных для покупателя, который оформляет заказ. Вы выбираете нужные параметры в меню настроек, и содержимое страницы изменяется автоматически. Вам не нужно о нём думать, сайт будет работать и выглядеть так, как вы настроите. Как правило, такие сложные шаблоны — платные.
Платные темы дизайна: от чего зависит их стоимость и как попробовать любую тему дизайна бесплатно
Цена темы дизайна, как правило, зависит от сложности кода и количества доступных настроек. Чем больше изменений вы сможете внести в шаблон без программирования, тем сложнее его исходный код.
Темы дизайна в магазине Webasyst
В магазине Webasyst представлены примеры страниц каждой темы дизайна. При помощи настроек — без программирования — вы можете создать свой уникальный интернет-магазин, отличающийся от примеров на сайте. Чем больше настроек в теме дизайна, тем легче сделать сайт непохожим на другие магазины, которые используют тот же шаблон.
👉 Если вы создаёте интернет-магазин в облаке Webasyst, то у вас есть возможность бесплатно попробовать любую тему дизайна перед покупкой.
Это можно сделать двумя способами:
В панели управления Webasyst зайти в приложение «Инсталлер» и выбрать раздел «Темы дизайна». Выбрать понравившуюся тему и нажать на кнопку «Попробовать».
В приложении «Магазин» открыть раздел «Витрина → Темы дизайна». Прокручивая страницу вниз, вы увидите темы, доступные для установки и покупки. Кнопка «Попробовать» расположена рядом с ценой.
Переместимся в панель управления вашего Webasyst и познакомимся, как устроены базовые настройки темы дизайна в Shop-Script.
Как установить и настроить тему дизайна в Shop-Script
Установка и редактирование темы дизайна происходит в разделе «Витрина».
В панели управления вашего Webasyst заходим в приложение «Магазин», далее в меню выбираем «Витрина»:
Меню раздела «Витрина» состоит из 5 подразделов:
- Оформление
- Шаблоны
- Настройки
- Страницы
- Темы дизайна
Познакомимся с каждым из них.
Оформление
Здесь находятся настройки, которые отвечают за внешнее отображение и наполнение информационных блоков на сайте: виджетов, баннеров, футера и других.
👉 У каждой темы дизайна свой набор настроек.
Шаблоны
Здесь можно изменить исходный код шаблонов страниц витрины или загрузить собственный код дизайна. Для работы на этой вкладке необходимы навыки программирования.
Настройки
Здесь находятся функциональные настройки. Можно выбрать темы дизайна для десктопной и мобильной версий сайта: использовать одну общую или настроить разные, установить язык витрины, добавить метатеги для главной страницы и т. д.
Если витрин несколько, то можно управлять каждой: выбирать, какие типы товаров, способы оплаты и доставки должны быть доступны на них.
Страницы
Здесь вы можете создать специальные страницы для определённых целей. Например, рассказать подробнее о размерной сетке товара или опубликовать дополнительные описания процесса покупки, оплаты или доставки.
Темы дизайна
Здесь вы найдёте список тем, которые уже установлены в вашем интернет-магазине, а также каталог новых тем для установки. В магазине Webasyst более 100 готовых тем дизайна — как платных, так и бесплатных.
Если вы пользователь облака Webasyst, то у вас есть возможность попробовать любую платную тему дизайна, прежде чем купить её. Для этого откройте понравившуюся тему и нажмите на кнопку «Попробовать».
Также темы дизайна можно посмотреть и установить в «Инсталлере» вашего Webasyst:
👉 У каждой темы дизайна свой набор настроек и возможностей. Чтобы узнать о них подробнее, установите новую тему дизайна и перейдите во вкладку «Оформление».
Мы рассказали об основных настройках оформления в Shop-Script. Теперь вы знаете, как установить новую тему дизайна и изменить её «под себя».
Если вы ещё не знакомы с Shop-Script или у вас остались вопросы по работе с дизайном, приглашаем вас на наши обучающие вебинары. Мы регулярно рассказываем об особенностях работы с движком на платформе Webasyst. Новости и анонсы встреч публикуем на нашем канале в «Телеграме». Присоединяйтесь!
И в заключении отметим, что с помощью красивого и продуманного дизайна вы создаёте не только приятную атмосферу, но и удобство для клиентов. А это мотивирует их к покупке. Благодаря готовым шаблонам и гибким настройкам Shop-Script вы сможете самостоятельно создать такой дизайн на своей витрине.
