🚧 Технические работы в магазине

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

🔤Всем, кто приобрёл старую версию секций, новые будут высланы бесплатно.

❤️Спасибо, что используете секции SS&T для вашего онлайн-магазина.

@usessnt | Наш сайт

Как менять стили сайта в зависимости от страницы в Shopify?

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

Для таких задач можно воспользоваться доступными Shopify API и языком шаблонов Liquid. Такое также можно проверять при помощи языка программирования JavaScript. Но загрузка JS скриптов выше, чем Liquid, поэтому мы будем использовать Liquid.

Вот пример, если страница index (главная страница):

{% if request.page_type == 'index' %}
  Привет! Это главная страница
{% endif %}

Или так:

{% if template.name == 'index' %}
    Привет! Это главная страница
{% endif %}

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

Какие ещё страницы можно проверять?
Из стандартных: product, collection, cart, account, page. Это не все с которыми придется работать, полный список вы можете посмотреть в Shopify документации.

Если вы создали страницу и назначили ей шаблон (template), который создан специально для него, то в верхних двух случаях будет возвращаться page. Если вы хотите отображать / скрывать контент на определённых страницах, которые вы создали, можно использовать следующую конструкцию:

{{ page.handle }}

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


Теперь вы умеете проверять страницу в Shopify темах, самое время попробовать на практике! Попробуйте поменять цвет иконок в шапке сайта сделав их чёрными только на главной странице, а на остальных белыми.

@usessnt | Наш сайт

В Проблемы, которые могут возникнуть при создание Shopify приложения

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

Shopify - интересная платформа с точки зрения разработки. Бывает что-то идёт не так, а что произошло - никто не знает.


1️⃣Сервер

Например, вот случай из нашей практики. Мы разрабатывали приложение и по какой-то причине, сервер, который предоставляется для разработки - не работал.

Казалось бы, в чём может быть дело?

Облазив все Shopify форумы, сообщества, GitHub репозитории, ответа так и не нашлось. Мы даже думали приобрести выделенный сервер, но подумали, что это будет бессмысленно.

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

2️⃣Обновления

Shopify периодически ставит подножку разработчикам, а именно выпускает обновление, в котором привичные всем инструменты становятся deprecated и на их замену приходят новые.

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

3️⃣Безопасность

Без безопасности никуда, вот и Шопифай эта тема не обошла стороной.

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

GDPR, или Общий регламент по защите данных (General Data Protection Regulation), является нормативным актом Европейского Союза, вступившим в силу 25 мая 2018 года. Этот регламент представляет собой один из самых строгих в мире наборов правил, касающихся защиты личных данных, и оказывает значительное влияние на компании по всему миру, ведущие бизнес с гражданами ЕС.

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

Даже если вы не хотите публиковаться в магазин приложений и делаете приватное приложение - безопасность пользователей превыше всего.

4️⃣Масштабирование

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

5️⃣Публикация в Shopify App Store

Самое волнительное из нашего сегодняшнего списка. Процесс одобрения приложения может быть сложным и длительным, особенно если не учитывать все требования Shopify с самого начала.

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

Пишите чистый код, не забывайте отдыхать, всем безопасных деплоев!

@usessnt | Наш сайт

🚀Как добавить хлебные крошки в Shopify тему?

❗️Хлебные крошки представляют собой навигационную цепочку, которая показывает путь к текущей странице относительно главной страницы сайта.

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

🧑‍💻 Вот кусок кода, который вы можете использовать для того чтобы добавить хлебные крошки в ваш магазин:

{% if template != 'index' and template != '404' %}
  <nav class="breadcrumbs" aria-label="breadcrumbs">
    <ol class="breadcrumbs__list">
      <li class="breadcrumbs__item">
        <a class="breadcrumbs__link" href="/">Home</a>
      </li>
      {% if template %}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">Current Page</a>
        </li>
      {% endif %}
    </ol>
  </nav>
{% endif %}

