1.5 KiB
1.5 KiB
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