Shopify Кнопка «Купити»: як додати на будь-який веб-сайт

За допомогою кнопки Shopify Buy Button ви можете повністю інтегрувати інструменти електронної комерції Shopify з будь-яким веб-сайтом, незалежно від того, чи він створений на WordPress, Squarespace, Wix чи будь-якому іншому конструктор веб-сайтів.

Shopify не лише для повноцінних компаній електронної комерції. Будь-хто, хто хоче монетизувати свої проекти? — блогери, художники, письменники, дизайнери, автори подкастів чи впливові особи? — отримає вигоду від продажів онлайн.

Але створення онлайн-магазину потребує часу, а перенаправлення веб-трафіку ускладнює процес оформлення замовлення, що може негативно вплинути на продажі. Кнопка «Купити» від Shopify — це ваше рішення!

1. Додайте канал продажу кнопки «Купити» до свого магазину Shopify

Спочатку варто увійти у свій магазин Shopify. Якщо ви бачите кнопку «Купити» під вашими Каналами збуту в меню зліва, це означає, що канал збуту вже додано, і ви можете перейти до кроку 2.

На комп’ютері

1. Перейти до розпродажів кнопки “Купити” сторінка каналу в Shopify App Store (ви також можете перейти на цю сторінку, перейшовши до Налаштування > Відвідайте Shopify App Store і ввівши в пошук Кнопка Придбати?).
2. Натисніть Додати програму, а потім Додати канал збуту на наступному екрані.

Після оновлення сторінки ви побачите Кнопку “Купити” у списку Канали продажів ліворуч -бічне меню. Обов’язково закріпіть канал на панелі навігації, щоб легко дістатися до нього.

Якщо ви цього не зробите закріпіть кнопку «Купити», ви зможете знайти її знову, натиснувши Канали продажів, а потім Кнопку «Купити» під встановленими каналами.

На мобільному

1. Відкрийте програму Shopify на своєму мобільному пристрої та виберіть Магазин у нижньому меню.
2. Поруч із Канали збуту, виберіть Додати канал (на iPhone) або + (на Android).
3. Виберіть Кнопку “Купити” зі списку параметрів, а потім торкніться Додати кнопку «Купити».

2. Створіть кнопку «Купити»

Щойно ви додасте канал продажу кнопки «Купити», ви готові розпочати створення кнопки «Купити». Перейдіть на свою сторінку кнопки “Купити”, натиснувши Кнопку “Купити” (якщо ви закріпили її на панелі навігації) або перейдіть до Налаштування > Програми та канали продажів > Кнопка “Купити”.

Звідти натисніть Створити кнопку “Купити”.

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

Переконайтеся, що прапорець заповнено, і натисніть Вибрати.

Зробивши вибір, ви перейдете до редактора кнопки “Купити”, де ви зможете налаштувати вигляд вашої кнопки “Купити”.

Як налаштувати вашу кнопку “Купити”

У редакторі кнопки “Купити” ви побачите ряд параметрів, перерахованих ліворуч для налаштування зовнішній вигляд вашої кнопки “Купити”. Праворуч ви побачите попередній перегляд того, як виглядатиме ваша кнопка «Купити».

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

Ось розбивка параметрів, які можна налаштувати:

• Варіант продукту: виберіть варіанти продукту, які ви хочете придбати за допомогою кнопки «Купити». Усі варіанти буде вибрано за замовчуванням.
• Макет: виберіть базовий, класичний або повний вигляд. Праворуч ви побачите попередній перегляд кожного макета, коли ви виберете його зі спадного меню «Макет».
• Дія, коли люди натискають: виберіть «Додати продукт у кошик». ”, “Напрямок до оплати” або “Відкрити відомості про продукт”. Опція «Додати продукт до кошика» створить віджет кошика в правій частині екрана. Параметр «Прямо до оформлення замовлення» створить кнопку «Купити зараз», яка спрямовуватиме користувача безпосередньо до оформлення замовлення (зауважте, що за допомогою цієї опції клієнти не зможуть додати більше ніж один товар у свій кошик). Параметр «Відкрити деталі продукту» створить кнопку «Переглянути продукт», яка відкриває спливаюче вікно з інформацією про продукт і кнопкою «Додати до кошика».
• Стиль кнопки: тут ви можете налаштуйте кольори, шрифт, розмір і форму кута вашої кнопки “Купити”.
• Макет: меню “Макет” дозволить точніше налаштувати макет вашої кнопки. Ви можете налаштувати кольори шрифту, текст кнопки та параметри типографіки.
• Кошик для покупок: тут ви зможете налаштувати параметри віджета кошика для покупок, зокрема копію і кольори. Зауважте, що ця опція буде неактивна, якщо ви використовуєте макет «Прямо до оплати», оскільки немає віджета кошика.
• Спливаюче вікно з докладними відомостями: якщо ви виберете «Відкрити». деталі продукту» в розділі «Дія, коли користувачі натискають», ви зможете налаштувати текст, кольори та параметри типографіки для спливаючого вікна в цьому розділі.
• Розширені налаштування: тут ви можете налаштувати спосіб оформлення замовлення для вашого користувача. Ви можете вибрати «Відкрити спливаюче вікно» (що створить спливаюче вікно оформлення замовлення, яке закриється, коли замовлення буде завершено), або «Переадресувати на тій самій вкладці» (що спрямує користувача на вашу сторінку оформлення замовлення Shopify зсередини у вікні веб-переглядача та поверне їх на вашу сторінку після завершення транзакції).

