Interactive Cards

Reusable Magento Page Builder cards with optional carousel, hover overlay and click side-pull behavior.

Page Builder usage

Drag Interactive Cards from the Media section into a CMS Page.
Open its settings and choose desktop/tablet columns, card height, gap and interaction options.
Use Add Card from the component toolbar for every card.
Open each card and maintain its desktop image, optional mobile image, title and detailed description.
Optionally enter a Magento product SKU. Product image, name, price and cart/product action are loaded from the catalog on click.

Product Cards

Use Product Cards when the card should be maintained entirely from Magento catalog data.

Drag Product Cards onto the Page Builder stage.
Set the desktop, tablet and mobile cards-per-row values.
Use Add Product Card for each product.
Enter the product SKU and comma-separated tags.

The storefront automatically loads the product image and name. Explore All links to the product URL for the active store view. 6. Drag a card by its image area to reorder it.

When carousel is disabled, cards wrap into a normal grid. Clicking a card only expands its own row. When carousel is enabled, arrows, dots, autoplay and swipe follow the parent settings, and clicking expands the current visible group only.

Deployment

php bin/magento module:enable Esun_InteractiveCards
php bin/magento setup:upgrade --keep-generated
php bin/magento cache:flush