Введение в создание тем Shopify

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

Несколько лет назад открытие интернет-магазина было страшной и сложной задачей. К счастью, процесс сегодня намного проще; для некоторых платформ это так же просто, как создать тему, используя ваши знания HTML, CSS и JavaScript. Даже если вы не хотите открывать свой собственный магазин, наличие навыков предлагать электронную торговлю вашим новым и существующим клиентам является большим плюсом.

Оценка платформ электронной коммерции

Есть много вариантов, когда дело доходит до настройки интернет-магазина. Они варьируются от скромной кнопки «Купить сейчас» PayPal до создания собственного пользовательского веб-приложения с большим количеством промежуточных. В течение многих лет я пробовал большинство предложений, но когда дело дошло до выбора решения для моей собственной компании, я решил использовать Shopify . Вот почему:

• Это полностью размещенное решение, которое означает отсутствие настройки и обслуживания сервера — большой бонус
• Ежемесячная стоимость не является запредельной. Наши сборы будут расти в соответствии с нашими потребностями и доходами
• Это тема, основанная на дизайне. Мы можем использовать нашу существующую разметку и CSS
• Это позволяет нам использовать наш торговый счет для платежей. Это был большой плюс, так как мы не хотим использовать PayPal
• Мы можем использовать наш собственный домен с Shopify, например shop.useourowndomain.com
• Экосистема «приложений» сильна. Нам понадобится цифровая система доставки, и FetchApp идеально отвечает всем требованиям.
• Это популярно. Более 25 000 магазинов используют Shopify, в том числе многие известные веб-бренды, такие как A Book Apart , United Pixelworkers , Tattly и Hard Graft.
• Компания сильная, продукт постоянно развивается, и, прежде всего, у них отличный логотип!

Shopify — это удобная платформа для дизайнеров

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

Прежде чем мы начнем

Интерфейс магазина Shopify

Для того, чтобы начать разработку вашей темы, вам понадобится аккаунт в Shopify. Самый простой способ сделать это — зарегистрироваться в партнерской программе . Это позволит вам создавать и работать с «тестовым магазином». Как следует из названия, это не «живой» магазин, а скорее игровая площадка. Когда вы будете готовы открыть свой магазин «должным образом», вам нужно будет зарегистрироваться для полной учетной записи.

После регистрации в партнерской программе перейдите на вкладку «Тестовые магазины» и следуйте инструкциям по настройке нового тестового магазина. Как только он будет создан, по ссылке вы попадете прямо в администрацию Shopify. Это сердце вашего магазина, но для наших целей мы сосредоточимся на вкладке тем.

Что за тема?

Тема включает в себя ряд специально названных шаблонов, а также обычный тип ресурсов, которые вы ожидаете от любого веб-проекта, включая изображения, CSS и JavaScript.

Radiance — бесплатная тема Shopify

Есть один последний компонент, с которым вы, возможно, раньше не сталкивались, это язык шаблонов, который называется Liquid . По стилю он похож на другие инструменты для создания шаблонов, такие как Twig и Smarty , и, хотя поначалу он может показаться немного чуждым, я уверен, вы скоро освоите его. Если вы когда-либо создавали тему для WordPress, Tumblr или Expression Engine, то многие из этих концепций будут вам знакомы. Если вы этого не сделали, не волнуйтесь, мы рассмотрим основные моменты, которые помогут вам начать работу.

Основная структура темы

На момент написания теста хранилища тестов создавались с использованием бесплатной темы « Radiance ». Вы найдете все файлы, которые охватывают эту тему, войдя в раздел «Редактор шаблонов» на вкладке темы.

Прежде чем мы продолжим, давайте загрузим тему, чтобы нам было легче смотреть на нее. Мы не будем вдаваться в подробности этой темы, но мы будем использовать ее, чтобы дать вам представление о том, как все работает и сочетается друг с другом.

Чтобы загрузить ZIP-архив темы Radiance, перейдите на вкладку «Темы» и перейдите по ссылке «Управление темами». Отсюда вы можете запросить «Экспорт темы». Вы получите электронное письмо, как только оно будет доступно для загрузки.

  <h2> {{product.title}} </ h2> 

  {{ цена продукта }} 

  <h2> {{product.title |  upcase}} </ h2> 

  {{'logo.png' |  img_tag}} 

  <img src = "logo.png" alt = "" /> 

  {{'logo.png' |  asset_url |  img_tag: 'Логотип сайта'}} 

  <img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Логотип сайта" /> 

  {% if product.available%}
	 Показать кнопку Добавить в корзину здесь
	 {% else%}
	 Покажите сообщение о том, когда продукт будет доступен в следующий раз
	 {% endif%} 

  <h2> {{product.title}} </ h2>
	 <p> {{product.description}} </ p>
	 {% if product.available%}
	 <form action = "/ cart / add" method = "post">
	 <select id = "product-select" name = 'id'>
	 {% для варианта в product.variants%}
	 <option value = "{{option.id}}"> {{option.title}} - {{option.price |  деньги}} </ option>
	 {% endfor%}
	 </ Выберите>
	 <input type = "submit" value = "Добавить в корзину" id = "addtocart" />
	 </ Форма>
	 {% else%}
	 <p> Извините, продукт недоступен. </ p>
	 {% endif%}
	 {% для изображения в product.images%}
	 {% if forloop.first%}
	 <a href="‹ кардинальное изображение | product_img_url:'large'} innovative" title=" enjatell product.title} enj"> <img src = "{{image | product_img_url: 'medium'}}" alt = "{ {product.title | escape}} "/> </a>
	 {% else%}
	 <a href=" average карманный образ | product_img_url:'large'} enj" title=" enjatell product.title} enj"> <img src = "{{image | product_img_url: 'small'}}" alt = "{ {product.title | escape}} "/> </a>
	 {% endif%}
	 {% endfor%} 

  <h2> {{product.title}} </ h2>
	 <p> {{product.description}} </ p> 

  {% if product.available%}
	 <form action = "/ cart / add" method = "post">
	 <select id = "product-select" name = 'id'>
	 {% для варианта в product.variants%}
	 <option value = "{{option.id}}"> {{option.title}} - {{option.price |  деньги}} </ option>
	 {% endfor%}
	 </ Выберите>
	 <input type = "submit" value = "Добавить в корзину" id = "addtocart" />
	 </ Форма>
	 {% else%}
	 <p> Извините, продукт недоступен </ p>
	 {% endif%} 

  {% для изображения в product.images%}
	 {% if forloop.first%}
	 <a href="‹ кардинальное изображение | product_img_url:'large'} innovative" title=" enjatell product.title} enj"> <img src = "{{image | product_img_url: 'medium'}}" alt = "{ {product.title | escape}} "/> </a>
	 {% else%}
	 <a href=" average карманный образ | product_img_url:'large'} enj" title=" enjatell product.title} enj"> <img src = "{{image | product_img_url: 'small'}}" alt = "{ {product.title | escape}} "/> </a>
	 {% endif%}
	 {% endfor%}