Пам’ятайте, що зміна цих налаштувань не змінить кнопки «Купити», які вже вбудовано. Ось чому варто приділити трохи часу, щоб налаштувати кнопку «Купити» на свій смак, перш ніж переходити до наступного кроку.

Коли ви задоволені своїм дизайном, натисніть кнопку «Далі» у верхньому правому куті.

3. Додайте код вбудовування кнопки «Купити» до HTML-коду свого веб-сайту

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

Код, який ви Скопійоване тут можна вставити в HTML-код будь-якої веб-сторінки, і це створить кнопку «Купити» та кошик, які підключатимуться безпосередньо до вашого адміністратора Shopify, дозволяючи вам керувати та обробляти замовлення з будь-якої веб-сторінки через адміністратора Shopify.

Процес додавання коду для вбудовування може дещо відрізнятися залежно від того, як ви хочете, щоб кнопка виглядала, конструктора веб-сайтів, який ви використовуєте, або навіть теми, яку ви використовуєте на платформі.

Ось розбивка деяких найпоширеніших місць для вставлення кнопки “Купити” Shopify і кроків, які потрібно виконати для цього:

Додайте код для вставлення до цільова сторінка або публікація в блозі у вашому магазині Shopify

Ваш магазин Shopify уже матиме сторінки продуктів і вбудований кошик, але іноді можуть виникати ситуації, коли ви захочете додати кнопку «Купити» безпосередньо на сторінку або допис у блозі для додаткової зручності.

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

У подібних випадках слід виконати наступні кроки:

1. Від вашого адміністратора Shopify, перейдіть до Інтернет-магазину > Публікації в блозі або Інтернет-магазин > Сторінки, залежно від того, чи додаєте ви його до публікації в блозі чи на сторінці.
2. Виберіть публікацію в блозі чи сторінку, до якої хочете додати кнопку «Купити».
3. У вікні Вміст натисніть кнопку <>, щоб переключитися з перегляду редагування на перегляд HTML.

1. Вставте код вбудовування, який ви скопіювали раніше, у редактор HTML, де б ви не хотіли, щоб він з’явився. Натисніть «Зберегти».

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

Додати кнопку “Купити” на веб-сайт Squarespace

На Squarespace ви зможете додати свою кнопку «Купити» до окремих публікацій або до меню на своїй домашній сторінці. Щоб додати кнопку «Купити» на свій сайт Squarespace:

1. Увійдіть на інформаційну панель Squarespace і відкрийте сторінку, на яку потрібно додати кнопку «Купити».
2. Наведіть курсор на значок Область Вмісту сторінки елемента сторінки, де потрібно розмістити кнопку «Купити», і натисніть Редагувати.
3. Виберіть точку вставки, куди потрібно додати вставити код.
4. У меню Блоки вмісту в розділі Більше виберіть Код.
5. Переконайтеся, що зі спадного меню у верхньому правому куті вибрано HTML, а потім вставте код вставки кнопки «Купити» в поле Код.
6. Натисніть Застосувати.

Пам’ятайте, що деякі спеціальні теми Squarespace можуть вимагати більш глибоких знань HTML для налаштувань. У таких випадках найкраще звернутися безпосередньо до розробника, щоб отримати допомогу в додаванні спеціального коду на ваш сайт.

Додайте кнопку “Купити” до блогу WordPress

Щоб додати кнопку «Купити» до публікації на сайті WordPress.org:

