Swipe Match

About this section

Swipe Match is a Shopify Online Store 2.0 product section that turns a collection into a deck of cards shoppers swipe through. The top card follows the finger or mouse with a spring and a rotation set in the theme editor; past a threshold it flies off, and a Want or Pass stamp appears as it leaves. Heart and cross buttons, the left and right arrow keys and an Undo button do the same, so the deck works without dragging. Each card shows the main or second product image, title, price with compare-at, an optional product type and vendor tag, a star rating from the reviews metafield and a sold-out badge. Every Want lands in a matches tray with thumbnails, a running total and a remove button. Add all to cart sends every available match to cart/add.js in one request, then stays on the page or opens the cart; if that request fails, the tray falls back to a normal form post with the same items. When the deck runs out, an end card offers to start over. Merchants edit every label, the number of cards, the stack position, spacing and colors. On phones the tray docks under the stack, and with reduced motion cards change without the spring. The conversion principle is gamified discovery: a quick yes or no loop helps undecided shoppers decide and gathers several products into one add-to-cart, which raises average order value. One self-contained .liquid file with no external libraries.