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

Мы рассмотрим следующие аспекты:
- Партнерская программа Shopify;
- Дизайн интернет-магазина;
- Ключевые аспекты, которые следует учитывать при разработке дизайна для магазина;
- Структура шаблона Shopify;
- Liquid: язык шаблонов Shopify;
- Создание тем оформления;
- Ресурсы, которые помогут вам в дальнейшей работе.
Партнерская программа Shopify
Перед тем как начать, я настоятельно рекомендую вам бесплатно зарегистрировать партнерский аккаунт в Shopify. Дизайнеры могут абсолютно бесплатно разрабатывать шаблоны (платные тарифы вступают в силу только после того, как ваши клиенты запускают свой магазин в работу):

Партнерский аккаунт позволяет создавать сколько угодно многофункциональных магазинов. У них не будет срока действия, и использовать их можно будет в целях тестирования совершенно бесплатно.
Дизайн интернет-магазина
Все шаблоны для этой CMS демонстрируют гибкость системы Shopify. В ней нет наставлений касательно использования HTML-кода, классов или ID, и вы также не ограничены с точки зрения расстановки элементов дизайна.
Ключевые аспекты
Как и другие платформы, Shopify имеет свои ключевые особенности, с которыми нужно познакомиться. Давайте посмотрим, каким образом происходит развертывание магазина.
Продукция
В любом интернет-магазине должны быть товары, и Shopify не исключение. Товары – это основной компонент платформы Shopify, и именно вокруг него следует создавать тему оформления. У каждого товара в магазине есть свои атрибуты, и самые основные – это заголовок, описание, цена и изображение. Также в спецификации товара могут быть указаны вес, цвет и размер. Все эти атрибуты редактируются с помощью панели администрирования:

Внутри системы Shopify у каждого товара также может быть несколько вариаций. По умолчанию, каждый созданный товар имеет единственную вариацию, а вы можете добавить дополнительные. Например, если футболка продается в трех цветах (черный, белый и зеленый), и в трех размерах (S, M и L).
Такой набор атрибутов позволяет предложить покупателю следующий ассортимент:
- Футболка черная S;
- Футболка черная M;
- Футболка черная L;
- Футболка белая S;
- Футболка белая M;
- Футболка белая L;
- Футболка зеленая S;
- Футболка зеленая M;
- Футболка зеленая L.
Можно указать определенные подробности для каждой комбинации. К примеру, можно выставить разный ценник на футболки в зависимости от размера:

Вариации – это действительно удобное свойство Shopify, которое позволяет не загромождать магазин десятками практически одинаковых страниц.
Коллекции
После добавления товаров их нужно распределить по категориям. Сделать это можно с помощью коллекций. Я предпочитаю описывать коллекции как “логическое группирование товаров”. В других платформах чаще встречается термин категории. Каждый товар может быть определен в одну или несколько коллекций, что позволяет эффективно представлять товары в разных и смежных категориях:

Если взять в пример Best Made Co., то мы увидим, что они используют следующие коллекции для сортировки товаров:
- Одежда;
- Аксессуары;
- Сумки и кейсы;
- Книги и карты;
- Товары для дома;
- Товары для походов.
Одна и та же сумка может подходить и под категорию «Сумки и кейсы». Коллекции позволяют разместить товар в нескольких категориях.
Кроме ручного распределения товаров по коллекциям, Shopify также предлагает автоматический функционал. К примеру, можно автоматически пополнять коллекцию товаров дешевле 10$.
Также можно сортировать товары по следующим признакам:
- Заголовок;
- Тип товара;
- Производитель;
- Стоимость;
- Теги;
- Сравнение по цене;
- Вес;
- Наличие;
- Название вариации.
Для сравнения можно использовать следующие условия:
- Равно;
- Больше чем;
- Меньше чем;
- Начиная от;
- Заканчивая;
- Содержит.
Также в панели администрирования можно создавать «smart collections». Они допускают сортировку следующими способами:
- Вручную;
- По наиболее продаваемым товарам;
- В алфавитном порядке (А-Я);
- В алфавитном порядке (Я-А);
- По цене (от высокой к низкой);
- По цене (от низкой к высокой);
- По дате (от нового к старому);
- По дате (от старого к новому).
У коллекций есть атрибуты, которые можно редактировать при помощи панели администрирования Shopify. Среди них можно отметить заголовки, описания и изображение.
Теги товаров
Мы также можем использовать теги. Теги помогают при фильтрации коллекций. Давайте рассмотрим это на примере магазина Pure Fix Cycles:

