Шаблоны для insales бесплатно – Шаблоны интернет магазина бесплатно на InSales

Выбор шаблона дизайна

Изменить шаблон дизайна можно в разделе «Дизайн». В этом разделе можно управлять шаблонами сайта, их кодом и настройками.

  1. Установка нового шаблона
  2. Текущие и установленные темы

Установка нового шаблона

Нажмите кнопку «Галерея тем».

В галерее выберите шаблон. Доступна фильтрация по платным/бесплатным шаблонам и поиск по названию.

В карточке шаблона можно увидеть его изображение, название, стоимость и описание.

Для просмотра примера шаблона, нажмите кнопку «Посмотреть пример». В новой вкладке откроется демо-магазин с этим шаблоном.

Для установки шаблона, нажмите кнопку «Установить тему».

Для возврата к списку шаблонов, нажмите кнопку «К списку тем» или «Назад».

После установки шаблона, он появится в разделе «Установленные темы».

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

Для предварительного просмотра нажмите кнопку «Предпросмотр».

Для публикации шаблона в качестве основного, нажмите кнопку «Опубликовать» и выберите «Как основную».

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

Текущие и установленные темы

Текущие темы – шаблоны которые используются на сайте. Их видят посетители сайта.

В текущих темах может быть 2 шаблона – основной и мобильный.

Основной шаблон отображается на десктоп-устройствах (персональные компьютеры и ноутбуки), мобильный шаблон отображается на мобильных устройствах (смартфоны, планшеты).

С 2017 года все шаблоны в галерее тем InSales – адаптивные. Они подстраиваются под размер экрана устройства, с которого открыт сайт.  Поэтому нет необходимости использовать мобильную тему.

Установленные темы – установлены на сайт, но не показываются посетителям. Их можно просматривать и редактировать с помощью кнопки «Предпросмотр».

www.insales.ru

Начало работы с шаблонами

Темы InSales состоят из liquid-файлов, каждый из которых служит для определенных задач. Например, collection.liquid используется для отображения товаров внутри категории, а product.liquid — для отображения информации о конкретном товаре.

 

Структура темы

Тема для InSales, будучи выгружена в zip-архив из магазина, будет содержать следующие директории:

media

Эта директория содержит ассеты, используемые в теме, в том числе изображения, стили, скрипты, svg-файлы (css, js и svg-файлы из директории media можно править с помощью редактора шаблонов в бек-офисе магазина).

Для обращения к файлам из этой директории из шаблонов используйте фильтр asset_url.

config

Эта директория содержит файлы настроек темы settings.html, отображаемые администратору сайта при его настройке. В одном файле содержатся сами настройки, во втором их дефолтные значения, а третий файл setup.json определяет инициализацию (создание недостающих объектов в магазине) при установке данной темы. 

snippets

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

Используйте include для включения снипета в шаблон. 

templates

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

По умолчанию в теме присутствует 2 лэйаута — layouts.layout.liquid (для всех страниц сайта, кроме личного кабинета и шаго оформления заказа) и layouts.checkout.liquid  (для страниц оформления заказа)

 

Данный раздел содержит следующие статьи:

  1. Как формируются страницы
  2. Пермалинки объектов

www.insales.ru

Настройки шаблона сайта

Настроить внешний вид сайта можно в редакторе шаблона.

Попасть в редактор шаблона можно через раздел «Дизайн» → «Настроить».

Редактор сайта состоит из 2-х областей:

  1. Панель настроек
  2. Панель виджетов

Панель настроек

Панель настроек состоит из 3-х частей:

  1. Шапка панели настроек
  2. Перечень настроек темы
  3. Кнопки управления

1. Шапка панели настроек

Кнопка «Бэк-офис» возвращает в бэк-офис сайта.

Иконки устройств покажут, как выглядит сайт на разных устройствах.

Крестик – закрытие панели настроек и выход из режима редактирования.

2. Перечень настроек темы

Раздел «Цвета и шрифт» – здесь можно настроить цветовую схему сайта и выбрать какой шрифт на сайте использовать.

Раздел «Логотип и иконка» – здесь можно загрузить логотип сайта и favicon.

Раздел «Контакты и сети» – здесь можно указать откуда выводить контакты магазина, из настроек или редактируемого блока. Можно скрыть иконки социальных сетей в подвале сайта.

Раздел «Главная страница» – здесь можно настроить автоматическое пролистывание картинок слайдера.

Раздел «Страница каталога товаров» – здесь можно настроить где показывать описания категорий, до товаров или после.

Раздел «Страница товара» – здесь можно настроить поведение кнопки «Купить» при нулевом остатке товара: показывать ее, скрывать или заменить на кнопку «Предзаказ». Можно скрыть кнопки «поделиться в соц.сетях» в карточках товаров и отключить сравнение товаров.

Раздел «Блог и статьи» – здесь можно скрыть отображение автора статьи и фото статей.

Настройки могут отличаться в разных шаблонах.

3. Кнопки управления

Кнопка «Сбросить» – сбрасывает сделанные изменения.

Кнопка «Сохранить» – сохраняет изменения. Не забывайте ее нажимать.

Панель виджетов

Виджеты – контейнеры в которых размещаются блоки с информацией.

Виджеты можно менять местами.

У каждого виджета есть свои настройки.

Вы можете перемещать, добавлять, скрывать или удалять виджеты. Добавлять в виджеты новые блоки информации или редактировать их.

www.insales.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о