Знакомство веб-дизайнера с Shopify

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

Мы рассмотрим следующие аспекты:

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

Партнерская программа Shopify

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

Партнерская программа Shopify

Partners: бесплатная регистрация в партнерской программе позволяет дизайнерам сразу же начать создавать шаблоны

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

Знакомство с Liquid – языком шаблонов Shopify

Дизайн интернет-магазина

Все шаблоны для этой CMS демонстрируют гибкость системы Shopify. В ней нет наставлений касательно использования HTML-кода, классов или ID, и вы также не ограничены с точки зрения расстановки элементов дизайна.

Ключевые аспекты

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

Продукция

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

Продукция

Консоль Shopify – быстрый и легкий доступ к товарам и настройкам

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

Такой набор атрибутов позволяет предложить покупателю следующий ассортимент:

  • Футболка черная S;
  • Футболка черная M;
  • Футболка черная L;
  • Футболка белая S;
  • Футболка белая M;
  • Футболка белая L;
  • Футболка зеленая S;
  • Футболка зеленая M;
  • Футболка зеленая L.

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

Продукция - 2

Редактирование вариаций товаров производится в разделе «Products»

Вариации – это действительно удобное свойство Shopify, которое позволяет не загромождать магазин десятками практически одинаковых страниц.

Коллекции

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

Коллекции
Комплексный подход к SEO для Magento: основные принципы

Коллекции – логическое группирование товаров

Если взять в пример Best Made Co., то мы увидим, что они используют следующие коллекции для сортировки товаров:

  • Одежда;
  • Аксессуары;
  • Сумки и кейсы;
  • Книги и карты;
  • Товары для дома;
  • Товары для походов.

Одна и та же сумка может подходить и под категорию «Сумки и кейсы». Коллекции позволяют разместить товар в нескольких категориях.

Кроме ручного распределения товаров по коллекциям, Shopify также предлагает автоматический функционал. К примеру, можно автоматически пополнять коллекцию товаров дешевле 10$.

Также можно сортировать товары по следующим признакам:

  • Заголовок;
  • Тип товара;
  • Производитель;
  • Стоимость;
  • Теги;
  • Сравнение по цене;
  • Вес;
  • Наличие;
  • Название вариации.

Для сравнения можно использовать следующие условия:

  • Равно;
  • Больше чем;
  • Меньше чем;
  • Начиная от;
  • Заканчивая;
  • Содержит.

Также в панели администрирования можно создавать «smart collections». Они допускают сортировку следующими способами:

  • Вручную;
  • По наиболее продаваемым товарам;
  • В алфавитном порядке (А-Я);
  • В алфавитном порядке (Я-А);
  • По цене (от высокой к низкой);
  • По цене (от низкой к высокой);
  • По дате (от нового к старому);
  • По дате (от старого к новому).

У коллекций есть атрибуты, которые можно редактировать при помощи панели администрирования Shopify. Среди них можно отметить заголовки, описания и изображение.

Теги товаров

Мы также можем использовать теги. Теги помогают при фильтрации коллекций. Давайте рассмотрим это на примере магазина Pure Fix Cycles:

Теги товаров

Фильтрация по тегам на примере магазина 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 в виде проекта с открытым исходным кодом.

Давайте более подробно изучим папки и их предназначение в шаблонах.

Выбор CMS для интернет магазина

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 }}
Config

Шаблоны можно редактировать при помощи онлайн-редактора

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