Actions and cards
What happens when a visitor clicks a shape, and how to build product cards with live prices, variants and add-to-cart.
Every shape has an action (what a click does) and an optional card (the pop-up shown on hover or tap). Both are set in the shape inspector in the Builder tab.
Actions
Open the Action panel and choose On click:
| Option | What happens |
|---|---|
| — none — | Nothing; useful for shapes that only show a card. |
| Link (URL) | Opens the address in URL / code. Tick Open in a new tab if needed. |
| Product | Opens the product page. Search by name or ID. |
| Category | Opens the category page. |
| CMS page | Opens the CMS page. |
| JavaScript | Runs the code in URL / code. For developers. |
Product, category and CMS links always open the page in the visitor's language — a click on a French page opens the French product page.
Fill the card from the catalogue
For a product or category, two helpers appear under the picker:
- Load product data into card fills the card title and text with the product's name and short description, in every language at once.
- Sync card title with the product name (or category name) keeps the title equal to the live catalogue name in the visitor's language. Rename or translate the product and every map follows. Turn it off to write your own title per language.
Cards
Open the Card panel and switch on Tooltip card.
| Field | Notes |
|---|---|
| Card title | Per language. Clickable when the shape links a product, category or CMS page. |
| Body | Per language. HTML is allowed. |
| Button text / Button link | An optional call-to-action button. |
| Button action | Add product to cart instead of opening the link, with the product ID — the button adds to the cart without leaving the page. |
| Tooltip position | Auto (global setting), above, below, left or right. |
| Product picture | Auto (global setting), always show or never show — see below. |
| Show delay / Hide delay | In milliseconds; default 0 and 50. |
| Per-shape tooltip style | Background, text colour and corner radius for this card only. |
Cards use PrestaShop's own cart, so your theme's cart counter and confirmation pop-up update as usual.
Live prices, sale badges and stock
A card that links a product shows the live price in the visitor's currency, with tax and specific prices applied. When the product is on sale, the old price is struck through and a sale badge appears. The badge can show the discount (-20%), your own text, or nothing; its style, colours and placement — on the card, in the product list, on the shape itself — are set in Styles → Card (Tooltip) Style → Sale badge & old price.
Badges and hotspot dots keep a readable size even when the map is shown small, for example in a narrow category column.
Product picture in the card
A card that links a product or category can show the product's cover image (or the category picture) next to the text, read live from your catalogue.
- Turn on Styles → Card (Tooltip) Style → Show product / category picture in the card. It is off by default.
- Choose the size (small 48 px, medium 72 px, large 96 px or custom), corner radius and position: left, right, above or below the text.
- To override one shape, set Card → Product picture to Always show or Never show.
The picture links to the same page as the title. Links to CMS pages or URLs, and categories without a picture, simply show no image.
Several products in one card
The Multi-product showcase field turns a card into a small shop: search and pick several products (they appear as removable chips). The card then lists each product with its thumbnail, live name, price and stock, an Add to cart button per product and one Add all to cart button for the whole set.
- Disabled products, and out-of-stock products that cannot be ordered, are hidden automatically.
- Add all to cart adds the products one after another and shows a single cart confirmation.
Variants
When a product has combinations, its card shows the attributes and a quantity field. Colours appear as swatches (the colour or texture image), other attributes as drop-downs. The price and stock badge update as the visitor chooses, and the exact combination and quantity go to the cart — the cart confirmation shows the chosen variant.
Long cards
A card never runs off the picture: a tall card scrolls inside itself. Card max height limits it further (0 = as tall as the image allows), and Scrollbar style sets how scrollbars look across the map: thin in your colour, hidden, or the browser default.
Still stuck?
Customers get support through the PrestaShop Addons contact form, so every request is tracked.
Missing a feature or have an idea? Tell us what you need
Last updated October 8, 2026