Домой створення та просування сайтів Знайомство веб-дизайнера з Shopify

створення та просування сайтів

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

От

18.03.2020

1085

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

Ми розглянемо наступні аспекти:

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

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

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

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

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

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

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

Ключові аспекти

Як і інші платформи, Shopify має свої ключові особливості, з якими потрібно познайомитися. Давайте подивимося, яким чином відбувається розгортання магазину.

Продукція

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

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

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

Такий набір атрибутів дозволяє запропонувати покупцю наступний асортимент:

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

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

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

Варіації – це дійсно зручне властивість Shopify, яке дозволяє не захаращувати магазин десятками практично однакових сторінок.

Колекції

Після додавання товарів їх потрібно розподілити за категоріями. Зробити це можна за допомогою колекцій. Я віддаю перевагу описувати колекції як «логічне групування товарів». В інших платформах частіше зустрічається термін категорії. Кожен товар може бути визначений в одну або кілька колекцій, що дозволяє ефективно представляти товари в різних і суміжних категоріях:

Колекції – логічне групування товарів

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

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

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

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

Також можна сортувати товари за такими ознаками:

Заголовок;
Тип товару;
Виробник;
Вартість;
Теги;
Порівняння за ціною;
Вага;
Наявність;
Назва варіації.

Для порівняння можна використовувати наступні умови:

Одно;
Більше ніж;
Менше ніж;
Починаючи від;
Закінчуючи;
Містить.

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

Вручну;
За найбільш продаваним товарам;
В алфавітному порядку (А-Я);
В алфавітному порядку (Я-А);
За ціною (від високої до низької);
За ціною (від низької до високої);
За датою (від нового до старого);
За датою (від старого до нового).

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

Теги товарів

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

Фільтрація по тегам на прикладі магазину 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 наступний код:

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

Шаблони можна редагувати за допомогою онлайн-редактора

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.