1. На інформаційній панелі WordPress перейдіть до своїх публікацій і виберіть ту, до якої ви хочете додати кнопку «Купити»..
2. Залежно від версії редактора WordPress, який ви використовуєте, виконайте один із таких кроків:
   • Якщо ви використовуєте класичний редактор для свого сайту WordPress, натисніть вкладку Текст у редакторі, щоб переключитися з візуального перегляду на текстовий.
   • Якщо ви використовуєте редактор блоків для свого сайту WordPress, натисніть +, потім виконайте пошук і виберіть Користувацький HTML.
3. Вставте код вставлення кнопки «Купити» в місце, де ви хочете, щоб він з’явився.
4. Натисніть Зберегти чернетку, Попередній перегляд або Опублікувати залежно від дії, яку ви хочете виконати.&nbsp ;

Ви також можете додати код для вбудовування в меню WordPress, виконавши такі дії:

1. На інформаційній панелі WordPress натисніть Вигляд.
2. Виберіть Налаштувати, щоб відкрити редактор тем, а потім виберіть Віджети.
3. Виберіть область, де ви хотіли б додати свою кнопку «Купити».
4. Натисніть Додати віджет, а потім Текст?.
5. Вставте «Купити» Код вставлення кнопки.
6. Натисніть Зберегти & Опублікувати.

Зверніть увагу, що кнопки «Купити» Shopify сумісні з платформою WordPress.org, але не з WordPress.com через обмеження налаштування HTML.

Додайте кнопку «Купити» на Wix

Щоб додати кнопку «Купити» Shopify на свій сайт Wix, виконайте такі дії:

1. З Wix на інформаційній панелі виберіть сайт на сторінці Мої сайти, до якого ви хочете додати кнопку «Купити», а потім виберіть Редагувати сайт.
2. У редактор веб-сайту Wix, натисніть +, а потім Більше. Виберіть HTML-код. До вашої сторінки буде додано віджет HTML-коду.
3. Натисніть Ввести код. У спливаючому вікні Налаштування HTML вставте код вбудованої кнопки “Купити” в поле Додати код тут.
4. Натисніть Застосувати>.
5. Налаштуйте розмір віджета HTML-коду на свій смак. Переконайтеся, що вкладка кошика є видимою, якщо ви вставили кнопку «Купити» в кошик.
6. Завершивши налаштування, натисніть Зберегти.

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

Додавання тегів сценарію кнопки «Купити» Shopify

У деяких випадках Конструктори веб-сайтів (наприклад, Unbounce) вимагатимуть, щоб ви окремо вставляли теги <script> у свій заголовок, а решту коду вставляли в тіло сторінки, де б ви не хотіли купити Кнопка, яка з’явиться.

Щоб це зробити, вам потрібно відокремити елемент <script> від <div> у вашому коді вставки кнопки “Купити”. Ви побачите елемент <div> у верхній частині коду. Це виглядає приблизно так:

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

Сценарій елемент (який набагато довший) становить решту коду вбудовування, починаючи з <script type="text/javascript"> і закінчуючи </script></код>.

Після того, як ви розділили ці елементи, виконайте наведені нижче дії.

1. Відкрийте заголовок сторінки веб-сайту, де ви хочете вставити кнопку «Купити».
2. Скопіюйте та вставте елемент <script> повністю в заголовок сторінки вашого веб-сайту.
3. Збережіть зміни.
4. Тепер відкрийте редактор сторінки для сторінки, на яку ви хочете додати свою кнопку Shopify Buy Button.
5. Скопіюйте та вставте елемент <div> на сторінку, куди завгодно хочете, щоб ваша кнопка «Купити» з’явилася.
6. Збережіть зміни.

Додайте електронну комерцію на будь-який веб-сайт за допомогою кнопки «Купити» Shopify

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

Для власників магазинів стратегічно розміщена кнопка “Купити” у блозі може надати клієнтам простий спосіб придбати продукти, не залишаючи сторінки, на якій вони перебувають.

Для блогерів, художників, письменників, дизайнерів, авторів подкастерів, впливових осіб та всіх, хто хоче монетизувати свою роботу, Кнопки «Купити» Shopify пропонують простий спосіб скористатися перевагами платформи електронної комерції Shopify без необхідності створювати новий веб-сайт.

Завдяки настроюваним стилям, кольорам і функціям кнопки «Купити» Shopify дозволяють ви перетворюєте будь-яку сторінку чи веб-сайт на повноцінний онлайн-магазин.