Vitrin Touch

Vitrin Touch lets you build beautiful, mobile-first swipeable sliders — just like the carousel on Amazon’s mobile homepage — using an intuitive, tile-based editor with real-time previews.

Each slide can have a color, image, or short video background, custom title & subtitle (with fonts, sizes, colors, shadows and 9 RTL-aware positions), up to four WooCommerce product thumbnails with automatic discount badges, and a clickable link for the whole slide.

The front-end uses pure CSS scroll-snap (no heavy JavaScript libraries), so it’s fast, smooth, and dependency-free. Assets load only on pages where a slider actually appears.

Quick Demo

Key Features

• Tile-based builder — click a dashed “+” tile to add slides; drag to reorder.
• Live previews — see each slide update in real time, plus a full Mobile Preview with real swipe and “next-slide peek”.
• Backgrounds — solid color, image, or looping muted MP4 video (with a small play/pause button on the front end).
• Text styling — title & subtitle with per-slide font (Google Fonts or locally uploaded), size, color, optional shadow, and a 9-point position grid.
• RTL-aware — logical positioning that works correctly in both LTR and RTL sites.
• WooCommerce — attach up to 4 products per slide, shown as thumbnails with automatic discount badges. Product thumbnails link to their product pages; the rest of the slide uses the slide link.
• Slider settings — aspect ratio (portrait presets), gap, next-slide peek, corner radius, max width on desktop, product thumbnail size, pagination dots, autoplay (with speed), and infinite loop.
• Fonts — curated Google Fonts (including Persian families like Vazirmatn & Estedad) or self-hosted fonts via the WordPress Font Library.
• Performance — conditional asset loading, no external JS dependency, and automatic cache purging for popular caching plugins.
• Translation-ready — full .pot included; all strings are translatable and RTL-ready. Compatible with Polylang / WPML.
• Developer-friendly — clean, namespaced, PSR-4-style architecture with plenty of hooks and filters, ready for a Pro add-on.

Usage

1. Go to Vitrin Touch → Add New Slider.
2. Click the dashed “+” tile to create a slide.
3. Set the background, text, fonts, products and link.
4. Use Mobile Preview to test swipe & peek.
5. Adjust global options under Slider Settings.
6. Publish, then copy the shortcode from the sidebar box.

7. Paste the shortcode into any page or post:

   [vitrin_touch id=”123″]

Replace 123 with your slider’s ID (also shown in the sliders list table).