Давайте немного стилизуем наши элементы:

 .breadcrumbs {
      padding: 10px;
      margin-bottom: 20px;
    }
    .breadcrumbs__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
    }
    .breadcrumbs__item {
      margin-right: 10px;
    }
    .breadcrumbs__item:not(:first-child)::before {
      content: ">";
      color: #333;
    }
    .breadcrumbs__item:last-child {
      margin-right: 0;
font-weight: bold;

    }
    .breadcrumbs__link {
      color: #000;
      text-decoration: none;
    }
    .breadcrumbs__link:hover {
      text-decoration: underline;
    }

❗️Это простая версия хлебных крошек, которая всегда будет выводить Current Page в качестве второго элемента и Home в качестве первого. Вы можете кастомизировать данный кусок кода под себя и сделать его динамическим, например, показывать название товара, коллекции, поста, и тд. 

👨‍💻 В нашем магазине есть подобный сниппет, но уже с изменениями, которые мы указали выше. Вы можете  кастомизировать текущий сниппет или использовать наш. 

@usessnt | Наш сайт

❓Как показывать сопутствующие товары на страницах товаров?

🤓Сопутствующие товары — это товары, похожие на выбранный пользователем товар. Вы можете отображать потенциальную замену, чтобы помочь клиентам найти другие похожие продукты, которые им могут понравиться. Эти продукты должны появиться в разделе «Вам также может понравиться» на странице продукта.

При добавлении раздела сопутствующих продуктов на страницы продуктов отображается автоматически сгенерированный список рекомендаций по продуктам.

В этом посте вы узнаете, как отображать сопутствующие товары в вашей теме.

🧑‍💻 Разработка рекомендаций по продукту
В этой реализации содержимое раздела формирует общее отображение путем прохода по каждому продукту, возвращаемому через атрибут продуктов объекта рекомендаций. Однако этот объект не заполняется при первоначальном отображении раздела, поэтому вам необходимо использовать JavaScript для получения заполненного содержимого раздела используя API рекомендаций по продуктам.

sections/product-recommendations.liquid

<div
  class="product-recommendations"
  data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=4&intent=related"
>
  {%- if recommendations.performed? and recommendations.products_count > 0 -%}
    {% if recommendations.intent == 'related' %}
      <h2>You may also like</h2>
    {% elsif recommendations.intent == 'complementary' %}
      <h2>Pair it with</h2>
    {% endif %}

    <ul>
      {%- for product in recommendations.products -%}
        <li class="product">
          <a href="{{ product.url }}">
            <img
              class="product__img"
              src="{{ product.featured_image | image_url: width: 300, height: 300 }}"
              alt="{{ product.featured_image.alt }}"
            />

            <p class="product__title">{{ product.title }}</p>
            <p class="product__price">{{ product.price | money}}</p>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
</div>

{% javascript %}
  const handleIntersection = (entries, observer) => {
    if (!entries[0].isIntersecting) return;

    observer.unobserve(productRecommendationsSection);

    const url = productRecommendationsSection.dataset.url;

    fetch(url)
      .then(response => response.text())
      .then(text => {
        const html = document.createElement('div');
        html.innerHTML = text;
        const recommendations = html.querySelector('.product-recommendations');

        if (recommendations && recommendations.innerHTML.trim().length) {
          productRecommendationsSection.innerHTML = recommendations.innerHTML;
        }
      })
      .catch(e => {
        console.error(e);
      });
  };

  const productRecommendationsSection = document.querySelector('.product-recommendations');
  const observer = new IntersectionObserver(handleIntersection, {rootMargin: '0px 0px 200px 0px'});

  observer.observe(productRecommendationsSection);
{% endjavascript %}

{% schema %}
  {
    "name": "Product recommendations",
    "settings": []
  }
{% endschema %}

❗️Если вы используете какую-либо тему, данная секция у вас уже есть. А если вы хотите её сделать с нуля, то это базовый пример такой секции, который вы можете использовать для кастомизации в зависимости от дизайна вашего бренда, например, можно добавить слайдер вместо сетки.

@usessnt | Наш сайт

Hydrogen, Oxygen, Polaris, Remix - что это всё такое?

