Кнопка покупки Shopify: превратите свой сайт в полноценный онлайн‑магазин

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

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

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

Что такое кнопка покупки?

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

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

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

Узнайте больше о кнопке покупки Shopify.

Начните использовать кнопку покупки за 3 шага

1. Добавьте канал продаж Buy Button (Кнопка покупки) в свой магазин Shopify
2. Создайте кнопку покупки
3. Добавьте код встраивания кнопки покупки в HTML вашего сайта

1. Добавьте канал продаж Buy Button (Кнопка покупки) в свой магазин Shopify

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

На компьютере

1. Перейдите на страницу канала продаж Buy Button (Кнопка покупки) в магазине приложений Shopify.

2. Установите приложение

3. Закрепите приложение в навигации админ-панели (необязательно)

Если вы не закрепите кнопку покупки, вы сможете найти ее снова, нажав на Sales channels (Каналы продаж), а затем на Buy Button (Кнопка покупки) среди установленных каналов.

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

• Откройте приложение Shopify на мобильном устройстве и выберите Store (Магазин) в нижнем меню.
• Рядом с Sales channels (Каналы продаж) выберите Add channel (Добавить канал) на iPhone или «+» на Android.
• Выберите Buy Button (Кнопка покупки), затем нажмите Add Buy Button (Добавить кнопку покупки).

2. Создайте кнопку покупки

После добавления канала продаж Buy Button (Кнопка покупки) вы можете создать свою кнопку.

На вкладке Buy Button (Кнопка покупки) нажмите Create a Buy Button (Создать кнопку покупки).

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

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

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

Как настроить кнопку покупки

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

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

Вот описание параметров, которые можно настроить:

• Product variant (Вариант товара). Выберите, какие варианты товара можно будет приобрести через кнопку покупки. По умолчанию выбраны все варианты.
• Layout (Макет). Вы можете выбрать между Basic (Базовый), Classic (Классический) и Full view (Полный вид). Справа вы увидите предварительный просмотр каждого макета, выбирая нужный из выпадающего списка Layout (Макет).
• Action when people click (Действие при нажатии). Здесь вы можете выбрать между Add product to cart (Добавить товар в корзину), Direct to checkout (Перейти к оформлению заказа) или Open product details (Открыть детали товара). Опция Add product to cart (Добавить товар в корзину) создаст виджет корзины в правой части экрана. Опция Direct to checkout (Перейти к оформлению заказа) создаст кнопку Buy Now (Купить сейчас), которая направит пользователя сразу к оформлению заказа (обратите внимание, что клиенты не смогут добавить в корзину более одного товара при использовании этой опции). Опция Open product details (Открыть детали товара) создаст кнопку View Product (Посмотреть товар), которая открывает всплывающее окно с информацией о товаре и кнопкой Add to Cart (Добавить в корзину).
• Button style (Стиль кнопки). Здесь можно настроить форму углов, цвета, шрифт и размер кнопки покупки.
• Layout (Макет). Меню Layout (Макет) позволяет выполнить более тонкую настройку макета кнопки. Вы можете настроить цвета шрифта, текст кнопки и параметры типографики.
• Shopping cart (Корзина покупок). здесь вы сможете настроить параметры виджета корзины, включая текст и цвета. Обратите внимание, что эта опция будет неактивна, если вы используете макет Direct to checkout (Перейти к оформлению заказа), поскольку в таком случае виджет корзины отсутствует.
• Detailed pop-up (Детальное всплывающее окно). Если вы выбрали Open product details (Открыть детали товара) в разделе Action when people click (Действие при нажатии), в этом разделе вы сможете настроить текст, цвета и параметры типографики для всплывающего окна.
• Advanced settings (Расширенные настройки). Здесь вы можете настроить способ отображения оформления заказа для пользователя. Вы можете выбрать опцию Open pop-up window (Открыть всплывающее окно), которая создает всплывающее окно оформления заказа, закрывающееся после завершения заказа, или Redirect in the same tab (Перенаправить в той же вкладке), которая направит пользователя на страницу оформления заказа Shopify и вернет его на вашу страницу после завершения транзакции).

Помните, что изменение этих настроек не повлияет на кнопки покупки, которые уже встроены.

Когда вы создадите желаемый дизайн, нажмите кнопку Next (Далее) в правом верхнем углу.

3. Добавьте код встраивания кнопки покупки в HTML вашего сайта

Когда вы нажмете Next (Далее), автоматически генерируется код встраивания для вашей кнопки покупки. Нажмите кнопку Copy Code (Скопировать код), если вы готовы встроить его на веб-страницу.

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

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

Добавление тегов script кнопки покупки

Некоторые конструкторы сайтов требуют, чтобы вы вставили теги script отдельно в заголовок, а остальную часть кода — в тело страницы, туда, где вы хотите, чтобы появилась кнопка покупки.

Для этого вам нужно отделить элемент script от элемента div в коде встраивания кнопки покупки.

Вы увидите элемент div в верхней части кода. Он выглядит примерно так:

<div id="product-component-1655929612938"></div>

Элемент script составляет оставшуюся часть кода встраивания, начинаясь с script script type="text/javascript" и заканчиваясь /script.

Скопируйте и вставьте элемент script целиком в заголовок страницы вашего сайта.

Затем откройте редактор страницы, на которую хотите добавить кнопку покупки. Затем вставьте элемент div на страницу туда, где вы хотите, чтобы появилась кнопка покупки.

Добавьте функционал интернет‑магазина на любой сайт с помощью кнопки покупки

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

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