Как видно на приведенном выше изображении, мы находимся в коллекции XXX, и у нас есть возможность сортировать товары при помощи выпадающего списка тегов.
Темы оформления (шаблоны)
Если вы когда-нибудь занимались созданием сайтов, то разработать шаблон для Shopify не составит труда.
Каждый шаблон Shopify состоит из четырех основных элементов:
- HTML-файлы (с расширением .liquid);
- CSS-код;
- Javascript-код (опционально);
- Изображения.
Эти файлы расположены в 5 папках. Как видите, здесь представлены лишь необходимые для начала работы файлы. Базовая структура шаблона Shopify выглядит следующим образом:

Я также загрузил свой шаблон для быстрого начала работы на GitHub. Не стесняйтесь, и загружайте себе.
Также стоит отметить, что темы оформления Shopify не позволяют использовать в своей структуре вложенные папки. Еще вы наверняка заметили отсутствие расширения .html у соответствующих файлов. В шаблонах Shopify эти файлы имеют расширение .liquid. Например, product.liquid и index.liquid.
Liquid - это отдельный язык шаблонов Shopify. Он был разработан создателями Shopify, и теперь доступен на GitHub в виде проекта с открытым исходным кодом.
Давайте более подробно изучим папки и их предназначение в шаблонах.
Assets
Папка assets – это хранилище изображений, javascript и css-файлов.
Многие люди, включая меня, часто разделяют файлы на подпапки в зависимости от типа (например, папка CSS, папка для картинок и так далее). Учтите, что в случае с шаблонами Shopify такая сортировка невозможна. Все ваши файлы должны находиться в корне папки assets. Все файлы, которые вы загружаете с помощью панели администрирования Shopify, также добавляются в эту папку.
Config
Работая с вашим первым шаблоном, думаю, вам не стоит уделять внимание папке config. Однако по мере развития навыков в разработке шаблонов она может пригодиться вам. В этой папке находится файл settings.html. Следует обратить внимание, что это единственный файл в структуре с расширением .html.
Если открыть его в текстовом редакторе, то перед вами предстанет типичный файл настроек. В нем отображены формы загрузки, чекбоксы, списки и текстовые поля. Он позволяет дизайнерам создавать поля ввода, с помощью которых продавцы могут изменять данные, относящиеся к шаблону.
Чтобы было понятнее, давайте предположим, что нам нужно позволить владельцу магазина изменять цвет фона. Это можно сделать, добавив в файл settings.html следующий код:
<input class="color" id="text_color" type="text" name="text_color" value="#000000" />
Теперь мы можем использовать эту строку для изменения цвета текста в нашем шаблоне с помощью глобальной переменной:
{{ settings.text_color }}