Hydrogen — это набор оригинальных компонентов, утилит и инструментов Shopify для создания пользовательских Shopify магазинов на основе Remix.

Oxygen — это хостинг для ваших проектов на Hydrogen. Вместе они составляют рекомендуемый Shopify стек для построения Headless магазинов.

Polaris — это дизайн-система для Shopify. Используется для стилизации элементов в Shopify приложениях. Создана для того, чтобы все приложения имели один стиль.

Remix — это фреймворк, который использует современные веб-стандарты для обеспечения высокопроизводительного взаимодействия с пользователем. Он использует серверный рендеринг, упрощая загрузку данных, отправку форм и обработку ошибок. Используется как для создания веб-приложений, так и для создания приложений для Shopify.

@usessnt | Наш сайт

Отличные новости для разработчиков Shopify: API продуктов GraphQL теперь поддерживают 2000 вариантов продуктов! (раньше был лимит в 100 вариантов).

Об этом было объявлено в обновление Winder Editions, и теперь доступно в стабильной версии.

Видео от: Gadget

@usessnt | Наш сайт

👨‍💻Как заменить шрифты в Shopify теме?

Давно мы тут не появлялись, исправляем.

Мы уже писали про обновление шрифтов в теме, в этом посте немножко дополним предыдущий.

Часто бывает, что нужно заменить шрифты в теме, но как это правильно сделать? Если вы используете какой-то шрифт при дизайне сайта, то, возможно, он есть в редакторе темы. Для того чтобы это посмотреть, нужно открыть редактор темы, перейти в настройки темы и найти настройку "Typography".

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

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

Шаги по подключению шрифта:
1. Загрузите файлы шрифта.
Откройте код вашей темы и в папку assets загрузите файлы шрифта. Кто-то рекомендует только форматы .woff и .woff2, но если у вас есть только .ttf, то он тоже будет работать.

2. Создайте новый файл стилей.
Теперь давайте создадим новый файл font.css в папке assets. Вы можете пропустить этот шаг, по крайней мере, мы любим, когда всё разделено.

В этом файле мы будем хранить все наши кастомные шрифты. При необходимости откатить всё назад, мы сможем это быстро сделать.

Для того чтобы подключить опубликованное ранее семейство щрифта, используем следующую конструкцию:

@font-face {
    font-family: 'YourFontName';
    src: url('path/to/your/font.ttf') format('truetype');
}

Заменим шрифт и двух элементов:

p,
span {
  font-family: "YourFontName", sans-serif;
}

3. Подключаем наш файл шрифтов на сайт.
Мы опубликовали шрифты и заменили шрифт у двух элементов. Чтобы увидеть изменения на сайте нужно подключить файл font.css к сайту.
Для этого открываем файл theme.liquid, который находится в папке Layout. Мы обычно подключаем стили к другим файлам стилей, для этого находим по поиску (CTRL + F) "base.css", копируем конструкцию и вставляем ниже. У нас получится что-то такое:

{{ 'font.css' | asset_url | stylesheet_tag }}

Вот и всё! Теперь вы умеете подключать кастомные шрифты в Shopify.

@usessnt | Наш сайт

🛒 Shopify альтернативы

❗️Shopify - отличный вариант для создания интернет-магазина, но он не единственный.

Существует множество других платформ, которые могут вам подойти, в зависимости от ваших нужд и бюджета.

👇 Ниже мы приведём пример самых распостранённых альтернатив, но также существует более мелкие платформы, которые предоставляют обработку платежей, базу данных товаров, возможность создавать скидочные купоны и тд. О них мы расскажем в следующем посте.

Вот несколько популярных альтернатив Shopify:

1️⃣ BigCommerce: еще одна мощная платформа электронной коммерции с множеством функций. Подходит для крупных предприятий, которым требуется больше контроля над своими магазинами.

2️⃣ Squarespace: известен своими простыми в использовании инструментами дизайна и красивыми шаблонами. Подходит для малого бизнеса, который хочет создать привлекательный интернет-магазин без особых технических знаний.

