Знакомство веб-дизайнера с 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 состоит из четырех основных элементов:

1. HTML-файлы (с расширением .liquid);
2. CSS-код;
3. Javascript-код (опционально);
4. Изображения.

Эти файлы расположены в 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, и покажем, как быстро начать работу с микрошаблонами.