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

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

Знакомство веб-дизайнера с Shopify Мы рассмотрим следующие аспекты:

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

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

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

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

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

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

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

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

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

Продукция

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

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

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

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

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

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

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

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

Коллекции

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

Знакомство веб-дизайнера с Shopify
Коллекции – логическое группирование товаров

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

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

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

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

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

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

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

  • Равно;
  • Больше чем;
  • Меньше чем;
  • Начиная от;
  • Заканчивая;
  • Включает.

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

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

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

Теги товаров

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

Знакомство веб-дизайнера с Shopify
Фильтрация по тегам на примере магазина Pure Fix Cycles

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

Темы оформления (шаблоны)

Если вы когда-нибудь занимались созданием веб-сайтов, то разработать шаблон для Shopify не составит труда.

Каждый шаблон Shopify состоит из четырех основных элементов:

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

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

Знакомство веб-дизайнера с 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 }}

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

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

В следующих статьях из данной серии мы познакомим вас с языком шаблонов ShopifyLiquid , и покажем, как быстро начать работу с микрошаблонами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *