This article shows you how to connect Shopify to Onepage. This setup allows you to display products from your Shopify store on your Onepage website and sell them through Shopify.
The components
Shopify: The ecommerce platform where you manage your products and process sales.
Claude: The AI model that creates your website and the desired shop section.
Onepage MCP: The connection that allows Claude to create and edit your website in Onepage.
Benefits of the Shopify integration
The integration combines Onepage's flexible page-building capabilities with Shopify's product and order management:
Centralized product management: Manage products, prices, and availability directly in Shopify. Changes are then reflected on your Onepage website.
Flexible product selection: Use product tags to control which products are displayed on your website.
Shopify checkout: Your customers complete their purchase through Shopify, while you continue to manage orders centrally in Shopify.
Connect Shopify with Onepage: Step-by-step guide
Follow these steps to connect your Shopify store with Onepage:
📌 Note: The following steps and screenshots reflect the interface at the time this article was created. The tool's interface or labels may have changed since then. If you notice any differences, we recommend checking the current instructions in the tool, consulting the provider's Help Center, or contacting the provider's support team.
You can find the latest instructions in the official Shopify documentation for the Headless sales channel.
I. Set up Shopify Headless
Step 1:
Open your Shopify admin and navigate to “Sales channels”.
Step 2:
Search for the “Headless” sales channel.
Step 3:
Select “Headless” and install the sales channel in your Shopify store.
Step 4:
Open the installed Headless sales channel.
Step 5:
Click “Add storefront” and create a new storefront for your Onepage website.
Step 6:
Open the new storefront. In the "Storefront API" section, click "Manage"..
Step 7:
Copy the public Storefront API access token. You will need it later to connect with Onepage.
⚠️ Important: Use only the public access token. Never share or publish a private access token.
II. Create the shop section with Claude
Step 1:
Open Claude and make sure the Onepage MCP is connected. You can find detailed instructions in this article.
Step 2:
Start a new chat and first paste the prepared technical master prompt. It instructs Claude to check the current Onepage skills and Shopify interfaces.
Technical master prompt:
## 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.
Step 3:
Add your project description below the master prompt. Describe:
the desired page structure
the product tags used for product selection
the design and layout
the desired filter or cart features
the behavior on mobile devices
Step 4:
Have Claude create the website through the Onepage MCP. Wait until the creation process is fully complete.
III. Enter your Shopify credentials in Onepage
Step 1:
Open the created website at app.onepage.io and locate the React element that controls the Shopify section.
Step 2:
Enter the domain of your Shopify store, for example:
your-store.myshopify.com
Step 3:
Paste the public Storefront API access token you copied earlier into the designated field.
Step 4:
Check that the intended products load and that the cart and checkout work correctly. Then publish the website.
🎉 Your Shopify store is now connected to your Onepage website. You can manage your products in Shopify and use product tags to control which products are displayed on your website. 🎉
Practical example: Create a Headless Shopify website
In this example, Claude creates a complete Headless Shopify website for the AI consulting agency “NEXUS.AI.” Product data is loaded directly from Shopify and integrated into a custom-designed shop section.
The prompt used
After the technical master prompt add the following project description:
Use the Onepage MCP to create a complete Headless Shopify website for an AI consulting agency called “NEXUS.AI”.
The website should load real product data from Shopify and display the first twelve products in a responsive product grid. Each product card should contain an image, the product title, a short description, the price, and the associated product tags.
Clicking a product image should open a detail view showing the product image, full description, price, available variants, and an "Add to cart" button.
Also create a shopping cart products can be added, removed, and their quantities adjusted. Checkout should then be completed through Shopify.
The website should include the following sections:
a. Navigation
b. Hero section
c. Comparison between Web 2.0 and Web 3.0
d. Shopify product grid
e. Product detail view
f. Agency introduction
g. Contact section
h. Footer
Use a futuristic “Neural Noir & Holographic Web3” style with dark backgrounds, cyan and violet tones, glowing borders, glass effects, and subtle animations.
Create the website as a fully responsive React element. The Shopify store URL and public Storefront API access token should be configurable in the element settings.
Before implementation, check the current Onepage skills and the official Shopify documentation. Use the currently supported Storefront API version for all Shopify queries.
2. The process: Claude first checks the available Onepage skills and the current Shopify documentation. Claude then uses the Onepage MCP to create the page structure, design, and Shopify React element directly in the Onepage project.
During implementation, you can ask Claude to make changes at any time, for example:
adjust colors or fonts
add or remove sections
change the product layout
reduce animations
add cart features
3. The result: When complete, you will receive a link to the created Onepage project. The website includes a Shopify product grid, product detail views, a shopping cart, and forwarding to Shopify checkout.
Then open the Shopify React element and enter your store URL and public Storefront API access token. Once the connection is established, product data will load directly from your Shopify store.
Frequently asked questions (FAQ)
Why do I need the Shopify Headless sales channel?
Why do I need the Shopify Headless sales channel?
The Headless sales channel establishes the connection to the Storefront API. There you create your storefront, manage access permissions, and obtain the public access token.
Why aren't any Shopify products displayed?
Why aren't any Shopify products displayed?
Check whether:
the store URL is entered correctly
the public access token is valid
the products are published in the Headless sales channel
the product tags used match the filter in the React element
the products are active and available
Where can I find the website I created?
Where can I find the website I created?
You can find the website in your Onepage account at app.onepage.io.
💡Do you have feedback about this Help Center article? Share it with us via live chat or email support@onepage.io, so we can keep it up to date. 🙂