Listen to a short brief of this article
Hands-free while you multitask
Key Insights in 60 Seconds
Everything you need to know about adding Shopify to your existing website — skim first, then dive into the method that fits you.
Yes, you can add Shopify to any website — WordPress, Wix, Squarespace, custom HTML, or any platform that accepts embedded code.
Buy Button is the simplest method — embed a product card with cart + checkout on any page in under 10 minutes. Works on the Starter plan ($5/mo).
Costs start at $5/month — the Starter plan includes Buy Button, Shopify checkout, and unlimited products. Transaction fees are 5% + 30¢ per sale.
Storefront API for full control — developers can build custom shopping experiences on any frontend using Shopify's headless commerce APIs.
No need to rebuild your site — keep your existing design, SEO, and content. Add e-commerce only where you need it.
Shopify handles checkout, payments & security — PCI compliance, SSL, fraud protection, and 100+ payment methods are built in.
Full product management included — manage inventory, orders, shipping, and customers from a single Shopify admin dashboard.
Trade-off: higher transaction fees — the Starter plan charges 5% + 30¢ per sale vs 2.9% + 30¢ on Basic ($39/mo). Factor in volume.
What You'll Learn
15 methods to add Shopify to any website
2Step-by-step Buy Button setup guide
3When to use Storefront API vs Buy Button
4True cost comparison for each method
5Platform-specific instructions (WP, Wix, etc.)
6Which method fits your business stage
Short Answer: Yes, You Can Add Shopify to Any Website
If you already have a website you love — built on WordPress, Wix, Squarespace, Webflow, or custom HTML — you don't have to abandon it to start selling with Shopify. Shopify's Buy Button lets you embed customizable product cards, a shopping cart, and Shopify's secure checkout into any web page — regardless of platform.
This means you keep your existing design, SEO rankings, blog content, and domain while adding professional e-commerce functionality powered by Shopify's infrastructure. Shopify handles the hard parts: payment processing, PCI compliance, inventory management, order fulfillment, and fraud protection.
Any Site
Works Everywhere
$5/mo
Starting Cost
< 10 min
Setup Time
100+
Payment Methods
Source: Shopify Pricing & Buy Button Docs
What exactly happens when you add Shopify to your site?
Your existing website stays exactly as it is. Shopify adds an embeddable layer on top: product cards that display pricing and images, a slide-out shopping cart, and a redirect to Shopify's hosted checkout when customers are ready to pay. Products, inventory, and orders are all managed from a single Shopify admin dashboard. Think of it as plugging a professional e-commerce engine into your existing website.
5 Ways to Add Shopify to Your Existing Website
Not all integrations are created equal. Here's a quick overview of the 5 methods before we dive into each one:
Integration Methods at a Glance
| Method | Min. Plan | Tech Skill | Best For |
|---|---|---|---|
| Buy Button | Starter ($5) | None | Bloggers, portfolio sites, simple stores |
| Starter Plan Link Page | Starter ($5) | None | Social sellers, link-in-bio commerce |
| Storefront API | Any plan | High | Custom UX, headless commerce, developers |
| Manual Product Embeds | Any plan | Medium | Few products, static sites, minimal JS |
| Full Migration | Basic ($39) | Low–Med | Dedicated online stores, serious e-commerce |
Which Method Is Right for You?
Blogger or Content Creator
Use: Buy Button + Starter ($5/mo)Embed product cards in blog posts or portfolio pages. Keep your existing WordPress/Wix/Squarespace site. Sell merch, digital downloads, or services without rebuilding anything.
Developer or Agency
Use: Storefront API + Basic ($39/mo)Build a custom shopping experience on your client's existing site. Full control over UI, product rendering, cart, and checkout flow. GraphQL queries, React/Vue/Next.js frontend.
Small Business Owner
Use: Buy Button + Basic ($39/mo)Lower card rates save money at scale. Discount codes and staff accounts included. Keep your existing site but get the full Shopify backend for order management, shipping, and analytics.
Serious E-Commerce Brand
Use: Full Migration to ShopifyMigrate your entire site to Shopify. Get the lowest fees, full app ecosystem, SEO-optimized product pages, blog, and everything under one roof. Start with the $1/month trial to test.
Found your method?
Use the table of contents (bottom-left button) to jump directly to the detailed guide for your chosen method. Or keep reading — we'll walk through each one below.
Still not sure which method fits? Take this quick quiz for a personalized recommendation based on your skills, budget, and goals.
Which Integration Method Should You Use?Answer 5 questions to find the best way to add Shopify to your site
Question 1 of 5
What's your technical skill level?Method 1: Shopify Buy Button — The Easiest Way
The Shopify Buy Button is the most popular method for adding Shopify to an existing website — and for good reason. It's the fastest, simplest, and most cost-effective approach for most use cases.
Shopify Buy Button lets merchants generate an embeddable product card and checkout that can be placed on any type of website.
The Buy Button generates an embeddable code snippet that renders a customizable product card with an "Add to Cart" button. When clicked, a slide-out cart appears on your page. The customer completes checkout on Shopify's PCI-compliant, conversion-optimized checkout page — handling payment processing, tax calculation, and shipping automatically.
How to Set Up the Buy Button
1
Create a Shopify Account
Sign up at shopify.com/free-trial. You can start with the 3-day free trial, then continue on the Starter plan ($5/mo) or any higher plan.2
Add Your Products
In the Shopify admin, go to Products → Add Product. Upload images, set prices, write descriptions, and configure variants (sizes, colors). You can add unlimited products on any plan.3
Install the Buy Button Channel
Go to Settings → Apps and Sales Channels → Shopify App Store, and search for 'Buy Button channel.' Install it. This gives you the embed code generator.4
Create a Buy Button
Click Buy Button channel → Create a Buy Button → select a product or collection. Customize the appearance: colors, layout, button text, and cart behavior to match your website's design.5
Copy & Paste the Embed Code
Shopify generates a JavaScript snippet. Copy it and paste it into your website's HTML wherever you want the product to appear. On WordPress, use a Custom HTML block. On Wix, use a Code Embed element.6
Test & Launch
Preview your page to verify the product card renders correctly. Click 'Add to Cart' to test the cart and checkout flow. Make a test purchase to confirm payments work end-to-end.Fully Customizable
Match your website's brandCustomize colors, fonts, button text, layout style, and product details shown. The Buy Button adapts to any design system.
Responsive by Default
Works on all screen sizesThe product card and cart automatically adapt to mobile, tablet, and desktop viewports. No additional CSS required.
Secure Checkout
PCI DSS Level 1 compliantPayments are processed on Shopify's hosted checkout — you never handle sensitive card data on your own site.
Cart with Multiple Products
Shoppers can add several itemsThe slide-out cart persists across pages on your site (via localStorage), so visitors can add items from different pages and check out once.
Multiple Payment Methods
Cards, Shop Pay, Apple Pay, GPayAccept credit/debit cards, Shop Pay, Apple Pay, Google Pay, and other accelerated checkout methods — all through Shopify Payments.
Analytics Included
Track sales and visitorsView sales, conversion rates, and traffic data in your Shopify admin. Track which embedded products perform best across your site.
Pro tip: Embed a collection, not just single products
Instead of embedding individual Buy Buttons one by one, you can embed an entire collection. This renders a grid of products that automatically updates when you add new items to the collection in your Shopify admin. It's the closest you can get to a full store experience without leaving your existing website.
Method 2: Shopify Starter Plan ($5/mo)
The Shopify Starter plan is specifically designed for merchants who already have a web presence and just need e-commerce capabilities. At $5/month, it's the most affordable entry point to the Shopify ecosystem.
With Starter, you get:
- Buy Button channel — embed products on any external website
- Link-in-bio storefront page — a simple, mobile-optimized product page hosted on your Shopify URL (your-store.myshopify.com)
- Shopify checkout — the same conversion-optimized checkout used by all Shopify plans
- Unlimited products — no cap on how many products you can list
- Order management — manage orders, shipping, and customer data from the Shopify admin
- Shopify Inbox — chat with customers in real time
Starter plan limitations
The Starter plan does not include a full online store with theme customization, blog, or custom pages. You also get higher transaction fees: 5% + 30¢ per sale with Shopify Payments (vs 2.9% + 30¢ on Basic). There's no staff accounts, no discount codes, and no shipping rate calculations. For a complete plan comparison, see our Shopify Pricing Explained guide.
Platform-Specific Integration Guides
WordPress
Use Custom HTML block or pluginIn the WordPress editor, add a Custom HTML block and paste the Buy Button embed code. Alternatively, install the 'Shopify Buy Button' plugin for a dedicated widget. Works with both Classic Editor and Gutenberg.
Wix
Use Embed Code elementIn the Wix Editor, click Add → Embed → Custom Code. Paste the Shopify Buy Button code. Position and resize the element on your page. On Wix Studio, use the 'Custom Element' component.
Squarespace
Use Code Block or Code InjectionAdd a Code Block in the Squarespace page editor and paste the embed code. For site-wide cart, add the script to Settings → Advanced → Code Injection (header).
Webflow
Use Embed componentDrag an Embed component from the Add panel, paste the Shopify Buy Button code. Works in both the Designer and published site. For dynamic pages, place the embed inside a Collection item template.
Custom HTML/Static Sites
Paste directly into HTMLPaste the embed code into your HTML file at the desired location. The script tag loads asynchronously and won't block page rendering. Works with any static site generator (Hugo, Jekyll, 11ty, Astro).
Any Other Platform
If it accepts HTML, it worksAny website builder or CMS that lets you add custom HTML or JavaScript can use the Shopify Buy Button. This includes Ghost, Notion (via Super.so), Carrd, and more.
Method 3: Storefront API (Headless Commerce)
For developers who want complete control over the shopping experience, Shopify's Storefront API is the most powerful integration method. It's a GraphQL API that gives you access to product data, collections, cart management, and checkout — without any pre-built UI.
This is the "headless commerce" approach: Shopify handles the backend (products, inventory, payments, orders, shipping), while your existing website handles the frontend (product display, cart UI, user experience). You build the bridge between them using API calls.
The Storefront API is the foundational layer of custom storefronts. It provides you the commerce primitives to build custom, scalable, and performant shopping experiences.
Full UI Control
Build any shopping experienceNo pre-built components or design constraints. Render products, cart, and checkout flow exactly as you want. Use React, Vue, Svelte, or vanilla JS.
GraphQL API
Efficient, typed data fetchingQuery exactly the data you need — product titles, prices, images, variants, inventory levels. No over-fetching or under-fetching.
Secure by Design
Public API tokens are safeStorefront API uses public access tokens that are safe to expose in client-side code. They only grant read access to published products and write access to carts.
Performance Optimized
100 requests/second rate limitGenerous rate limits for production use. Combined with caching and SSR, you can build blazing-fast storefronts that outperform theme-based stores.
Getting Started with the Storefront API
1
Install the Headless Channel
In your Shopify admin, install the Headless channel from the Shopify App Store. This gives you Storefront API access tokens and a central place to manage API permissions.2
Create a Storefront
In the Headless channel, click 'Add Storefront' to generate a Storefront API access token. Configure which products and collections are accessible via the API.3
Query Products via GraphQL
Use the Storefront API endpoint (https://your-store.myshopify.com/api/2024-01/graphql.json) to fetch product data. Query products, collections, variants, pricing, and availability.4
Build Cart & Checkout
Use the Cart API (part of Storefront API) to create carts, add/remove line items, and generate a checkout URL. Redirect customers to Shopify's hosted checkout to complete payment.5
Render on Your Frontend
Display product data and cart state using your frontend framework of choice. Use React components, Vue templates, or plain HTML/JS — Shopify doesn't dictate your UI.When to use Storefront API vs Buy Button
Use the Buy Button when you want a quick, no-code embed for a few products. Use the Storefront API when you need a fully custom shopping experience — custom product pages, real-time search, dynamic filtering, personalized recommendations, or when you want products to feel native to your existing site design. The API is also the right choice if you need server-side rendering for SEO.
Method 4: Embed Products via Custom Code
The Buy Button JS library is the underlying JavaScript SDK that powers the Buy Button channel. You can use it directly to create product embeds with more customization options than the visual builder offers.
This approach sits between the no-code Buy Button and the full Storefront API in terms of complexity and flexibility. You write JavaScript to define product components, cart behavior, and styling — but Shopify handles the heavy lifting of rendering, cart state, and checkout redirection.
Ideal for static sites and custom CMS
If your website is built with a static site generator (Hugo, Jekyll, 11ty, Astro) or a headless CMS (Contentful, Sanity, Strapi), the Buy Button JS library is often the best fit. Drop the script into your template, configure it with your product IDs, and Shopify handles the rest.
Method 5: Full Migration to Shopify
Sometimes the right answer isn't "add Shopify to your existing website" — it's "move your website to Shopify." This is especially true when e-commerce is (or will become) the primary purpose of your site.
A full migration means using Shopify as both your e-commerce backend and your website platform. You get access to 150+ Shopify themes, the full theme editor, blog functionality, SEO tools, and the lowest available transaction fees. For a detailed walkthrough of what the full Shopify platform offers, see our guide on How Shopify Store Works.
When Full Migration Makes Sense
- E-commerce is your primary business
- You want the lowest transaction fees (2.9% on Basic)
- You need full SEO control over product pages
- You have 50+ products and need a full catalog
- You want access to the full Shopify app ecosystem
When to Stay Embedded
- Your website is your brand (portfolio, blog, agency)
- You sell only a handful of products
- You have strong SEO on your current platform
- You don't want to learn a new platform
- Your hosting costs are minimal or free
Method Comparison: Side by Side
Feature Comparison by Integration Method
| Feature | Buy Button | Storefront API | Full Migration |
|---|---|---|---|
| Setup time | 10 minutes | Days–weeks | Days–weeks |
| Technical skill required | None | Advanced JS/GraphQL | Basic–Medium |
| Keep existing site | Yes | Yes | No (rebuild) |
| UI customization | Colors, layout | Complete control | Theme editor |
| Product page SEO | No | Yes (custom) | Yes (built-in) |
| Discount codes | Basic+ only | Yes | Yes |
| Lowest card rate | 5% + 30¢ (Starter) | 2.9% + 30¢ (Basic) | 2.9% + 30¢ (Basic) |
| App ecosystem access | Limited | Via API | Full (13,000+ apps) |
True Cost Breakdown: Adding Shopify to Your Website
The cheapest integration path is the Starter plan at $5/month, but the transaction fees are significantly higher. Here's where the crossover point happens:
Calculated based on Shopify Pricing (March 2026). Assumes Shopify Payments with standard card rates and $50 average order value.
Cost Breakdown by Plan & Revenue
| Monthly Revenue | Starter Total | Basic Total | Savings (Basic) |
|---|---|---|---|
| $500/mo | $33/mo | $57/mo | +$24/mo |
| $1K/mo | $61/mo | $74/mo | +$13/mo |
| $2K/mo | $117/mo | $109/mo | −$8/mo |
| $5K/mo | $285/mo | $214/mo | −$71/mo |
| $10K/mo | $565/mo | $389/mo | −$176/mo |
| $25K/mo | $1405/mo | $914/mo | −$491/mo |
The $1,600/month rule
If you expect to sell less than ~$1,600/month, the Starter plan ($5/mo) is more cost-effective despite its higher transaction rate. Above that threshold, Basic ($39/mo with 2.9% + 30¢) saves you money. At $10K/month, Basic saves $176/month compared to Starter. For a deep dive into all Shopify plan costs, see our Shopify Pricing Explained guide.
Estimate Your Shopify Costs
Use the calculator below to see your estimated monthly costs based on your expected revenue, order volume, and plan choice:
Shopify Cost Calculator
Enter your estimated monthly numbers to see the true cost across all Shopify plans.
BasicBest
$489
per month
Plan fee$39
Processing$350
Apps$100
% of Revenue4.9%
Grow
$535
per month
Plan fee$105
Processing$330
Apps$100
% of Revenue5.3%
Advanced
$809
per month
Plan fee$399
Processing$310
Apps$100
% of Revenue8.1%
Plus
$2,675
per month
Plan fee$2300
Processing$275
Apps$100
% of Revenue26.8%
* Estimates based on Shopify Payments rates. Actual costs may vary based on location, currency, and negotiated rates. Does not include theme, domain, or developer costs.
Limitations & Trade-offs of Adding Shopify
Every integration method has limitations. Being upfront about these helps you make the right choice:
No Native Product SEO
Buy Button products aren't indexableProducts embedded via Buy Button load via JavaScript and aren't crawled by search engines as standalone pages. For product SEO, you need the Storefront API with SSR or a full Shopify migration.
Higher Fees on Starter
5% + 30¢ vs 2.9% + 30¢ on BasicThe Starter plan's higher transaction rate makes it expensive at volume. At $5K/month revenue, you'd pay $285 in total vs $214 on Basic — a $71/month difference.
Limited Design Control
Buy Button offers basic customization onlyThe visual Buy Button builder offers color, layout, and text customization — but you can't fully match complex brand designs without using the JS SDK or Storefront API.
Split Admin Experience
Two platforms to manageYou'll manage content on your website platform and products/orders on Shopify. This dual-admin workflow adds operational overhead. Full migration eliminates this split.
Checkout Redirect
Customers leave your site to payWith Buy Button and Starter, customers are redirected to Shopify's hosted checkout to complete payment. This adds a context switch. Only Shopify Plus allows embedding checkout on your own domain.
No Discount Codes on Starter
Upgrade to Basic for promotionsThe Starter plan doesn't include discount codes or automatic discounts. If promotions are important to your business, you'll need at least the Basic plan ($39/mo).
The Bottom Line
Adding e-commerce to your existing website doesn't require rebuilding anything. Shopify gives you five integration paths — pick the one that matches your technical comfort and budget.
Don't overthink it. If you have an existing website and want to sell a few products, start with the Buy Button. It takes 10 minutes, costs $5/month, and you can always upgrade later.
Your Next Step by Stage
The beauty of Shopify's integration options is that they scale with you — from a single Buy Button to a fully headless commerce architecture. Start simple, validate demand, and upgrade when the data tells you to.
Frequently Asked Questions
Yes. The simplest method is using the Shopify Buy Button — you generate an embed code in your Shopify admin and paste it into any WordPress page or post using a Custom HTML block. Shopify also offers a dedicated WordPress plugin (Shopify Buy Button for WordPress) that simplifies the process. Your WordPress site keeps its design, SEO, and content while Shopify handles the e-commerce functionality (cart, checkout, payments, order management).
Yes. Both Wix and Squarespace allow you to embed custom HTML/JavaScript. Generate a Buy Button embed code from your Shopify admin, then paste it into a Code Embed block on Wix or a Code Block on Squarespace. The product card, cart, and checkout are all handled by Shopify. Your existing site design remains unchanged. Note that Wix and Squarespace have their own e-commerce features — Shopify integration makes sense when you want Shopify's superior checkout, payment processing, or inventory management.
The cheapest option is the Shopify Starter plan at $5/month. It includes the Buy Button channel, Shopify's secure checkout, unlimited products, and order management. The trade-off is higher transaction fees (5% + 30¢ per sale with Shopify Payments). If you're doing more than ~$1,600/month in sales, upgrading to the Basic plan ($39/mo) with its lower rates (2.9% + 30¢) saves money in the long run.
No. That's the core advantage of methods like the Buy Button and Storefront API. You keep your existing website exactly as it is — same design, same hosting, same SEO rankings — and simply add Shopify-powered e-commerce elements where needed. You only need to rebuild if you want a full Shopify-hosted online store with themes, which is the full migration path (Method 5).
Minimally. The Buy Button JavaScript library is lightweight and loads asynchronously, so it doesn't block your page rendering. The embed code adds approximately 50–100KB to your page (gzipped). For Storefront API integrations, performance depends entirely on your implementation. In both cases, Shopify's CDN serves the assets, so they load from edge servers closest to your visitors. The impact on Core Web Vitals is typically negligible.
When using the Buy Button, payments are processed through Shopify's checkout. You can use Shopify Payments (powered by Stripe) or connect a third-party payment gateway. If you use a third-party gateway on the Starter plan, Shopify adds an additional 5% transaction fee on top of whatever your gateway charges. Using Shopify Payments eliminates this extra fee. Note that Shopify Payments is not available in all countries.
Yes. The Buy Button is fully responsive and works on all screen sizes. The product card, cart overlay, and checkout flow automatically adapt to mobile viewports. The cart appears as a slide-out panel on mobile devices. Shopify's checkout is also mobile-optimized with accelerated checkout options like Apple Pay, Google Pay, and Shop Pay.
Yes, but with limitations. The Buy Button supports physical products, digital products, and services. For subscriptions, you'll need a subscription app like Recharge or Bold Subscriptions, and the integration may require using the Storefront API instead of the basic Buy Button embed. Digital product delivery (download links, license keys) works through Shopify's built-in digital downloads app or third-party apps like SendOwl.
Your existing site's SEO is completely unaffected. The Buy Button embeds as JavaScript, so it doesn't alter your page structure, URL paths, or HTML semantics in ways that impact SEO. Your product pages still live on your existing site. However, products added via Buy Button don't generate their own indexable product pages (those exist only on Shopify's hosted storefront, which is hidden on Starter). For product SEO, consider the full migration approach or using the Storefront API to render product pages on your domain.
Shopify Lite was a $9/month plan that specifically offered the Buy Button and POS features for merchants who wanted to add e-commerce to an existing website or sell in person. Shopify discontinued the Lite plan and replaced it with the Starter plan ($5/month), which offers similar Buy Button functionality plus additional features like a link-in-bio storefront page. If you previously used Shopify Lite, the Starter plan is its direct replacement at a lower price point.
Yes. All products and inventory are managed centrally in your Shopify admin, regardless of which integration method you use. If you sell the same product via Buy Button on your website and through another Shopify sales channel (like Shop app or social media), inventory syncs automatically across all channels. Shopify tracks stock levels, sends low-inventory alerts, and can automatically hide out-of-stock products.
The Storefront API is available on all Shopify plans, including Starter ($5/mo). There are no additional API usage fees. However, implementing a Storefront API integration requires development skills (JavaScript, React, or any frontend framework). Rate limits apply: the Storefront API allows up to 100 requests per second for a single store. For most use cases, this is more than sufficient.
About This Article
Written by
Shopify Developer & E-Commerce Writer
9+ years with Shopify since 2017
Front-end developer specializing in Shopify since 2017. Experienced in building custom Liquid themes, optimizing storefront performance, and integrating third-party apps. Writes in-depth, data-driven e-commerce guides based on hands-on experience with real merchant stores.
Continue Learning
What to Read Next
Integration Guide28 min
WordPress Shopify Integration: Sell on Your WP Site
Five integration methods compared — Sell on WordPress, Buy Button, ShopWP, headless Storefront API, and subdomain hybrid. Costs, SEO, and a decision framework.
Read articleIntegration Guide18 min
Walmart Shopify Integration: Setup, Fees & Fulfillment
Guide to selling Shopify products on Walmart Marketplace — approval, three integration paths, fees by category, WFS, listing rules, and Seller Scorecard.
Read articlePlatform Guide11 min
Why Shopify Is Better Than WordPress for E-Commerce
Objective comparison of Shopify vs WordPress/WooCommerce for online stores. Cost analysis, security, performance, and decision framework.
Read article