Layouts
Папка layout обычно содержит всего один файл под названием theme.liquid. В нее можно помещать и другие файлы, но об этом мы поговорим позже.
Файлы разметки позволяют нам определить все элементы нашего сайта в одном файле. При запросе страницы Shopify оборачивает этот файл в «микрошаблон», и выводит готовую страницу.
Одно из главных преимуществ файла разметки заключается в том, что он позволяет сохранять код структурированным и легко вносить серьезные изменения, что значительно облегчает работу с внутренними микрошаблонами.
Есть два важных тега Liquid, которые нужно включать в файл разметки Shopify. Первый – это {{ content_for_header }}. Эта переменная должна быть помещена в файл разметки. Тег позволяет Shopify размещать необходимый код в заголовочную часть документа. Например, скрипты для статистики и трекинга, а также CSS-файлы.
Второй тег - {{ content_for_layout }}. Он обычно находится в середине файла шаблона, где нужно вывести микрошаблон.
Snippets
Сниппеты – это файлы, которые содержат фрагменты кода с возможностью повторного использования. Они также имеют расширение .liquid.
Я использую сниппеты следующим образом:
- Для вывода кода на каждой странице сайта – такой код можно поместить в файл разметки;
- Для вывода кода на определенной странице – код следует поместить в соответствующий микрошаблон;
- Для вывода кода на определенных страницах – код следует помещать в файл сниппета.
Хорошим примером использования сниппетов можно считать ссылки на социальные сети, а также блоки пагинации. Сниппеты можно применять в шаблонах с помощью специального тега liquid {% include 'название-сниппета' %}. Учтите, что при внедрении сниппета в шаблон необязательно указывать тип расширения .liquid.
Template
Я называю файлы в папке templates микрошаблонами, так как они представляют собой отдельные небольшие фрагменты кода, которые вставляются в ваш файл шаблона.
В большинстве случаев разметка ваших сайтов будет содержаться в файле theme.liquid. Список микрошаблонов, из которых состоит шаблон:
- 404.liquid — используется, когда страница "не найдена";
- article.liquid — страница записей в блоге;
- blog.liquid — страница архива для блока;
- cart.liquid — список всех товаров в корзине;
- collection.liquid — список всех товаров из этой коллекции;
- index.liquid — главная страница, которую можно настроить на отображение одного или нескольких товаров, записей из блога или коллекций;
- list-collections.liquid – список всех коллекций товаров;
- page.liquid — базовая страница для контента, которую можно использовать для отображения условий соглашения, информации о магазине и так далее;
- product.liquid — используется для отображения конкретных товаров;
- search.liquid — шаблон для вывода результатов поиска.
Привязываем шаблоны к URL-адресам в Shopify
Теперь осталось узнать, когда эти шаблоны выводятся на страницы магазина. Здесь все довольно просто. Shopify определяет, какой шаблон отобразить, руководствуясь запрошенным URL. В Shopify предусмотрена собственная система маршрутизации, и именно она определяет, какой шаблон должен быть послан браузеру.
Давайте попытаемся понять, как выводятся шаблоны на основе запрошенного URL:
- /несуществующий-url ; 404.liquid;
- /blogs/{blog-name}/{article-id-handle} ; article.liquid;
- /blogs/{blog-name} ; blog.liquid;
- /cart ; cart.liquid;
- /collections ; list-collections.liquid;
- /collections/{collection-handle} ; collection.liquid;
- /collections/{collection-handle}/{tag} ; collection.liquid;
- / ; index.liquid;
- /pages/{page-handle} ; page.liquid;
- /products ; list-collections.liquid;
- /products/{product-handle} ; product.liquid;
- /search?q={поисковой-запрос} ; search.liquid.
Элементы в { } отражают переменную, которая влияет на тип данных, выводимых в шаблон. К примеру, если мы возьмем паттерн URL /collections/{collection-handle}, то выводимые данные будут разными при использовании /collections/bikes или /collections/cars.
Как видно, несколько разных URL-паттернов используют один общий файл шаблона. То есть, и /products, и /collections используют один и тот же шаблон list-collections.liquid.
Точно так же, /collections/, /collections/{collection-handle}/ и /collections/{collection-handle}/{tag} используют один и тот же шаблон collection.liquid.
В завершение
Теперь, когда мы имеем четкое представление о ключевых аспектах работы платформы Shopify, пришло время более подробно изучить строение кода.
В следующих статьях из этой серии мы познакомим вас с языком шаблонов Shopify – Liquid, и покажем, как быстро начать работу с микрошаблонами.