Swiffle Grid — Block Setup Reference
Last updated: July 2026
All settings are available in both Gutenberg and Elementor. Parameters marked Laptop apply to desktop/tablet, Phone to mobile. The Source column shows which data source(s) expose the setting — All means it applies regardless of source.
📦 Data
| Setting | Description | Device | Default |
|---|---|---|---|
Site home URL | The WordPress site URL used as proxy for the block. Set automatically — only change this if you run Swiffle Grid on a different domain than your front-end. | Both | Current site URL |
Data source | The connector that feeds the grid. WordPress — posts from this site. RSS — any RSS feed URL (including YouTube channel feeds). XLSX / CSV,CSV / CSV;CSV — a spreadsheet published as a web URL (e.g. Google Sheets «Publish to web»). WooCommerce — product catalog with remote cart, wishlist & sign-in. Custom — a custom PHP connector you have registered. | Both | WordPress |
URL / source | Feed URL for RSS, spreadsheet URL for CSV/XLSX, or connector slug for Custom. Not shown for WordPress or WooCommerce. | Both | — |
WordPress categories | One or more WordPress post categories to display. Leave empty to show all posts. | Both | All |
WooCommerce categories | One or more WooCommerce product categories. Special values: wishlist (customer’s saved items), on_sale_only (sale products only). | Both | All |
Sorting | Default sort order for WooCommerce products: latest, popularity, rating, price high–low, price low–high, or relevance. | Both | Sort by latest |
Title (Filter) | Custom title shown above the filter panel. Leave empty for the auto-generated title. | Both | Auto |
Follow the page filter? | When enabled, the block reacts to a page-level search/filter widget and updates its results accordingly. | Both | Yes |
Follow the url filter? | When enabled, the block reads WooCommerce URL query parameters and applies them as filters. | Both | Yes |
Show no data error? | Display a message when the data source returns no results. Disable for a cleaner silent empty state. | Both | Yes |
Include WP headers? | Include post meta headers (category, date) in the card content. | Both | Yes |
Show Comments? | Show the comment thread on the back of each card. | Both | Yes |
⚙️ Block properties
| Setting | Description | Device | Source | Default |
|---|---|---|---|---|
Language | Language used for built-in labels (price, cart, ratings…). Default follows the WordPress site locale. Takes effect after saving and reloading. Use the same language on all blocks of the same page. | Both | WPWooCustom | Default |
Cards per page | Number of cards loaded per page. Pagination appears automatically when more cards are available. Range: 4–100. | Laptop | All | 20 |
Cards per page | Same as above, for mobile screens. | Phone | All | 12 |
Default block layout | Initial layout when the page loads. Wrap — classic grid with automatic line wrap. Swipe — Tinder-style swipe (left = next, right = previous), cards are also flippable. Fixed swipe — full-screen immersive swipe. Row — horizontal scrollable row. | Laptop | All | Wrap |
Default block layout | Same as above, for mobile screens. | Phone | All | Wrap |
Show layout button? | Whether to show a button that lets visitors switch layout themselves. No locks the layout. All options lets visitors pick any layout. Individual values restrict the toggle to a specific layout. | Laptop | All | Row |
Show layout button? | Same as above, for mobile screens. | Phone | All | Fixed swipe |
Show filter button? | Show the filter/search panel toggle button. | Both | WPWooCustom | Yes |
Show mini cart? | Show the floating mini-cart button. | Laptop | Woo | Yes |
Show mini cart? | Same as above, for mobile screens. | Phone | Woo | Yes |
Mini cart shape | Square with all — icon + quantity + total. Square / Round with quantity only — compact variants. Round with all — circular, full info. | Laptop | Woo | Square with all |
Mini cart shape | Same as above, for mobile screens. | Phone | Woo | Square with all |
Mini cart icon | Icon style inside the mini-cart button: Bag, Shopping cart, or Basket. | Both | Woo | Bag |
Login in mini cart | Show a sign-in shortcut inside the mini cart panel — enables remote authentication without leaving the external site. | Both | Woo | Yes |
Mini cart location | Where the floating button is anchored: Left / Top / Right / Bottom — fixed to that viewport edge. HTML element — injected into a CSS selector you specify below. | Laptop | Woo | Right |
Mini cart location | Same as above, for mobile screens. | Phone | Woo | Right |
Mini cart CSS selector | CSS selector of the element that hosts the button when location is «HTML element» (e.g. #site-header-cart). Only shown when «HTML element» is selected. | Laptop | Woo | — |
Mini cart CSS selector | Same as above, for mobile screens. | Phone | Woo | — |
Mini cart margin | Distance from the viewport edge (Left / Top / Right / Bottom anchoring). Accepts any CSS unit: 20vh, 40px… | Laptop | Woo | 20vh |
Mini cart margin | Same as above, for mobile screens. | Phone | Woo | 20vh |
🃏 Cards properties
Content
| Setting | Description | Device | Source | Default |
|---|---|---|---|---|
Direction of the front | Column — image on top, text below. Row — image left, text right. | Laptop | All | Column |
Direction of the front | Same as above, for mobile screens. | Phone | All | Column |
Image adjustment | Cover — crops to fill. Height 100% — scales to full height. Width 100% — scales to full width. | Laptop | All | Cover |
Image adjustment | Same as above, for mobile screens. | Phone | All | Cover |
Image quality | WordPress/WooCommerce image size: Max (large), Medium, or Min (thumbnail). Smaller sizes load faster. | Laptop | WPWoo | Max |
Image quality | Same as above, for mobile screens. | Phone | WPWoo | Max |
Show card flow title? | Show the auto-generated section title above each group of cards (e.g. the category name). | Both | WPRSSCSVXLSX | Yes |
Card flow title | Override the auto-generated flow title with a custom label. Leave empty to use the auto value. | Both | WPRSSCSVXLSX | Auto |
Title over the picture? | Overlay the card title on top of the image instead of below it. | Laptop | All | Yes |
Title over the picture? | Same as above, for mobile screens. | Phone | All | Yes |
Title font size | Font size of the card title. Accepts any CSS unit: px, vw, vh. | Laptop | All | 16px |
Title font size | Same as above, for mobile screens. | Phone | All | 16px |
Show price? | Show the product price on the card front. | Laptop | Woo | Yes |
Show price? | Same as above, for mobile screens. | Phone | Woo | Yes |
Price over the picture? | Overlay the price on top of the image. | Laptop | Woo | No |
Price over the picture? | Same as above, for mobile screens. | Phone | Woo | No |
Alert over the picture? | Show the SALE / discount badge overlaid on the product image. | Laptop | Woo | Yes |
Alert over the picture? | Same as above, for mobile screens. | Phone | Woo | Yes |
Show card abstract? | Show the post excerpt or product short description below the image. | Laptop | WPRSSCSVXLSXWoo | Yes |
Show card abstract? | Same as above, for mobile screens. | Phone | WPRSSCSVXLSXWoo | Yes |
Show to cart button? | Show the Add to Cart button on the card front. | Laptop | Woo | Yes |
Show to cart button? | Same as above, for mobile screens. | Phone | Woo | Yes |
Show rate? | Show the star rating on the card front. | Laptop | Woo | Yes |
Show rate? | Same as above, for mobile screens. | Phone | Woo | Yes |
Show product variations? | Show selectable variations (size, colour…) directly on the card front. | Laptop | Woo | Yes |
Show product variations? | Same as above, for mobile screens. | Phone | Woo | Yes |
Show swipe icon? | Show a small arrow icon hinting the card is swipeable. | Laptop | All | Yes |
Show swipe icon? | Same as above, for mobile screens. | Phone | All | Yes |
Show SALE on card? | Animation style for the sale badge: Spin, Jumper, Marquee, Woo, Woo Jumper, or disabled. | Both | Woo | Spin |
Card content only | Strip the card chrome (border, shadow, background) and render content only. Useful inside a custom layout. | Both | All | No |
Round cart buttons? | Make the +/− quantity buttons circular instead of square. | Both | Woo | Yes |
Dimensions
| Setting | Description | Device | Source | Default |
|---|---|---|---|---|
Card width | Width of each card. Accepts any CSS unit: px, vw, vh. | Laptop | All | 300px |
Card width | Same as above, for mobile screens. | Phone | All | 300px |
Max card width | Maximum card width — prevents stretching on large screens. | Laptop | All | 90vw |
Max card width | Same as above, for mobile screens. | Phone | All | 90vw |
Card height | Height of each card. Accepts any CSS unit. | Laptop | All | 400px |
Card height | Same as above, for mobile screens. | Phone | All | 400px |
Card gap | Spacing between cards. Accepts any CSS unit. | Laptop | All | 10px |
Card gap | Same as above, for mobile screens. | Phone | All | 10px |
Card radius | Corner rounding of the card, in pixels (0–300). | Laptop | All | 5 |
Card radius | Same as above, for mobile screens. | Phone | All | 5 |
Card image percentage | Percentage of the card height occupied by the image (0–100%). | Laptop | All | 60 |
Card image percentage | Same as above, for mobile screens. | Phone | All | 60 |
Card image radius | Corner rounding of the image inside the card, in pixels (0–300). | Laptop | All | 0 |
Card image radius | Same as above, for mobile screens. | Phone | All | 0 |
Cart button size | Relative size of the Add to Cart / quantity buttons, on a scale of 0–10. | Laptop | Woo | 7 |
Cart button size | Same as above, for mobile screens. | Phone | Woo | 10 |
Actions
| Setting | Description | Device | Source | Default |
|---|---|---|---|---|
Card front click/tap action | Flip — reveals the card back. Window 80% / 50% / 100% — opens a modal. Navigate — goes to the post/product URL (same window). Navigate (new window) — same, new tab. Navigate URL — goes to the Target URL or NAV_ column value (same window). Navigate URL (new window) — same, new tab. No action — card is not interactive. | Laptop | All | Window 80% |
Card front click/tap action | Same as above, for mobile screens. | Phone | All | Flip |
Target URL | Destination used when click action is «Navigate URL». For WordPress sources, define a NAV_xxx custom field on each post instead. | Both | RSSCSVXLSX | # |
Show navigate button? | Show an explicit link button on the card so visitors can reach the original source even when the click action is Flip or a modal. | Both | RSSCSVXLSX | Yes |
🎨 Colors
| Setting | Description | Default |
|---|---|---|
Card background color | Background color of the card body (below the image). | #ffffff |
Card text color | Color of the main text content on the card. | #111111 |
Card title background color | Background of the title area when the title is overlaid on the image. | #47bcd4 |
Card title text color | Color of the title text. | #ffffff |
Card button background color | Background color of Add to Cart and action buttons. | #9555af |
Card button text color | Text / icon color of action buttons. | #ffffff |
Mini cart background color | Background of the floating mini-cart button. WooCommerce | #9555af |
Mini cart text color | Text / icon color inside the mini-cart button. WooCommerce | #ffffff |
Comments background color | Background of the comments section on the card back. | #f3f3f3 |
Alert background color | Background of the SALE / discount badge. WooCommerce | #ff0000 |
Alert text color | Text color of the SALE badge. WooCommerce | #ffff00 |
Star good color | Color of filled (positive) stars in the rating display. WooCommerce | #ffd700 |
Star bad color | Color of empty (unfilled) stars. WooCommerce | #bdbdbd |