Neon Shoppable Reels

Description

Neon Shoppable Reels lets you add an Instagram/TikTok-style shoppable video reels carousel anywhere on your WordPress site. Upload a video (or paste a direct .mp4 link) for each reel, attach a Buy Now link, and display them with a shortcode. Clicking a reel opens a fullscreen, swipeable (mobile) / arrow-navigable (desktop) viewer.

Features:

• Custom “Reel” content type managed from its own admin menu — no theme editing required.
• Two ways to add video: WordPress Media Library upload, or a direct external .mp4 link.
• Per-reel Buy Now link, shown in the fullscreen viewer.
• [neon_reels] shortcode shows every reel in one scrollable carousel.
• [neon_reel id="123"] shortcode shows a single specific reel.
• Global Settings: reels per view for Desktop / Tablet / Mobile, border width/radius/colour, padding, margin, and gap.
• Global Theme Settings: Buy Now button text/colours/radius, and icon button colours (normal + hover).

Usage

1. Neon Reel > All Reels — Add a reel: give it a Title, select/upload a Video (or paste a Custom Video Link), paste the product’s Buy Now link, set an Order number, then Save.
2. Each saved reel gets its own individual shortcode, e.g. [neon_reel id="12"] — shows just that one reel.
3. Use [neon_reels] anywhere (post, page, widget, or template via do_shortcode) to show the full scrollable carousel of all reels in Order.
4. Neon Reel > Settings — controls layout: how many reels show per row on Desktop / Tablet / Mobile, border width/radius/colour, padding, margin, and gap between reels. Applies globally to every shortcode on the site.
5. Neon Reel > Theme Settings — controls the look of the “Buy Now” button (text, colours, border radius) and the icon buttons (sound / close / arrows) in the fullscreen viewer, including hover colours. Applies globally.

Notes

• Clicking any reel opens a fullscreen, swipeable (mobile) / arrow-navigable (desktop) viewer, same as a familiar “Reels” experience.
• The individual reel shortcode shows just that reel and hides the navigation controls in fullscreen view since there’s nothing else to browse to.
• Each reel’s own Buy Now link is used when that reel is open in the viewer.