3️⃣ Wix: еще одна платформа с простым интерфейсом drag-and-drop. Подходит для начинающих предпринимателей, которые хотят быстро и легко создать интернет-магазин.

4️⃣ Ecwid: облачное решение электронной коммерции, которое можно добавить к существующему веб-сайту. Подходит для малого бизнеса, который хочет начать продавать товары в Интернете без необходимости создавать новый веб-сайт.

5️⃣ WooCommerce: плагин электронной коммерции для WordPress. Подходит для пользователей WordPress, которые хотят добавить функциональность интернет-магазина на свой сайт.

❗️Если вы не знаете, какую платформу выбрать для вашего интернет-магазина - свяжитесь с нами, мы вам поможем.

@usessnt | Наш сайт

🛒 Shopify альтернативы vol. 2

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

1️⃣ Medusa.js: Медуза позиционирует себя как альтернатива Shopify. С одной стороны это так, она имеет встроенную админ-панель, где можно настраивать товары и коллекции, отслеживать заказы, и создавать скидки. Единственное, что их сильно отличает, наличие CMS. У moek есть статья о Медузе, где он рассказал про неё более-менее подробно — читать.

2️⃣ Hydrogen: это набор инструментов и библиотек для создания быстрых и эффективных коммерческих веб-приложений относящихся к "headless commerce" на платформе Shopify. Под капотом использует Remix. Shopify, кстати, купил команду Remix.

ℹ️ Remix — фулл-стек веб-фреймворк, который позволяет сосредоточиться на пользовательском интерфейсе и работать с веб-стандартами, чтобы обеспечить быстрый, удобный и надёжный продукт.

👨‍💻Hydrogen активно рекламируется Shopify, но у него есть свои хейтеры. Стоит ли выбирать его для вашего магазина или нужно ли учить, если вы разработчик — решать вам. Мы любим новые технологии, но если вы только начинаете, возможно, лучше выбрать что-то более популярное.

3️⃣ Кастомный интернет-магазин: вот мы и плавно подошли к разработке кастомного интернет-магазина. Это выбор настоящих воинов или крупных компаний. Если вы разрабатываете в одиночку, создание интернет-магазина с нуля займёт уйму времени. Но этот процесс достаточно интересный и на пути встречается множество испытаний, как-будто играешь в RPG игру.

❗️Теперь более серьёзно. Создать кастомный интернет-магазин можно при помощи практически любой технологии или языка программирования.

👴 У "старичков" наиболее популярным языком является PHP, мы в своей практики видели интернет-магазины на чистом PHP, и даже заказывали оттуда, всё работало.

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

👶 У "зумеров" наиболее популярным решением являются JS фреймворки, например, Next.js, Nuxt.js, SvelteKit, и тд. Последние несколько лет их стало заметно много, поэтому есть среди чего выбирать.

❗️Но помните, не важно на чём вы пишите, важно что и как вы пишите.

@usessnt | Наш сайт

🆕 Отличные новости для разработчиков Shopify: доступ к метаполям в Shopify Flow стал намного проще!

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

Кроме того, все метаполя, к которым обращались таким образом, рассматривались как строка. Это могло вызвать проблемы с производительностью, если было много метаполей или если поле значения было очень большим.

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

Каждый ресурс (Товар, Заказ и т. д.) теперь имеет новое поле «метаполе».

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

Фото предоставлено: Shopify.

@usessnt | Наш сайт

Дуэйн Джонсон, он же The Rock, запустил свой новый бренд Papatui на Shopify!

Papatui — бренд мужской косметики, включающий такие продукты, как средства для мытья тела, лосьоны для тела, очищающие средства для лица, мыло, дезодоранты и средства для увлажнения татуировок.

С помощью Papatui компания The Rock стремится предоставить мужчинам высококачественную, эффективную и доступную продукцию.

Интересный факт: Papatui — не первый магазин Shopify в The Rock!

У него уже есть Shopify магазины для его бренда энергетических напитков ZOA Energy и бренда текилы Teremana Tequila.

@usessnt | Наш сайт

Что такое metafields или мета-поля в Shopify?

