Ця стаття показує, як підключити Shopify до Onepage. Таке налаштування дає змогу показувати товари з вашого Shopify-магазину на вебсайті Onepage і продавати їх через Shopify.
Компоненти
Shopify: Платформа електронної комерції, де ви керуєте своїми товарами та обробляєте продажі.
Claude: AI-модель, яка створює ваш вебсайт і потрібну секцію магазину.
Onepage-MCP: З'єднання, через яке Claude може створювати та редагувати ваш вебсайт в Onepage.
Переваги підключення Shopify
Таке підключення поєднує гнучке створення сторінок у Onepage з керуванням товарами та замовленнями в Shopify:
Централізоване керування товарами: Керуйте товарами, цінами та наявністю безпосередньо в Shopify. Зміни потім відображаються на вашому вебсайті Onepage.
Гнучкий вибір товарів: За допомогою тегів товарів ви визначаєте, які товари показуються на вашому вебсайті.
Shopify-Checkout: Ваші клієнти завершують покупку через Shopify, тоді як ви й далі керуєте замовленнями централізовано в Shopify.
Підключення Shopify до Onepage: покрокова інструкція
Виконайте ці кроки, щоб підключити свій Shopify-магазин до Onepage:
📌 Примітка: Наведені кроки та скриншоти відповідають інтерфейсу на момент створення цієї статті. Інтерфейс або назви елементів у сервісі могли з того часу змінитися. Якщо ви помітите розбіжності, рекомендуємо перевірити актуальні інструкції в самому сервісі, зазирнути до Довідкового центру постачальника або звернутися до його служби підтримки.
Актуальну інструкцію ви знайдете в офіційній документації Shopify щодо каналу продажу Headless.
I. Налаштування Shopify Headless
Крок 1:
Відкрийте адмінпанель Shopify і перейдіть до «Sales channels» (Канали продажу).
Крок 2:
Знайдіть канал продажу «Headless».
Крок 3:
Виберіть «Headless» і встановіть цей канал продажу у своєму Shopify-магазині.
Крок 4:
Відкрийте встановлений канал продажу Headless.
Крок 5:
Натисніть «Add storefront» (Додати storefront) і створіть новий storefront для свого вебсайту Onepage.
Крок 6:
Відкрийте новий storefront. У розділі «Storefront API» натисніть «Manage» (Керувати).
Крок 7:
Скопіюйте публічний токен доступу Storefront API. Він знадобиться вам пізніше для підключення до Onepage.
⚠️ Важливо: Використовуйте лише публічний токен доступу. Ніколи не передавайте та не публікуйте приватний токен доступу.
II. Створення секції магазину за допомогою Claude
Крок 1:
Відкрийте Claude і переконайтеся, що Onepage-MCP підключено. Детальну інструкцію ви знайдете в цій статті.
Крок 2:
Розпочніть новий чат і спочатку вставте підготовлений технічний майстер-промпт. Він доручає Claude перевірити актуальні скіли Onepage та інтерфейси Shopify.
Технічний майстер-промпт:
## STEP 0 — PRE-EXECUTION: SKILL DISCOVERY VIA ONEPAGE MCP Before writing a single line of code or making any architectural decisions, you MUST:
1. Call `Onepage:onepage_skill_list` to retrieve all available Onepage skills.
2. Read the returned list carefully — inspect each skill's `slug`, `title`, and `triggers` field.
3. Identify every skill whose triggers overlap with this project. Candidates will likely include but are not limited to: - Any skill mentioning React, vibe sections, or component apps - Any skill mentioning frontend design, CSS, or UI - Any skill mentioning site creation, page creation, or publishing - Any skill mentioning external APIs or data fetching - Any skill mentioning media, images, or assets
4. For each candidate skill identified in step 3, call `Onepage:onepage_skill_get` with its slug to retrieve the full skill body.
5. After reading all relevant skills in full, reason explicitly about which combination of skills defines the optimal build approach for this project. State your conclusions before proceeding: - Which skill governs the overall site/page scaffolding? - Which skill governs the React vibe section for the Shopify product grid? - Which skill governs frontend design tokens, CSS variables, and layout? - Are there any skill conflicts or sequencing constraints to respect? 6. Only after completing steps 1–5 should you proceed to Step 0.5. Do NOT skip this step. Do NOT assume you already know the correct Onepage workflow from prior context. Skills may have been updated, added, or reordered. Always read them fresh.
--- ## STEP 0.5 — SHOPIFY API REFERENCE CHECK Before writing any Shopify-related code, fetch and read the official documentation to ground every API call in the current spec:
1. Fetch https://shopify.dev/docs/api/storefront to confirm the current stable API version and authentication model.
2. Fetch https://shopify.dev/docs/api/storefront/latest/queries/products to verify the exact GraphQL query shape for product listings, including all available fields for title, description, handle, priceRange, featuredImage, tags, and variants.
3. Fetch https://shopify.dev/docs/api/storefront/latest/mutations/cartCreate to verify the correct mutation signature and required input shape before implementing cart creation.
4. Fetch https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesAdd to verify the correct mutation signature for adding items to an existing cart. 5. Fetch https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesRemove to verify the correct mutation signature for item removal. Use the returned documentation as the sole source of truth for all Shopify-related code. If anything stated elsewhere in this prompt conflicts with what shopify.dev returns, defer to shopify.dev without exception. Note the confirmed API version and use it consistently across all endpoint URLs. Only after completing steps 0 and 0.5 in full should you begin executing the project below.
Крок 3:
Додайте під майстер-промптом опис свого проєкту. Опишіть:
бажану структуру сторінки
теги, за якими відбиратимуться товари
дизайн і макет
потрібні функції фільтрування або кошика
поведінку на мобільних пристроях
Крок 4:
Нехай Claude створить вебсайт через Onepage-MCP. Дочекайтеся, доки створення повністю завершиться.
III. Внесення даних доступу Shopify в Onepage
Крок 1:
Відкрийте створений вебсайт на app.onepage.io і знайдіть React-елемент, який керує секцією Shopify.
Крок 2:
Укажіть домен свого Shopify-магазину, наприклад:
your-store.myshopify.com
Крок 3:
Вставте раніше скопійований публічний токен доступу Storefront API у призначене для цього поле.
Крок 4:
Перевірте, чи завантажуються потрібні товари та чи правильно працюють кошик і checkout. Після цього опублікуйте вебсайт.
🎉 Тепер ваш Shopify-магазин підключено до вебсайту Onepage. Ви можете керувати товарами в Shopify і за допомогою тегів товарів визначати, які з них показуються на вашому вебсайті. 🎉
Приклад із практики: створення вебсайту на Headless Shopify
У цьому прикладі Claude створює повноцінний вебсайт на Headless Shopify для AI-консалтингової агенції «NEXUS.AI». Дані про товари завантажуються безпосередньо з Shopify та вбудовуються в індивідуально оформлену секцію магазину.
Використаний промпт
Після технічного майстер-промпту додайте такий опис проєкту:
Використай Onepage-MCP, щоб створити повноцінний вебсайт на Headless Shopify для AI-консалтингової агенції під назвою „NEXUS.AI".
Вебсайт має завантажувати справжні дані про товари з Shopify і показувати перші дванадцять товарів в адаптивній сітці товарів. Кожна картка товару має містити зображення, назву товару, короткий опис, ціну та відповідні теги товару.
Після натискання на зображення товару має відкриватися детальний перегляд із зображенням товару, повним описом, ціною, доступними варіантами та кнопкою додавання в кошик.
Створи також кошик, у якому можна додавати та видаляти товари, а також змінювати їхню кількість. Checkout потім має відбуватися через Shopify.
Вебсайт має містити такі секції:
a. Навігація
b. Hero-секція
c. Порівняння Web 2.0 та Web 3.0
d. Сітка товарів Shopify
e. Детальний перегляд товару
f. Представлення агенції
g. Контактна секція
h. Футер
Використай для дизайну футуристичний стиль „Neural Noir & Holographic Web3" із темним тлом, ціановими та фіолетовими відтінками, світними рамками, скляними ефектами та стриманими анімаціями.
Створи вебсайт повністю адаптивним як React-елемент. URL магазину Shopify та публічний токен доступу Storefront API мають задаватися в налаштуваннях елемента.
Перед реалізацією перевір актуальні скіли Onepage та офіційну документацію Shopify. Для всіх запитів до Shopify використовуй версію Storefront API, яка підтримується зараз.
2. Обробка: Спочатку Claude перевіряє доступні скіли Onepage та актуальну документацію Shopify. Після цього Claude використовує Onepage-MCP, щоб створити структуру сторінки, дизайн і React-елемент Shopify безпосередньо в проєкті Onepage.
Під час реалізації ви можете будь-коли повідомляти Claude про зміни, наприклад:
змінити кольори або шрифти
додати або видалити секції
змінити макет товарів
зменшити кількість анімацій
додати функції кошика
3. Результат: Після завершення ви отримаєте посилання на створений проєкт Onepage. Вебсайт містить сітку товарів Shopify, детальні перегляди товарів, кошик і перехід до checkout у Shopify.
Далі відкрийте React-елемент Shopify і внесіть URL свого магазину та публічний токен доступу Storefront API. Щойно з'єднання буде встановлено, дані про товари завантажуватимуться безпосередньо з вашого Shopify-магазину.
Часті запитання (FAQ)
Чому мені потрібен канал продажу Shopify Headless?
Чому мені потрібен канал продажу Shopify Headless?
Канал продажу Headless встановлює з'єднання зі Storefront API. Саме там ви створюєте свій storefront, керуєте правами доступу та отримуєте публічний токен доступу.
Чому товари Shopify не відображаються?
Чому товари Shopify не відображаються?
Перевірте, чи:
правильно вказано URL магазину
дійсний публічний токен доступу
товари опубліковано в каналі продажу Headless
використані теги товарів відповідають фільтру в React-елементі
товари активні та доступні
💡Маєте відгук щодо цієї статті Довідкового центру? Поділіться ним із нами в живому чаті або надішліть на support@onepage.io, щоб ми могли підтримувати її в актуальному стані. 🙂