Содержание
Как создать интернет-магазин с Drupal 9 и Drupal Commerce
Обычные магазины по-прежнему продают больше товаров, чем интернет-магазины, однако последние быстро догоняют: в 2019 г. 14,1% всех розничных покупок по всему миру были производится онлайн, и к 2023 году этот показатель, как ожидается, вырастет до 22%.
Итак, если у вашего бизнеса еще нет интернет-магазина, самое время задуматься об его открытии.
УЗНАТЬ БОЛЬШЕ: Услуги по разработке Drupal в Lemberg Solutions
Существует множество платформ электронной коммерции, из которых вы можете выбирать, но в этом посте я сосредоточусь на том, как вы можете создать интернет-магазин с помощью Drupal Commerce. Это отличный вариант, и вот почему:
Зачем использовать Drupal Commerce для создания интернет-магазина
- Как и все Drupal, Drupal Commerce с открытым исходным кодом .
- Это очень безопасно . Существует целая команда Drupal Security, занимающаяся мониторингом основного кода и рассмотрением проблем.
- Он предлагает множество готовых решений , включая продукты, тележки, магазины, заказы и платежи, которые позволяют вам создать интернет-магазин с нуля, даже если у вас нет большого опыта программирования.
- Он невероятно настраиваемый из коробки , есть много функций, которые вы можете настроить только с помощью пользовательского интерфейса. Дополнительные модули часто имеют интеграцию для работы через пользовательский интерфейс.
- Сообщество Drupal Commerce помогает разрабатывать новые функции и устранять проблемы. Тем не менее, большая часть работы здесь выполняется Centarro (ранее Commerce Guys), и они призывают других присоединиться к их усилиям (в настоящее время в канале Slack проекта около 2000 участников).
- Теперь имеет большое разнообразие систем оплаты и доставки благодаря тому, что многие компании, работающие с Drupal Commerce, делятся функциями, которые они разрабатывают, с сообществом Drupal и публикуют множество модулей, которые еще больше расширяют Commerce.
- Помимо интернет-магазинов, Drupal и Commerce также можно использовать для создания систем CRM, ERP и PIM .
Итак, что означает настройка магазина Drupal Commerce на Drupal 9на самом деле выглядеть? Позвольте мне провести вас через процесс.
Давайте создадим простой интернет-магазин, используя готовые функции Commerce
Существует ряд функций, которые вы получаете сразу после установки модуля Drupal Commerce. Давайте посмотрим, как мы можем настроить простой интернет-магазин только на основе этого модуля. Мы также проверим все встроенные функции Commerce в Drupal 9. Мы будем использовать Сlaro в качестве темы администратора и Olivero в качестве передней темы.
Сначала включите Торговые субмодули :
- Корзина
- Касса
- Заказ
- Оплата
- Цена
- Продукт
- Магазин 900 20
Прежде чем двигаться дальше, проверьте, настроена ли у вас хотя бы одна валюта ( / admin/commerce/config/currencies ).
Затем добавьте магазин по умолчанию ( admin/commerce/config/stores ).
Магазины — это объекты контента, поэтому, когда нам нужно развернуть новый магазин на сервере, мы должны снова добавить его из панели администратора на рабочем сайте.
Теперь нам нужен хотя бы один платежный шлюз . Давайте добавим оплату счета ( admin/commerce/config/payment-gateways ). С помощью этого способа оплаты мы можем собрать всю платежную информацию, необходимую для совершения покупки.
Модуль Commerce предоставляет тип продукта по умолчанию и вариант продукта , который мы можем начать использовать для нашего магазина ( admin/commerce/products ).
Блок тележки не размещается на сайте, поэтому нам нужно перейти на страницу администратора ( admin/structure/block/list/olivero ) и разместить его в любой области, которую мы предпочитаем.
Мы также получаем возможность настроить содержимое корзины для отображения в раскрывающемся меню.
Вот как выглядит наша страница корзины на данный момент:
И вот как настроена наша страница корзины ( admin/structure/views/view/commerce_cart_form ):
90 002
Так как мы не вошли в систему на первом этапе оформления заказа, мы получим форма входа . Мы можем продолжить в качестве гостя на этом этапе.
Наша страница оформления заказа выглядит довольно хорошо с темами по умолчанию. Легко найти все нужные нам поля и понятно, как ими пользоваться.
Поскольку у нас есть только один платежный шлюз, он будет использоваться в качестве метода оплаты по умолчанию для нашего заказа, и мы не будем указывать его при оформлении заказа.
И на последнем шаге вам также будет предложено создать учетную запись :
Это самый минимум конфигураций, которые нам нужны для запуска нашего магазина Commerce.
Конечно, есть гораздо больше функций, которые мы могли бы настроить прямо из коробки, чтобы сделать наш магазин более сложным с точки зрения серверной части и более простым с точки зрения взаимодействия с пользователем, но на этом этапе мы не будем усложнять.
Создание рекламных акций
Давайте перейдем к добавлению нескольких рекламных акций, чтобы посмотреть, как они работают ( admin/commerce/promotions ).
Здесь мы настроили акцию для определенного типа Продукта, что означает, что товары определенного типа будут получать скидки. Если мы добавим купоны в акцию, товары будут поставляться со скидкой только в том случае, если действительный купон добавлен при оформлении заказа и условия выполнены. По умолчанию мы получаем пять типов предложений :
- Купить X Получить Y
- Фиксированная сумма от каждого соответствующего продукта
- Фиксированная сумма от промежуточной суммы заказа
- Процент от каждого соответствующего продукта
- Процент от промежуточной суммы заказа
Эти типы предложений легко расширить или добавить собственные с помощью системы плагинов Commerce.
Добавление налогов
Налоги распространяются практически на все товары, продаваемые в интернет-магазинах, поэтому модуль «Налоги» не менее популярен, чем «Акции». Вы можете добавить налог с пользовательскими ставками или использовать существующие. В настоящее время доступны четыре плагина, с которыми мы можем работать:
- Канадский налог с продаж
- Европейский Союз НДС
- НДС в Норвегии
- НДС в Швейцарии
Каждый из этих плагинов имеет определенные ставки для определенных регионов.
Если мы выберем « Применить налоги к расчетной цене » в отображении цены варианта продукта, мы получим цену с учетом налогов. Например, если у нас есть продукт с первоначальной ценой 20 долларов и налоговой ставкой 25% на странице продукта, окончательная цифра, которую мы увидим, будет 25 долларов. Налоги отображаются на странице корзины, чтобы клиенты знали сумму, которую они заплатят в качестве налога.
Мы также можем включить дополнительный модуль под названием «Налоговые условия для коммерческих продуктов» и установить условия для налогов в пользовательском интерфейсе.
Этот модуль зависит от модуля «Налог на продукт», который позволяет установить тип налога для каждого продукта.
Если цены на ваши товары уже включают налоги, установите для вашего магазина «Цены указаны с учетом налогов» ( admin/commerce/config/stores ).
Коммерческие функции создаются с использованием плагинов и сервисов, что означает, что вы можете добавлять свои собственные или переопределять существующие. Вот почему у нас есть такое большое разнообразие модулей, которые работают с Commerce и могут добавлять еще больше функций.
Прайс-лист Commerce
Еще один модуль, который, вероятно, используется на каждом коммерческом сайте, — это Прайс-лист. Используйте его, чтобы контролировать цены на определенный список товаров и показывать эти цены конкретным пользователям, например, B2B или клиентам клуба. Прайс-лист также позволяет вам реализовать скидку для пользователя, который покупает более одного продукта и в результате получает более низкую цену.
Даты начала и окончания могут быть установлены с тремя типами правил:
- Все
- Конкретный клиент
- Роли клиентов
На вкладке «Цены» мы можем импортировать/экспортировать цены в формате CSV, что очень удобно, когда нам нужно массовое обновление цен. Доступен образец файла импорта, а также можно установить собственные столбцы и разделители для файла CSV.
Другим интересным полем является количество продуктов, когда применяется прейскурантная цена. Если мы добавим в корзину одну «Кружку кофе», цена будет 10 долларов, но если мы добавим две или более, цена упадет до 8 долларов за кофейную кружку.
По умолчанию на странице отдельного продукта мы видим только исходную цену, а не прайс-лист или цену со скидкой. Чтобы показать фактическую цену продажи, нам нужно изменить формат отображения цены на «Расчетный». Его следует изменить для типа вариации продукта.
На странице редактирования варианта продукта вы найдете вкладку «Цены» со всеми ценами прайс-листа, которые являются ссылкой для варианта.
Можно отфильтровать цены по названию прайс-листа. Вы также можете добавить новую цену на этой странице. Для этого вам просто нужно выбрать прайс-лист, где он должен быть размещен. Цены на продукты могут фактически полностью контролироваться прайс-листами без необходимости указывать какие-либо отдельные цены. Эта функция особенно полезна для магазинов, которые продают много товаров — обновление каждого из них вручную заняло бы слишком много времени.
В наших проектах у нас было несколько случаев, когда имело смысл контролировать все цены на товары с помощью прайс-листов. Мы добавили административные страницы, где администраторы могли найти товары без цен и добавить их в определенные прайс-листы.
Коммерческая доставка
Интернет-магазин не является интернет-магазином без доставки. Из коробки мы не получаем никаких способов доставки в форме оформления заказа, поэтому нам нужно установить модуль Commerce Shipping. После его включения нам нужно будет добавить способы доставки ( admin/commerce/shipping-methods ).
Затем добавьте панель информации о доставке в процесс оформления заказа ( admin/commerce/config/checkout-flows/manage/default ).
Нам также необходимо включить поддержку доставки для нашего типа заказа ( admin/commerce/config/order-types/default/edit ) и типа варианта продукта ( admin/commerce/config/product-variation- типы/по умолчанию/редактировать ). Когда мы включим все эти настройки, мы получим встроенную форму с информацией о доставке на странице оформления заказа.
И на этапе обзора у нас есть раздел доставки с информацией о доставке и стоимостью доставки на боковой панели сводки.
Когда мы разрешаем доставку для варианта типа продукта, мы получаем новое поле веса для типа варианта, поэтому мы можем рассчитать стоимость доставки на основе веса продукта.
Существует множество интеграций доставки, которые позволяют нам использовать несколько служб доставки в зависимости от региона, который обслуживает магазин.
В Lemberg Solutions мы разработали Commerce Novaposhta Shipping для службы доставки Новой Почты в Украине.
Модуль «Доставка» включает в себя различные функции, такие как налоги на доставку, упаковку и типы доставки, которые вы можете использовать для своего магазина, чтобы сделать его более гибким.
Я хотел бы добавить пару слов о том, где хранятся адреса оплаты и доставки, а также вся дополнительная информация, которую клиенты вводят на странице оформления заказа. Модуль Commerce зависит от модуля Profile. Когда мы включаем модуль, он добавляет тип профиля клиента по умолчанию. Этот тип профиля используется для хранения всей информации, относящейся к пользователю. Когда пользователь вводит платежный адрес, Commerce создает сущность платежного профиля клиента и сущность профиля доставки для адреса доставки. Заказ имеет ссылки на эти две сущности и использует их данные для получения заказа. Если мы хотим использовать разные поля для доставки и оплаты, мы можем включить режимы форм для профиля Заказчика и настроить отображение нужных нам полей.
Настройка платежных шлюзов
Существует множество модулей коммерческих платежных шлюзов, реализующих различные платежные услуги. Большинство из них работают с Drupal 8.x, но не все готовы для Drupal 9.x. Вы можете найти полный список модулей в документации Commerce (их около 140). PayPal — один из них, и он уже поддерживает Drupal 9.x.
Итак, теперь у нас есть два варианта оплаты в форме оформления заказа — счет-фактура и PayPal.
Если вы планируете перенести существующий интернет-магазин или запустить новый с настраиваемой платежной службой, вам будет приятно узнать, что это не так сложно реализовать с помощью плагинов Commerce gateway. Одна из причин, по которой у нас так много модулей, — грамотный подход к реализации платежной системы в модуле «Коммерция».
Заключение
Основываясь на своем опыте работы с Drupal 9 и Commerce, я могу с уверенностью сказать, что они оба хорошо подходят для создания интернет-магазинов.
Модули, которые не поддерживают Drupal 9но их не так уж сложно настроить, чтобы заставить их работать. Drupal 8 и 9 не так сильно отличаются, как Drupal 7 и 8 — добавьте пару патчей и все.
Модуль «Коммерция» охватывает большую часть функциональности, необходимой для интернет-магазинов. Когда у нас будет больше магазинов на новейших версиях Drupal и Commerce, у нас будет еще больше разнообразных новых функций на выбор, и будет исправлено больше существующих проблем.
Создайте свой интернет-магазин с Lemberg
Ищете помощь в создании своего интернет-магазина? Наша команда Drupal имеет многолетний опыт создания решений для электронной коммерции. Свяжитесь с Роем Виковичем, нашим менеджером по развитию бизнеса, чтобы обсудить ваш проект.
Как создать индивидуальную тему Shopify с нуля (+ недостатки)
Когда дело доходит до создания идеального внешнего вида и макета для вашего магазина Shopify, существует множество вариантов на выбор.
Вы можете выбрать одну из множества платных или бесплатных тем, которые предлагает магазин тем Shopify.
Многие компании работают, и до определенного момента они прекрасно работают.
Но если вы немного более амбициозны, вам нужно выйти за рамки стандартного стиля и ограниченной функциональности этих тем.
Однако разобраться с разработкой темы для Shopify может оказаться непростой задачей.
Так как же создать уникальную тему , которая даст вам свободу и возможности для создания интернет-магазина, необходимого вашему бренду?
Продолжайте читать, чтобы узнать, что нужно для создания темы Shopify с нуля, и различные способы сделать это, чтобы вы могли решить, какой маршрут наиболее подходит для вашего бренда. Перейдите к последнему пункту, чтобы выбрать простой путь с помощью интуитивно понятного конструктора страниц Shopify.
В этом посте мы рассмотрим:
- Что представляет собой тема Shopify
- Предварительное планирование для создания вашей темы
- Как создать пользовательскую тему Shopify с Scratch
- Примечания к магазину Shopify 2. 0
- The Shopify самый простой способ создать собственную тему Shopify
0 #cta-visual-pb#
Что такое тема Shopify?
Тема Shopify определяет общий дизайн, внешний вид и атмосферу вашего магазина. Это структура, которую вы используете для построения всех элементов вашего магазина.
Тема — это основа вашего магазина. И в экосистеме Shopify есть множество тем.
Это то, на чем покоятся все ваши страницы, приложения, изображения и т. д. Поэтому для успеха вашего магазина крайне важно убедиться, что они имеют прочную основу.
#cta-paragraph-pb#Если вы не знаете, с чего начать поиск правильного стиля темы, вы можете использовать это удобное руководство для определения тем Shopify , чтобы сравнить, какие темы используют другие магазины.
Можете ли вы создать свою собственную тему Shopify?
Если коротко, то да!
Но это может быть немного сложнее, чем вы думаете, когда отправляетесь в путь.
Shopify разработала торговую площадку, где как премиальные, так и бесплатные готовые темы предоставляют владельцам магазинов библиотеку визуально ошеломляющих тем, которые позволяют быстро запустить магазин.
Вы можете сэкономить время и деньги, если пойдете по заранее разработанному маршруту.
Но если вы читаете этот пост, то, скорее всего, вы уже знаете о недостатках :
- Ограниченная масштабируемость, предназначенная для нетехнических пользователей конверсии
Альтернативой этим готовым темам является создание собственной темы для вашего магазина Shopify.
Магазин тем Shopify
Могу ли я переключиться с существующей темы?
Разумно ожидать, что ваш магазин будет расти и расширяться.
И при этом вам нужно будет адаптировать свою тему, чтобы она могла справиться с дополнительным спросом, который предъявляет к ней ваш новый популярный магазин.
Вам понадобится больше контроля над макетом каждой страницы и элемента на вашем сайте. Вам также потребуется больше гибкости для тестирования размещения контента и измерения его влияния на качество обслуживания клиентов и конверсию. используя тему, лицензированную сотнями (или тысячами) других интернет-магазинов.
Хорошей новостью является то, что вы можете легко изменить свою тему с готового предложения Shopify на настраиваемую или полностью созданную на заказ тему, выполнив несколько простых шагов.
Shopify позволяет хранить до 20 тем в вашей библиотеке тем, поэтому вы можете менять темы, не беспокоясь о потере контента.
#cta-visual-pb#
Планирование вашей пользовательской темы Shopify
Прежде чем вы сможете приступить к созданию, вам нужен план для вашего интернет-магазина.
Это больше, чем просто цветовая схема и размещение вашего логотипа.
Вам предстоит спланировать все свое путешествие, и вы делаете это с нуля.
Как создать шаблон веб-сайта с нуля
Планировка вашего магазина должна быть разработана таким образом, чтобы способствовать идеальному потоку покупателей от точки входа до точки выхода.
Если все пойдет хорошо, это касса.
Этот идеальный поток и есть ваша воронка. Это похоже на то, как тщательно планируются розничные магазины, чтобы подтолкнуть покупателей к кассе (с многочисленными перекрестными продажами, происходящими даже в конце).
При создании плана вашего магазина рассмотрите размещение ваших элементов, как шагов в путешествии.
Подумайте о:
- Откуда они входят в магазин (т. е. с какой страницы они могут начать).
- То, что они будут искать. Независимо от того, посещают ли ваши клиенты ваш сайт в поисках новой черной футболки или вдохновения для рождественских подарков, вам нужно как можно быстрее предоставить им то, что они хотят.
- Какой первый шаг? Вы хотите, чтобы они ввели поисковый запрос? Нажмите на специальную акцию? То, куда вы хотите, чтобы ваши клиенты нажимали, должно быть очевидным, как только они попадут на сайт.
- Где они будут щелкать, чтобы перейти к следующему шагу, затем к следующему шагу и так далее.
- Сколько шагов слишком много, чтобы добраться туда, куда они хотят?
- Где будут размещены вторичные элементы/ссылки (блоги, правила возврата, связанные элементы, отзывы и т. д.).
Cettire предлагает посетителям наглядно изучить свою коллекцию на целевой странице
В вашем плане макета страницы должны быть учтены передовые методы конверсии, которые сделают процесс покупок приятным и сведут к минимуму трения.
Это не обязательно должно быть супертехническим — это может быть немного больше, чем линейный рисунок, изображающий макет вашего сайта до того, как будет добавлено какое-либо украшение.
Этот подход к плану объединяет картирование сайта и построение каркаса, чтобы помочь вам решить, как будет располагаться ваш магазин.
Moz использует этот макет электронной коммерции в качестве примера элементов для оптимизации на странице продукта
#cta-visual-pb#
Как быстро создать веб-сайт Shopify
Shopify позволяет создавать страницы всех типов при настройке магазина, а Shogun Page Builder позволяет создавать неограниченное количество страниц при работе с платформой.
Хотя ваш магазин, скорее всего, будет отличаться от других контентом и продуктами, которые вы продаете, у вас все равно будут стандартные страницы, которые имеют решающее значение для успешного функционирования магазина.
Вам следует сосредоточиться на создании привлекательных и удобных для навигации макетов для следующих обязательных страниц:
- Домашняя страница с четким ценностным предложением, простой навигацией и недвусмысленными призывами к действию.
- Целевые страницы с удачно расположенными привлекательными изображениями и элементами, отображающими уровень запасов и обратный отсчет продаж, создавая ощущение срочности.
- Страницы продуктов с оптимизированными названиями продуктов, отзывами клиентов и простой функцией добавления в корзину.
- Страницы-коллекции , которые группируют продукты по брендам, интересам клиентов, рекламным акциям и т. д., что упрощает поиск продуктов и уменьшает трения.
И хотя это не является абсолютно необходимым, вы также должны подумать о странице блога, чтобы помочь повысить рейтинг вашего сайта и привлечь больше клиентов к поиску.
#cta-paragraph-pb# После того, как вы спроектировали свой идеальный магазин Shopify, вам захочется узнать все советы по продажам на Shopify. Итак, когда вы будете готовы, переходите к прочтению наших Полное руководство по началу продаж на Shopify . Страницы коллекции
можно легко создать и настроить всего за несколько простых шагов с помощью редактора Shogun; Изображение: Manitobah Mukluks
Как создать индивидуальную тему Shopify с нуля
После того, как вы распланировали свой сайт, пришло время приступить к его созданию!
Но прежде чем вы начнете, вы должны знать, что создание пользовательской темы может быть дорогостоящим и трудоемким процессом.
Если у вас нет опыта программирования, вам, скорее всего, понадобится помощь разработчика, который сделает дизайн и реализацию вашей пользовательской темы Shopify настолько гладкой, насколько это возможно.
Под капотом
Если вы любите приключения и уже разбираетесь в CSS и HTML, то вы можете рассмотреть возможность самостоятельной разработки темы Shopify.
Доступно множество полезных ресурсов, которые помогут вам познакомиться с Liquid — языком шаблонов, который вы будете использовать для создания собственной темы.
#cta-paragraph-pb# Примечание : JavaScript и JSON также используются вместе с Liquid, когда вы создаете собственную тему веб-сайта, чтобы расширить функциональные возможности, поэтому вам также потребуется знание этих языков и форматов.
Но даже если у вас есть некоторый опыт, создание темы Shopify с нуля может представлять собой серьезную техническую проблему.
В конце концов, все сводится к личному решению о том, на что лучше всего потратить свое время и энергию.
Если вы все еще готовы приступить к работе, первым шагом будет поиск подходящих инструментов для работы.
Понимание основ создания темы Shopify
Вот где резина отправляется в путь.
Создание уникальной темы с нуля потребует ознакомления с некоторыми специальными терминами. Как только вы поймете задействованные концепции, процесс станет намного яснее.
Для создания темы вам потребуются некоторые важные инструменты: Shopify CLI (или Theme Kit, если вы настраиваете темы до Store 2.0), Dawn и интеграция Shopify с GitHub.
Давайте разберем их:
- Shopify CLI (интерфейс командной строки).
Интерфейс командной строки — это инструмент для указания компьютерной программе (в данном случае Shopify), что делать.
Если вы не являетесь разработчиком, вы можете быть более знакомы с графическим пользовательским интерфейсом или редактором с перетаскиванием (например, Shogun’s Page Builder), который устраняет необходимость вникать во весь этот устрашающе выглядящий код.
В CLI команды выдаются строками текста (отсюда и название).
Чтобы вы могли сообщить Shopify, какие изменения вы хотите внести в свою пользовательскую тему, вам необходимо установить Shopify CLI на свой компьютер.
- Тема рассвета.
Это эталонная тема Shopify. Думайте об этом как о отправной точке для разработки вашего магазина Shopify.
После того, как вы клонировали Dawn, вы можете вносить в него изменения с помощью Shopify CLI.
Тема Dawn в магазине тем Shopify
«Клонирование» Dawn означает сохранение копии репозитория GitHub для темы Dawn на локальном компьютере.
Репозиторий GitHub — это файл, содержащий библиотеку всех внесенных вами изменений и обновлений. Думайте об этом как о руководстве по Shopify, которое вы пишете и регулярно обновляете!
Когда вы создадите собственную версию Dawn, вам нужно будет переименовать ее.
Это основа вашей пользовательской темы Shopify. После того, как вы переименовали свою тему, перейдите в свою учетную запись Shopify, чтобы связать тему с вашим магазином Shopify.
Поздравляем, вы успешно инициализировали и аутентифицировали свою собственную тему Shopify.
- Shopify Интеграция GitHub .
Это подключает вашу учетную запись GitHub к вашему магазину Shopify.
После того, как вы переименовали свой репозиторий и внесли свои настройки с помощью Shopify CLI, вы можете использовать интеграцию Shopify с GitHub, чтобы связать недавно созданную тему с вашим магазином Shopify.
Рабочий процесс разработки темы
Несмотря на то, что можно создать свою тему прямо в административной панели Shopify, для контроля версий лучше использовать рабочий процесс GitHub.
Наличие репозитория Git для вашей темы предоставляет вам историю и резервную копию.
Но помните: интеграция Shopify с GitHub означает, что любые внесенные вами изменения будут реализованы в вашей теме, поэтому не переходите сразу к этапу интеграции с GitHub, пока не просмотрите и не протестируете свою пользовательскую тему.
Чуть позже мы рассмотрим, как это сделать.
#cta-visual-pb#
Понимание Liquid
Если вы хотите создать свою тему Shopify с нуля, вам нужно разобраться с Liquid.
Liquid — это язык программирования, на котором написаны все темы Shopify.
В частности, он состоит из HTML-файлов, содержащих встроенный код, поэтому вам не нужно быть мастером внутреннего кодирования, чтобы заставить его работать на вас. .
Если вы знакомы с HTML и CSS, вам не составит труда разобраться с Liquid.
Liquid действует как мост между данными, которые Shopify хранит для вашего интернет-магазина, и кодом в браузере вашего клиента.
Большая часть функций интернет-магазина уже встроена в Shopify — вам просто нужно выучить язык, чтобы изменить способ отображения контента.
Вы по-прежнему будете работать с CSS и т. д., поэтому есть некоторые традиционные элементы дизайна сайта, с которыми вы можете быть знакомы.
Вот пример использования Liquid от Sitepoint:
Марк Данкли из Shopify курирует последнюю шпаргалку Liquid для тех, кто создает свои собственные темы Shopify. И мы собрали некоторые из основных элементов, которые вы должны знать из этой шпаргалки.
Если вы новичок в Liquid, это невероятно полезный ресурс.
Собираем все вместе
Итак, теперь у вас есть все части головоломки, вам нужно только собрать их вместе!
Если вы новичок в этом деле, вам придется пройти через пробы и ошибки. Не забывайте создавать версии и запускать их только после того, как вы все протестировали.
Задача состоит в том, чтобы воплотить план вашего сайта электронной коммерции — домашней страницы, страницы продукта и т. д. — в реальность с помощью дизайна вашей темы.
Ключом к решению этой задачи является понимание архитектуры темы Shopify.
В вашем магазине Shopify есть много разных частей: макеты страниц, элементы на каждой странице, как и где размещаются изображения и т. д. получить конкретные указания.
Эти инструкции представлены в виде различных категорий файлов.
Если вы серьезно относитесь к созданию собственной пользовательской темы, обзор архитектуры темы Shopify — отличное место, чтобы начать разбираться, какие компоненты составляют тему Shopify.
Тестирование и предварительный просмотр
После того, как вы инициализировали свою тему и аутентифицировали ее в Shopify, вы можете предварительно просмотреть свою работу перед запуском.
Это важный шаг, особенно если вы новичок в разработке, так как процесс неизбежно потребует множества экспериментов, чтобы увидеть, что работает лучше всего.
Shopify позволяет предварительно просмотреть свою работу, создав ее как тему разработки.
Запустите тему Shopify с Shopify CLI, чтобы создать эту тему разработки. Для этого вам нужно использовать Google Chrome.
Подготовьтесь к запуску
После того, как вы довольны тем, как выглядит и ощущается ваша тема, и протестировали ее, все готово для запуска вашей темы.
Единственный шаг сейчас — связать или «протолкнуть» Git-репозиторий вашей темы в ваш интернет-магазин через интеграцию Shopify GitHub.
Интернет-магазин Shopify 2.0: некоторые изменения
Новый магазин товаров Netflix создан с использованием Store 2.0
В июне 2021 года Shopify объявила о развертывании нового набора инструментов для разработчиков и расширении функциональности с помощью Интернет-магазина 2.0.
Цель состоит в том, чтобы обеспечить большую гибкость для разработчиков и продавцов, работающих с индивидуальными или сделанными на заказ темами.
Одной из выдающихся особенностей Store 2.0 является возможность добавлять разделы на каждую страницу вашего магазина, а не только на домашнюю страницу, что устраняет необходимость в сложных обходных путях кодирования и обеспечивает гибкость, необходимую интернет-магазинам.
Теперь создание разделов Shopify стало проще, поскольку вы можете создавать их полностью в Shogun Page Builder для использования в редакторе тем Shopify!
Это означает некоторые технические изменения в процессе создания темы Shopify с нуля (хотя, если вы уже работаете с пользовательской темой, созданной до версии 2.0, вы сможете продолжать использовать ее как есть, с возможностью мигрируйте, если считаете, что вам нужна расширенная функциональность.)
Важные технические изменения:
- Shopify CLI заменит Theme Kit.
- Рассвет станет новой эталонной темой Shopify. Если вы хотите начать создавать свою собственную тему, начните с создания клона Dawn.
#cta-paragraph-pb#Если что-то из этого кажется слишком продвинутым или вы довольны тем, что у вас уже есть, но хотите добавить функциональность, настройка существующей темы может стать золотой серединой между полностью новая сборка темы Shopify и готовый вариант.
Недостатки пользовательских тем Shopify
Несмотря на существенные преимущества пользовательской темы Shopify, создание темы с нуля все же имеет свои недостатки.
Как вы уже, наверное, догадались, если вы зашли так далеко, индивидуальный дизайн темы Shopify — это не шутки.
Для создания пользовательской темы Shopify требуется:
- Большие затраты времени и — если вам нужно нанять разработчика — денег.
- Значительно более длительное время от начальной концепции до окончательного развертывания.
- Уделять больше времени общению, утверждению дизайна, процессу проектирования, тестированию и внедрению.
- Время и деньги лучше потратить на другие сферы вашего бизнеса.
Самый простой способ создать собственную тему Shopify
Если вам нужно быстро создать сайт и у вас приближается крайний срок запуска, кодирование темы Shopify с нуля может оказаться невозможным.
И хотя предварительно созданную тему Shopify можно установить несколькими щелчками мыши, вы можете обнаружить, что она не обладает необходимой функциональностью и гибкостью для поддержки вашего онлайн-бизнеса.
Вы по-прежнему можете создать свою собственную тему магазина Shopify, используя другие инструменты, которые дают вам полный контроль, необходимый для привлечения трафика через воронку продаж, обеспечения превосходного качества обслуживания клиентов и повышения коэффициента конверсии.
Вот что вам нужно для этого.
Используйте конструктор страниц с функцией перетаскивания
Эй, смотрите, это мы!
Здесь вмешивается Shogun, чтобы избавить вас от необходимости иметь дело с Liquid и кодировать отдельные страницы.
При традиционном подходе дизайн сайта передается разработчикам для кодирования страниц.
Затем эти страницы проходят тестирование и контроль качества в изолированной программной среде и в реальной среде, прежде чем в конечном итоге будут утверждены и опубликованы.
Благодаря конструктору страниц с функцией перетаскивания вы избавляетесь от процесса разработки, а также от отдельных спецификаций и структурирования.
Shogun позволяет вам войти, создать всю страницу и перемещать элементы по мере продвижения, что в основном позволяет вам выполнять проверку качества в режиме реального времени.
Когда вы довольны созданным шаблоном, вы можете начать использовать этот макет для остальной части вашего интернет-магазина.
Это очень важно, если вы хотите создать тему Shopify с нуля, потому что вы можете создавать каждую страницу визуально, без какого-либо кодирования, а созданные вами страницы подключаются прямо к вашей платформе электронной коммерции, как и любые темы на торговой площадке Shopify.
Если вы использовали любую программу перетаскивания, даже Word, вам будет удобно использовать Shogun.
Все элементы, которые вам нужны в вашем магазине, можно легко добавить на любую целевую страницу.
Этот подход идеален для тех, кому нужно быстро запустить магазин или изменить внешний вид интернет-магазина, не жертвуя при этом контролем.
Преимущества использования компоновщика страниц включают:
- Вам не навязывают тему с макетами страниц, которые не соответствуют вашему видению.
- Отдельные целевые страницы можно запускать быстрее, чем ваши конкуренты.
- Быстро получайте рекламный контент.
- Уменьшите стоимость изменений, так как вам не нужен разработчик для каждого обновления магазина.
- Полная масштабируемость и возможность настройки с помощью пользовательских элементов.
- Перетащите фрагменты повторно используемых элементов, чтобы сэкономить больше времени.
Неплохо, правда?
Получите лучшее из обоих миров с Shogun
Предварительно созданные страницы из торговой площадки Shopify, без сомнения, являются самым простым способом быстро разместить свой магазин в Интернете с привлекательным дизайном, но иногда они не соответствуют вашим представлениям.