Skip to main content

Embedding Your Store on an External Website

Updated May 1, 2026

Display Fourthwall products on your existing website using direct links, embeds, or the Storefront API

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.

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. Link to the product page, or use a direct checkout link that adds the item to the cart and jumps to checkout.

tip

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 <iframe>. This works on WordPress, Wix, Squarespace, Hostinger, and any platform that supports custom HTML blocks.

How to add an iframe embed​

  1. Copy the URL of the Fourthwall product page you want to embed (for example, https://yourshop.fourthwall.com/products/your-product).
  2. On your external website, add a Custom HTML block or widget where you want the product to appear.
  3. Paste the following code, replacing the src URL with your product page URL:
<iframe
  src="https://yourshop.fourthwall.com/products/your-product"
  width="100%"
  height="800"
  style="border: none;"
  title="Product from my Fourthwall shop"
></iframe>
  1. Adjust the width and height values to fit your site's layout.

Iframe limitations​

caution

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 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 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​

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.

If you have any questions, do not hesitate to contact us at support@fourthwall.com.

Was this helpful?