Metafields в Shopify - это мощный инструмент, позволяющий магазинам расширить функциональность и добавить дополнительные данные к товарам, коллекциям, заказам и другим объектам.

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

Metafields помогают настроить магазин под уникальные потребности бизнеса и улучшить процессы управления контентом и продуктами.

Для закрепления материала и перехода из теории в практику, можете посмотреть видео о метафилдах в Shopify.

В следующем посте мы поговорим про доступные инструменты, которые можно использовать для ведения кастомного контента в магазине.

Подпишитесь на канал чтобы не пропустить выход новых постов!

@usessnt | Наш сайт

Подробности о крайнем сроке обновления страницы Checkout 13 августа.

Shopify пишет:

"В феврале 2023 года мы объявили о переходе на Checkout Extensibility — новую основу для оформления заказа, которая является более безопасной, производительной, безопасной для обновлений и настраиваемой с помощью приложений. Учитывая постоянно меняющиеся правила во всем мире, включая введение правил индустрии карт в соответствии с PCI DSS v4, `checkout.liquid` менее безопасен, чем Checkout Extensibility, и мы должны прекратить его поддержку. Этим переходом мы защищаем глобальную коммерцию, экосистему Shopify и бизнес наших продавцов.

❗️Начиная с 14 августа 2024 г., когда мы начнем процесс полного закрытия checkout.liquid для страниц «Информация», «Доставка» и «Оплата», магазины, которые не будут обновлены, увидят следующие последствия:

1️⃣ Настройки Checkout.liquid будут заблокированы: Shopify не будет предоставлять поддержку клиентов по обновлению или исправлению настроек checkout.liquid на страницах «Информация», «Доставка» и «Оплата». Настройки будут заблокированы и недоступны для редактирования. Магазины, использующие этот устаревший код после истечения установленного срока, делают это на свой страх и риск.

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

3️⃣ Медленные выплаты Shopify Payments: поскольку заказы будут считаться более рискованными, выплаты могут быть задержаны на срок до 5 дней после обработки транзакции.

С 6 января 2025 г. мы начнем автоматическое обновление страницы Checkout, которые продолжают использовать checkout.liquid, с уведомлением по электронной почте за 30 дней. Это означает, что настройки checkout.liquid будут потеряны."

❗️❗️Если вы ещё не перешли на Checkout Extensibility - сделайте это как можно скорее.

@usessnt | Наш сайт

❓Какую Тему Выбрать Для Дропшиппинг Магазина?

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

Shopify тема - это дизайн и группа настроек, которые определяют внешний вид и функциональность вашего магазина.

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

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

❗️Не забывайте о постоянном обновление магазина.

@usessnt | Наш сайт

❓Как динамически отобразить текущий год при помощи Liquid?

🤓 Зачастую нужно отобразить текущую дату, например, год. Для этого можно воспользоваться возможностями Ликвида, языка шаблонов который использует Shopify.

Это может быть полезно, например, в подвале сайта. Там, где мы пишем о копирайте.

В обычной HTML вёрстке мы используем статическое значение по типу: “© 2024 Company Name”.

В таком случае, 1 января следующего года значение “2024” не обновится. Чтобы этого избежать и не запутать пользователей сайта мы будем использовать следующую конструкцию, вместо статического отображения текущего года:

{{ "now" | date: '%Y' }} 

🥳 Теперь нам не придётся каждый год заходить в код сайта и вручную обновлять год.

——

❗️Если ваш сайт не использует Liquid, вы можете воспользоваться следующим методом по отображению текущей даты.

<span id="currentYear"></span>

function displayCurrentYear() {
 const currentYear = new Date().getFullYear();
 document.getElementById("currentYear").textContent = currentYear;
}

document.addEventListener("DOMContentLoaded", displayCurrentYear);

👆 В данном методе мы используем язык программирования JavaScript для отображения текущего года. Выглядит немного массивнее, чем способ на Liquid, но JS есть JS.

@usessnt | Наш сайт

🥳 Бандлы теперь доступны в черновых заказах

