# DF Swipe Gallery: swipe product navigation

> Overview DF Swipe Gallery turns your PrestaShop category pages into a fullscreen Tinder-style card deck. Visitors discover products one at a time: swipe right to like (wishlist), swipe left to…

- Page: <https://www.datafirefly.com/en/documentation/dfswipegallery/>
- Language: en
- Last updated: 2026-10-13
- Other languages: [fr](https://www.datafirefly.com/documentation/dfswipegallery/index.md), [es](https://www.datafirefly.com/es/documentation/dfswipegallery/index.md), [de](https://www.datafirefly.com/de/documentation/dfswipegallery/index.md), [it](https://www.datafirefly.com/it/documentation/dfswipegallery/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfswipegallery/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfswipegallery/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfswipegallery/index.md)
- Index: <https://www.datafirefly.com/en/documentation/llms.txt>

## Overview

DF Swipe Gallery turns your PrestaShop category pages into a fullscreen Tinder-style card deck. Visitors discover products one at a time: swipe right to like (wishlist), swipe left to skip, swipe up to add to cart. A stories-style progress bar shows position within the deck and a final screen sums up the session's favorites. Every interaction feeds a dashboard in the back office.

The module runs with zero dependencies: no Composer, no jQuery, no external service. Compatible with PrestaShop 8.0 to 9.x, multistore, translated into 8 languages (FR, EN, ES, DE, IT, NL, PL, PT).

## Installation

1. In your back office, open **Modules > Module Manager > Upload a module**.
2. Upload `dfswipegallery.zip` and click **Install**.
3. The module creates its two tables (`df_swipegallery_like` and `df_swipegallery_stat`), registers its hooks and adds the **Catalog > Swipe Gallery** tab.

No theme modification is needed: the launcher button and the overlay are injected through the `displayFooterAfter` hook, independently from your template.

### Upgrading from 1.0.0

Upload the 1.1.0 ZIP over the existing module. The upgrade script adds the product page opens column, registers the new hooks, creates the new settings with their default values and keeps your likes and statistics. Then clear the PrestaShop cache.

Since 1.1.0, the "Cards seen" counter only counts cards that actually reached the top of the stack (in 1.0.0, every loaded card was counted). Rates computed on new data are therefore more reliable; resetting the statistics after the upgrade is recommended.

## Configuration

Open **Modules > DF Swipe Gallery > Configure**. Available options:

- **Enable swipe gallery**: turns the module on or off globally.
- **Mobile devices only**: restricts the floating button to screens under 992px (enabled by default). Disable it to offer the deck on desktop too.
- **Maximum products per deck**: from 5 to 100 (default 30).
- **Deck order**: category position, random (recommended for discovery) or newest first.
- **Swipe up adds to cart**: enables the super-like.
- **Let visitors choose the combination**: for products with combinations, swiping up opens a panel to pick size, color, etc. before adding to cart. When disabled, the default combination is added directly (new in 1.2.0, enabled by default).
- **Hide already liked products**: excludes products the visitor already liked from new decks.
- **Hide products out of stock**: leaves out products that cannot be ordered for lack of stock (new in 1.1.0).
- **Show price on cards**: shows the price, with the original price struck through when a discount applies. Automatically hidden in catalog mode.
- **Launcher button position**: bottom right, bottom left or bottom center.
- **Accent color**: color of the launcher button and the Start over button (new in 1.1.0). The text color adapts automatically to stay readable.

For a striking demo, pick the **random** order, keep swipe up enabled and turn on **Hide products out of stock**: every card can then end up in the cart.

## Storefront usage

On any category page, a floating "Swipe mode" button appears. On tap, the deck opens fullscreen:

- **Swipe right** (or heart button): the product is liked and saved to the wishlist.
- **Swipe left** (or cross button): skips to the next product.
- **Swipe up** (or cart button): adds the product to the cart; for a product with combinations, a panel first opens to choose the combination. The button is greyed out on unavailable products.
- **"View product"**: opens the product page.

A short but fast gesture (flick) is enough to commit a swipe. Cards show "Already liked" and "Unavailable" chips when relevant. On desktop, keyboard arrows mirror the gestures (right: like, left: skip, up: cart) and Escape closes the deck. On mobile, the phone's back button closes the deck instead of leaving the page.

At the end of the deck, a summary screen lists the liked products with their price and a link to each page. The **Start over** button loads a new deck without closing the overlay.

Accessibility: focus moves into the deck when it opens and returns to the button when it closes, tabbing stays inside the deck, the current product is announced to screen readers, and animations are switched off when the visitor has `prefers-reduced-motion` enabled.

## Wishlist, customers and guests

Every like is saved in the module's table, whether it comes from a logged-in customer or a guest visitor (attached to their PrestaShop visitor ID). A unique key prevents duplicates, including when the same customer uses several devices.

If the official **blockwishlist** module is installed and the customer is logged in, the product is added to their default wishlist, created automatically when needed, with its default combination. No configuration is required.

Since 1.1.0, when a guest logs in or creates an account, their likes are moved automatically to the customer account, then added to their blockwishlist wishlist. The `actionAuthentication` and `actionCustomerAccountAdd` hooks handle this; an error at this step never blocks the login.

## Swipe-up add to cart

Swiping up adds the product server-side with the same rules as the native button: combination chosen by the visitor (or the default combination when the panel is disabled), minimal quantity respected, stock and access rights checked. The cart is created when needed and kept in the visitor's session.

The theme's cart badge is then refreshed through the standard `prestashop.emit('updateCart')` event, without opening the theme's "product added" window. A message confirms the add; when the product cannot be added, the visitor sees why.

### Choosing the combination

For a product with combinations, swiping up, the cart button or the up arrow opens a panel at the bottom of the screen. Colors are shown as swatches (or with their texture when one is set in **Catalog > Attributes**), other attributes as buttons, and a long dropdown-type list stays a dropdown. The default combination is preselected.

With each choice, the panel updates the image, the price (struck through during a discount) and the stock of the combination. An out-of-stock value is dimmed; a value that does not exist with the other choices is struck through, and selecting it switches to the closest existing combination, preferring one in stock. The add button stays disabled until the combination can be ordered.

Escape, the cross or the phone's back button close the panel without leaving the deck. Data is loaded on first opening and kept in memory for the session. Server-side, the received combination is checked (it must belong to the product and be sold in the shop) and stock is verified, including what is already in the cart.

Liking (swipe right) stays instant: the product goes to the wishlist with its default combination, so the swipe rhythm is not broken.

## Back-office statistics

The **Catalog > Swipe Gallery** tab shows:

- Counters: cards seen, likes, skips, cart adds, product page opens.
- The **like rate** (likes / (likes + skips)), the add to cart rate and the product page open rate per card seen.
- The **top 20 liked products**, linked to their back-office product page.
- The **most skipped products** (at least 5 swipes), sorted by skip rate: good candidates for a better main photo or a revised price.
- A **CSV export** of all statistics and a per-shop **reset** button (visitor likes are kept).

Statistics for a deleted product are purged automatically. No data is sent to any third-party service.

## GDPR

The module registers with the official **psgdpr** module: likes linked to a customer account appear in the personal data export and are deleted on an erasure request. They are also erased when a customer is deleted from the back office. Statistics are aggregated per product and hold no personal data.

## Multistore and translations

Likes and statistics are recorded per shop. The module ships translated into 8 languages (English as source language, plus FR, ES, DE, IT, NL, PL, PT). To adjust a label, use **International > Translations > Installed modules translations**.

## Troubleshooting

- **The button does not appear**: check the module is enabled, that you are on a category page and that "Mobile devices only" is off if you are testing on desktop.
- **The deck is empty**: the category has no active visible product, the category is not accessible to the visitor's group, or every product is excluded by "Hide already liked products" or "Hide products out of stock".
- **The cart badge does not refresh**: your theme may not listen to the `updateCart` event; the product is in the cart, adapt the theme listener or contact support.
- **A theme element sits above the deck**: the overlay uses a z-index of 100000; raise it via CSS if a cookie banner or chat widget covers it.
- **The old behavior persists after the upgrade**: clear the PrestaShop and browser caches; the upgrade script also resets OPcache when available.

## Changelog

- **1.2.0** (2026-10-13): combination choice before adding to cart (color swatches, sizes, price, image and stock per combination, non-existent combinations struck through with automatic switch to the closest one); "Let visitors choose the combination" option; precise message when a combination is out of stock; display independent from the theme's box-sizing.
- **1.1.0** (2026-10-13): cart created by a swipe up is now kept; default combination in the cart and wishlist; no more "product added" window behind the deck; guest likes moved automatically to the customer account; reliable statistics (cards actually seen, product page opens, most skipped products, CSV export, reset); "Hide products out of stock" and "Accent color" options; strikethrough price; mobile back button, flick gesture, focus management; GDPR through psgdpr; translations in 8 languages.
- **1.0.0** (2026-07-16): initial release. Fullscreen swipe deck, swipe-right wishlist with blockwishlist bridge, swipe-up add to cart, guest support, dashboard, stories progress bar, PrestaShop 8 and 9 compatibility, multistore.