Тема дизайна для интернет-магазина: обзор настроек оформления в Shop-Script

Быстро и красиво оформить интернет-магазин — не проблема, даже если у вас нет большого бюджета на старте. Готовые темы дизайна созданы для того, чтобы любой предприниматель без помощи дизайнера смог красиво оформить сайт своего интернет-магазина. Сегодня расскажем о том, на что способны современные темы дизайна, чем они отличаются друг от друга и как работать с дизайном в движке Shop-Script.

Тема дизайна в интернет-магазине

Мы подготовили видеоролик, в котором показали, как работать с базовыми настройками дизайна в Shop-Script: «Темы дизайна и базовые настройки оформления в Shop-Script». Ниже — статья о том, что такое тема дизайна и чем разные темы дизайна отличаются друг от друга, и текстовая версия инструкции по настройке.

Тема дизайна для интернет-магазина: как устроена и за что отвечает

Сайт любого интернет-магазина — это не просто текст с названием товара и ценой. Это набор изображений, таблиц, кнопок и переключателей, которые выполняют определённые функции. Чтобы всё располагалось там, где нужно, выглядело красиво и правильно функционировало, эту структуру необходимо правильно описать определённым образом — запрограммировать.

Страница сайта и её код

В коде страницы описано местоположение каждого элемента и функции, которые он выполняет.

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

Карточки товара

Шаблон страницы — общий, а наполнение — разное.

Совокупность нескольких шаблонов для оформления разных страниц сайта и называется темой дизайна или шаблоном сайта.

За что отвечает тема дизайна

Функции, которые выполняет тема дизайна:

  • как будут выглядеть и функционировать страницы: главная, категории и карточки товара;
  • каким будет меню сайта;
  • как будет выглядеть корзина;
  • как будет реализована дополнительная функциональность, которая заложена в движке и для использования которой нужно отображать элементы управления на сайте: кнопки, фильтры, отзывы с оценками, механика выбора вариантов (артикулов) товара и т. д.

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

Шаблоны: какие бывают и чем отличаются друг от друга

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

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

Цвет фона темы дизайна в коде и в меню настройках

Платные темы дизайна: от чего зависит их стоимость и как попробовать любую тему дизайна бесплатно

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

Темы дизайна в магазине Webasyst

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

👉 Если вы создаёте интернет-магазин в облаке Webasyst, то у вас есть возможность бесплатно попробовать любую тему дизайна перед покупкой.

Это можно сделать двумя способами:

  1. В панели управления Webasyst зайти в приложение «Инсталлер» и выбрать раздел «Темы дизайна». Выбрать понравившуюся тему и нажать на кнопку «Попробовать».

    Попробовать тему дизайна в Shop-Script
  2. В приложении «Магазин» открыть раздел «Витрина → Темы дизайна». Прокручивая страницу вниз, вы увидите темы, доступные для установки и покупки. Кнопка «Попробовать» расположена рядом с ценой.

    Попробовать тему дизайна в Шопскрипт

Переместимся в панель управления вашего Webasyst и познакомимся, как устроены базовые настройки темы дизайна в Shop-Script.

Как установить и настроить тему дизайна в Shop-Script

Установка и редактирование темы дизайна происходит в разделе «Витрина».

В панели управления вашего Webasyst заходим в приложение «Магазин», далее в меню выбираем «Витрина»:

Раздел Витрина в Shop-Script

Меню раздела «Витрина» состоит из 5 подразделов:

  • Оформление
  • Шаблоны
  • Настройки
  • Страницы
  • Темы дизайна

Познакомимся с каждым из них.

Оформление

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

👉 У каждой темы дизайна свой набор настроек.

Раздел Оформление в Shop-Script

Шаблоны

Здесь можно изменить исходный код шаблонов страниц витрины или загрузить собственный код дизайна. Для работы на этой вкладке необходимы навыки программирования.

Раздел Шаблоны в Shop-Script

Настройки

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

Если витрин несколько, то можно управлять каждой: выбирать, какие типы товаров, способы оплаты и доставки должны быть доступны на них.

Раздел Настройки темы дизайна в Shop-Script

Страницы

Здесь вы можете создать специальные страницы для определённых целей. Например, рассказать подробнее о размерной сетке товара или опубликовать дополнительные описания процесса покупки, оплаты или доставки.

Раздел Страницы в Shop-Script

Темы дизайна

Здесь вы найдёте список тем, которые уже установлены в вашем интернет-магазине, а также каталог новых тем для установки. В магазине Webasyst более 100 готовых тем дизайна — как платных, так и бесплатных.

Раздел Темы дизайна в Shop-Script

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

Как попробовать тему дизайна в Shop-Script

Также темы дизайна можно посмотреть и установить в «Инсталлере» вашего Webasyst:

Инсталлер и темы дизайна в Shop-Script

👉 У каждой темы дизайна свой набор настроек и возможностей. Чтобы узнать о них подробнее, установите новую тему дизайна и перейдите во вкладку «Оформление».

Мы рассказали об основных настройках оформления в Shop-Script. Теперь вы знаете, как установить новую тему дизайна и изменить её «под себя».

Если вы ещё не знакомы с Shop-Script или у вас остались вопросы по работе с дизайном, приглашаем вас на наши обучающие вебинары. Мы регулярно рассказываем об особенностях работы с движком на платформе Webasyst. Новости и анонсы встреч публикуем на нашем канале в «Телеграме». Присоединяйтесь!

И в заключении отметим, что с помощью красивого и продуманного дизайна вы создаёте не только приятную атмосферу, но и удобство для клиентов. А это мотивирует их к покупке. Благодаря готовым шаблонам и гибким настройкам Shop-Script вы сможете самостоятельно создать такой дизайн на своей витрине.

Смотрите также
Все статьи

«Как самому сфотографировать товары для интернет-магазина и что для этого потребуется»

СтатьяОбзор необходимой техники и инструкции: как выстроить кадр, подобрать фотофон и выставить свет.

«Как обработать фотографии товаров для интернет-магазина»

СтатьяРедакторы и инструменты. Ретушь, цветокоррекция и калибровка. Как добавить «водяной знак» и зачем он нужен.

«Как оптимизировать фотографии товаров для интернет-магазина»

СтатьяАтрибуты alt, title и Sitemap-файл — что это, где и как их правильно заполнять, чтобы добиться высокого ранжирования сайта. Оптимальный размер и формат изображений для веба. Программы-помощники и бесплатные онлайн-сервисы для сжатия и уменьшения изображений.