Продавцы теперь могут добавлять бандлы товаров в черновые заказы. Независимо от того, используют ли они приложение Shopify Bundles или создают свои собственные предложения бандлов с помощью Shopify API, продавцы могут использовать эту функцию для увеличения продаж и улучшения качества обслуживания клиентов.

❗️Кроме того, функция CartTransform автоматически запускается для всех черновых заказов.

Перейдите к черновикам заказов в администраторе Shopify и выберите бандл продуктов в окне выбора продуктов.

Чтобы узнать больше о пакетах в черновых заказах, обратитесь в Справочный центр Shopify.

@usessnt | Наш сайт

🆕 Прощай старый сайт, привет разработка нового

Наш старый сайт нас не устраивал и мы решили разрабатывать новый.

🙂 Так получилось, что наш старый сайт сейчас недоступен, поэтому мы какое-то время будем без сайта :)

Пока идёт разработка сайта, мы будем писать новые секции и готовить статьи для вас!

👨‍💻 На новый сайт много планов, нужно как минимум сделать мультиязычность, а то как-то не очень, что тут мы пишем на русском, а сайт на английском.

@usessnt | Наш сайт

Shopify Edition Summer '24

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

1️⃣ Единый Shopify CLI
Одна установка Shopify CLI позволяет легко создавать приложения, темы и витрины магазинов Hydrogen.

npm install -g @shopify/cli@latest

2️⃣ Управление стоимостью приложений теперь легче
Теперь вы можете легко настраивать, обновлять и управлять ценами и выставлением счетов на приложения с панели управления партнера без необходимости писать код.

3️⃣ Проверка приложений стала быстрее
Новые приложения теперь проходят проверку на 30% быстрее благодаря более четким предварительным условиям для утверждения, персонализированным рекомендациям и прозрачным обновлениям хода выполнения.

4️⃣ Checkout Blocks теперь имеет бесплатный тариф
Checkout Blocks — это бесплатный и простой способ персонализировать оформление заказа с помощью расширений страницы чекаут. Изменять код не нужно. Эксклюзивно для Плюс.

5️⃣ Тема Trade уже доступна в магазине
Настройте B2B-магазин с готовой темой Trade, предназначенной для повторных и оптовых закупок. Тема бесплатная.

6️⃣ Новая аналитика
Shopify перестроили набор аналитических технологий, чтобы сделать его быстрее, гибче и интуитивно понятнее. Вы получите более глубокое представление о работе вашего магазина в режиме реального времени. И вскоре используйте ShopifyQL для запроса ваших данных прямо в отчете.

7️⃣ Визуальный конструктор Hydrogen сайтов
Визуальный редактор Hydrogen на базе Utopia позволяет всей вашей команде проектировать, продавать и создавать товары с помощью общего представления магазина. Код остаётся базой витрины, но изменения в конструкторе синхронизируются с GitHub.

8️⃣ Массовый импорт и экспорт метаполей
Импорт и экспорт продуктов теперь поддерживают метаполя продуктов, что упрощает массовое управление метаполями продуктов.

Это были основные обновления по нашему мнению, полный список обновлений вы можете почитать по ссылке.

@usessnt | Наш сайт

Shopify исполнилось 20 лет

По информацие на официальной странице, Shopify был основан в 2006 году, а это значит, что ему 18 лет. Ну ладно, будем праздновать 20 летие!

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

Фото: Корали Дельфа

@usessnt | Наш сайт

Новые настройки стиля для тем

Ох-ох, ну мы и пропали. Вы, наверное, уже заждались новостей в Shopify. Исправляемся.

Shopify вводит новую категорию настроек под названием «Настройки стиля». Настройки стиля напрямую связаны со свойствами CSS и позволяют продавцам изменять значения для разной ширины устройств.

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

Shopify предложит широкий набор настроек стиля с помощью панелей Style, начиная с Layout, Size и Spacing, а в скором времени появятся и другие. Используя панели стилей, предоставляемые Shopify, разработчики тем получают полный набор настроек, которые могут быть использованы продавцами.

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

@usessnt | Наш сайт