How Swiffle Grid Works

Last updated: June 2026

Quick answer

Swiffle Grid works in three steps: connect a live data source, design the grid visually inside WordPress, then export it as a self-contained HTML snippet. That snippet can be embedded inside WordPress or on a completely different platform — Shopify, Webflow, Wix, a static site — and it keeps updating live wherever it lives, with no CORS or network-blocking issues.

1Connect a data source

Pick where the grid’s data comes from:

  • A Google Sheet, synced live
  • WooCommerce products — your own store, or another store’s catalog
  • WordPress posts
  • CSV or Excel files
  • RSS feeds
  • A custom API or JSON endpoint, via a developer connector

Swiffle Grid fetches this data directly, without duplicating it into the WordPress database, so there’s no sync job and nothing to keep clean.

2Design the grid

Build the layout visually, in Gutenberg or Elementor — no code required. For each grid, you choose:

  • Columns and which fields appear on each card
  • The browsing style: a classic grid with automatic line wrap, a carousel with shiftable overflow, or a swipeable card stack — swipe left to advance, swipe right to go back
  • What happens when a card is interacted with: it flips in place, opens a modal, opens a link, or does nothing — independent of the browsing style, so a card can swipe to navigate and flip to reveal detail at the same time
  • Whether visitors get a button to switch between browsing styles themselves, or whether you lock it to one view
  • Sorting, pagination, and AJAX filters by category, name, description, or price range

3Export and embed it anywhere

Publish the grid and copy its HTML snippet. This is the step that sets Swiffle Grid apart from plugins that only display grids inside WordPress: the snippet works equally well pasted into a WordPress block or shortcode, or pasted into a site that doesn’t run WordPress at all — Shopify, Webflow, Wix, Squarespace, Ghost, a static HTML page, or a mobile app’s webview. There’s no CORS error to debug and no network request to whitelist.

4It stays live

Once embedded, the grid keeps listening to its data source. Edit a row in the Google Sheet, or update a product in WooCommerce, and the change appears automatically everywhere that grid is embedded — with no republishing and no manual refresh, including on the copy living outside WordPress.

Frequently asked questions

Can I embed a Swiffle Grid on a site that isn’t WordPress?
Yes. The export step produces a plain HTML snippet that works on any platform supporting HTML and CSS, not only inside WordPress.
Will embedding a grid on another platform cause CORS errors?
No. The embed is built specifically to avoid CORS and network-blocking issues, so the grid behaves the same wherever it’s placed.
If I connect WooCommerce, does checkout happen on the external site?
Cart, wishlist, and sign-in work directly on the external site. Checkout completes back on your WordPress store, keeping your existing payment setup intact.
Do I need a developer to set this up?
No. Every step — connecting a source, designing the grid, and exporting the snippet — happens visually inside Gutenberg or Elementor.