--- title: Embedding Your Store on an External Website shortDescription: Display Fourthwall products on your existing website using direct links, iframe embeds, or the Storefront API for a fully custom storefront. articleType: Reference primaryTopic: embed-store-external-website categories: - Integrations - Developer Tools - Store Design tags: - embed-store - external-website - iframe-embed - storefront-api - buy-now-button - direct-checkout-link - headless-commerce - custom-storefront - wordpress-embed - product-widget tasks: - Embed a product page on an external website - Create a Buy Now button linking to Fourthwall checkout - Display products using the Storefront API - Get a storefront token from the Fourthwall dashboard - Link an external site to a Fourthwall shop - Set up an iframe embed for a product page terms: - embed store - embed products - embed fourthwall - iframe fourthwall - product widget - buy now button - direct checkout link - external website - storefront api - headless commerce - wordpress embed - embed on wix - embed on squarespace - add fourthwall to my website - embed shop on site labels: - integrations - embedding - developer-tools - storefront-api - external-website contextString: Available on all plans. Useful for creators who already have an external website and want to sell Fourthwall products through it. Storefront API requires a storefront token from Settings > For Developers. breadcrumbPath: "Manage my shop > Shop settings > Embedding Your Store on an External Website" path: manage-my-shop/shop-settings/embedding-your-store-on-an-external-website last_updated: '2026-05-01' --- # Embedding Your Store on an External Website If you already have a website on WordPress, Wix, Squarespace, or another platform, you can connect it to your Fourthwall shop so supporters can browse and buy your products without leaving your site (or with a quick redirect to checkout). There are three main approaches, from simple links to a fully custom build: 1. **Link directly to your Fourthwall shop.** Add buttons or menu links that send visitors to your shop or product pages. 2. **Embed product pages with an iframe.** Display individual product pages inside your existing site layout. 3. **Build a custom storefront with the Storefront API.** Fetch product data from Fourthwall and render it in your own design, with checkout handled by Fourthwall. ## Link to your shop or products The simplest approach is adding links or buttons on your external website that point to your Fourthwall shop. **Shop link:** Use your Fourthwall shop URL (for example, `https://yourshop.fourthwall.com`) as a "Shop" or "Merch" button in your site's navigation. **Direct checkout links:** Create "Buy Now" buttons that take supporters straight to checkout for a specific product. You can find each product's URL in your dashboard under [**Products**](https://my-shop.fourthwall.com/admin/dashboard/products/?redirect). Link to the product page, or use a direct checkout link that adds the item to the cart and jumps to checkout. Direct links are the most reliable method. Cart, checkout, and all product features work exactly as designed. No coding required. ## Embed a product page with an iframe You can display a Fourthwall product page inside your existing website using an HTML ` ``` 4. Adjust the `width` and `height` values to fit your site's layout. ## Iframe limitations Iframe embeds display product pages, but they have limitations you should know about before using them. - **Navigation stays inside the iframe.** Supporters can browse within the embedded frame, but the experience may feel confined compared to visiting your full shop. - **Cart and checkout redirect to Fourthwall.** When a supporter adds an item to their cart or clicks checkout, they leave the iframe and complete the purchase on your Fourthwall shop directly. - **You cannot embed your entire shop.** Iframes work best for individual product pages or collections. Full shop navigation (menus, search, account features) does not transfer cleanly into an iframe. - **Mobile responsiveness varies.** Test your iframe on mobile devices to make sure it displays correctly at smaller screen sizes. For a shopping experience that feels native to your site, use the Storefront API instead. ## Build a custom storefront with the Storefront API The [Storefront API](https://docs.fourthwall.com/storefront/overview) lets you fetch your product catalog, manage carts, and redirect supporters to Fourthwall's hosted checkout. You control the entire frontend (design, layout, product display) while Fourthwall handles products, payments, fulfillment, and shipping. This approach requires development experience or an AI website builder like Lovable that generates code from prompts. ## Get your storefront token 1. Go to [**Settings** > **For Developers**](https://my-shop.fourthwall.com/admin/dashboard/settings/for-developers?redirect) in your Fourthwall dashboard. 2. Copy your **Storefront Token** (starts with `ptkn_`). 3. Store it securely. This token grants read access to your product catalog and collections. ## Key API endpoints All requests include your storefront token as a query parameter: - **List collections:** `GET https://storefront-api.fourthwall.com/v1/collections?storefront_token=YOUR_TOKEN` - **List products in a collection:** `GET https://storefront-api.fourthwall.com/v1/collections/{handle}/products?storefront_token=YOUR_TOKEN` - **Get shop details:** `GET https://storefront-api.fourthwall.com/v1/shop?storefront_token=YOUR_TOKEN` Use the handle `all` to fetch every published product in your shop. ## Cart and checkout The Storefront API provides cart endpoints to create carts, add or remove items, and retrieve cart contents. When a supporter is ready to check out, redirect them to: ``` https://{your_shop_domain}/checkout/?cartCurrency={currency_code}&cartId={cart_id} ``` Fourthwall handles the entire checkout process, including payment, tax calculation, and order confirmation. ## Ready-made templates and tools - **Vercel Commerce template.** Fourthwall maintains an official Next.js template you can deploy to Vercel in one click. See [How to Integrate Vercel with Fourthwall](/integrate-vercel) for setup instructions. - **Lovable.** Use the AI website builder to generate a React storefront connected to the Storefront API. See [How to Integrate Lovable with Fourthwall](/integrate-lovable) for a step-by-step guide. ## Choosing the right approach - **Just want to sell merch from your existing site?** Link directly to your Fourthwall shop or product pages. Simple, no code needed. - **Want to show products inline on your site?** Use an iframe embed. Quick to set up, but limited in flexibility. - **Want full design control over the shopping experience?** Use the Storefront API to build a custom frontend. Requires development skills or an AI builder like Lovable. All three approaches use Fourthwall's hosted checkout, so your supporters always get a secure, reliable payment experience. ## Frequently asked questions ### Can I embed my entire Fourthwall shop on another website? No. You can embed individual product pages or collections using iframes, and you can build a fully custom product browsing experience using the Storefront API. But Fourthwall's full shop (with navigation, search, account management, and cart) cannot be embedded as a single widget on another site. ### Do supporters need a Fourthwall account to buy from an embedded product? No. Supporters check out as guests on Fourthwall's hosted checkout page. No account is required. ### Does embedding work with WordPress, Wix, and Squarespace? Yes. All three platforms support custom HTML blocks where you can add iframe embeds or link buttons. For the Storefront API approach, you need a separately hosted frontend (for example, on Vercel or Netlify). ### Is the Storefront API free to use? Yes. The Storefront API is available on all Fourthwall plans at no additional cost. ### Where can I find the full Storefront API documentation? The complete API reference is available at [docs.fourthwall.com/storefront/overview](https://docs.fourthwall.com/storefront/overview).