GoDAM Woo Shoppable Video

GoDAM’s Woo Shoppable Video is a built-in feature of its WooCommerce integration that lets you showcase product videos in a carousel or grid layout.

Quick Start Guide

1. Insert Gallery Block: In the Gutenberg editor, add the “GoDAM Woo Shoppable Video” block from the Media category.
2. Choose Layout & Ratio: Select between Grid or Carousel layouts and configure the video card view ratio (1:1, 16:9, etc.).
3. Customize Display: Adjust autoplay, item size, arrows, play button, and add to cart button.
4. Publish and Preview: Save your settings and publish the page—your interactive, shoppable video gallery is now live!

Using as Gutenberg Block

The Gutenberg block provides a visual, user-friendly way to create video galleries directly in the WordPress block editor. It offers real-time preview and intuitive controls.

Adding the Block

1. Open any post/page in Gutenberg editor.
2. In the block editor, click “+” to add a new block.
3. Search for or select “GoDAM Woo Shoppable Video” in the Media category.
4. The block will preview the Woo Shoppable Video instantly if WooCommerce is active; if not, a plugin activation notice appears.

Block Settings Panel

The block settings appear in the right panel upon block selection. These are grouped into categories for ease of use:

• Layout – Choose how gallery items are displayed: carousel slider or grid layout.
• View Ratio – Set the aspect ratio for gallery items to control their shape and viewing format.
• Item Size – Adjust the size of each gallery item for a more compact or spacious layout.
• Performance – Control how videos are loaded and optimized for smoother playback and better page performance.
• Autoplay – Automatically plays videos when they become visible or hovered, depending on the selected behavior.
• Show Play Button – Displays an overlay play button when the video is paused or not playing.
• Show Add to Cart Button – Displays an Add to Cart button directly on each product item.

Real-Time Preview

As you adjust settings, the block preview updates immediately with the skeleton of the output, showing placeholder videos that reflect your chosen layout, view-ratio settings and others.

Layouts

Effortlessly switch between various layouts for sitewide visual consistency. 

Grid Layout

The grid layout displays videos in a responsive grid system, perfect for showcasing multiple videos at once.

 Features:

• Responsive Design: Automatically adjusts to screen size

• Flexible Columns: Choose 1-6 columns based on your content needs
• Customizable Layout Controls: Fine-tune row and column gaps (0–64 px), adjust video card size (12.5–70.5 rem), and set card alignment (left, center, or right) to achieve your desired presentation style.
• Clean Presentation: Uniform video thumbnails with consistent spacing

Best For:

• Showcasing many products at once—ideal for stores or collections with extensive product video catalogs, allowing users to browse options in a single view without extra clicks.
• Large collections of related products—videos suits product listings, catalog pages, or blog previews where a neat and uniform layout is required.

• Efficient scanning and comparison—makes it easy for users to visually compare product videos side by side, supporting quick discovery.
• Homepage random product grid galleries

Alignment Recommendations:

• Optimal alignments like ‘None’, ‘Wide Width’, ‘Full Width’ and so on provided by WordPress Gutenberg work seamlessly with the Grid layout, allowing flexibility based on your specific use case.

Carousel Layout

The carousel layout presents videos in a horizontal slider, ideal for highlighting featured content while guiding users through selections one at a time.

Features:

• Horizontal Slider: Scroll through videos smoothly in a side-by-side format.
• Featured Focus: Videos are prominently displayed with visible product titles.
• Mobile Friendly: Optimized for easy viewing and navigation on all devices.
• Interactive Navigation: Use arrows and autoplay to browse through videos seamlessly.
• Space Efficient: Keeps your layout clean by showing multiple videos within a compact carousel.

Best For:

• Highlighting featured or promotional content—directs attention to select product videos in a sequential, high-impact format.
• Navigated collection of related products/product reviews on single product pages/homepage.
• Guided storytelling or visual journeys—ideal when you want users to advance through curated video content using navigation arrows or autoplay.
• Engaging users with interactive navigation—encourages exploration without overwhelming the page, making it suitable for portfolios or event highlights.

Alignment Recommendations:

• Optimal alignments like ‘None’, ‘Wide Width’, ‘Full Width’ and so on provided by WordPress Gutenberg work seamlessly with the Carousel layout, allowing flexibility based on your specific use case.

View Ratios

Select different aspect ratios for video cards, ensuring your videos display in the most effective format for your content and audience.

Standard

A classic video format that offers slightly more height than widescreen. The Aspect Ratio here is 4:3.

Best For:

• Older video archives shot in standard definition.
• Tutorials or product demos where vertical space is important.
• Balanced desktop and mobile viewing without looking too stretched.

Portrait

Slightly less tall than Reels/TikTok view ratio, offering a comfortable portrait format. The Aspect Ratio here is 3:4.

Best For:

• Fashion, product photography, or vertical close-ups.
• Content where you want to focus on the vertical subject but still maintain some width.

Square

Equal height and width for a perfectly balanced frame. The Aspect Ratio here is 1:1.

Best For:

• Social feeds (Instagram grid posts, Facebook timeline).
• Product thumbnails and category pages.
• Maintaining uniformity across mixed content types.

Widescreen

Modern widescreen format widely used for HD and cinematic videos. The Aspect Ratio here is 16:9.

Best For:

• YouTube videos, webinars, or promotional trailers.
• Landscape shots, product tours, or cinematic storytelling.
• Desktop-focused displays and large screens.

Reels/TikTok

Tall, vertical aspect ratio optimized for mobile-first platforms. The Aspect Ratio here is 9:16.

Best For:

• Social media content (Instagram Reels, TikTok, YouTube Shorts).
• Showcasing products in a mobile-optimized vertical frame.
• Story-style videos where height is key.

Interactive Features

Video Modal Player

When visitors click on any video a professional modal window opens with:

• Full-Screen Video Player: Optimized for the best viewing experience
• Integrated Product Info: Shows product details in a desktop sidebar or mobile floating tile 
• Smooth Controls: Professional playback controls and options

• Easy Closing: Click outside the video or use the close button
• Scroll/Swipe Navigation: On desktop, use the sideways navigation to play the next one. On mobile, swipe up or down to navigate videos, just like Instagram Reels or TikTok.

Shoppable CTA

The Shoppable CTA feature turns your videos into interactive storefronts, letting viewers browse and buy products without leaving the playback. It creates a seamless, immersive shopping experience that drives engagement and conversions while keeping the viewing flow uninterrupted.

• Instant Shopping Actions: Add products to the cart without leaving the video, with options to open the WooCommerce mini cart or redirect to the cart page after adding.

Shoppable CTA Sidebar & Floating Tile

Sidebar: 

When CTA is enabled, on desktop product details—including name, price, and an Add to Cart button—are displayed in a fixed sidebar alongside the video for easy access.

Floating Tile: 

On mobile devices, product details appear in a floating popup tile to maintain a clean viewing experience while keeping shopping options within reach.

Customization Options

Theme Integration

The gallery automatically adapts to your WordPress theme’s styling:

• Color Schemes: Inherits your theme’s color palette
• Typography: Matches your theme’s font choices
• Spacing: Consistent with your theme’s layout patterns
• Responsive Breakpoints: Aligns with your theme’s mobile responsiveness

Custom CSS Classes and Variables

Each gallery element includes CSS classes and variables for easy customization:

• Target specific layouts, columns, or video items
• Override default styling to match your brand
• Add custom animations or hover effects
• Integrate with your existing design system

Troubleshooting – Common Issues and Solutions

“No videos found” Message

Possible Causes:

• No videos have been uploaded to your media library
• Videos haven’t been transcoded through the GoDAM system
• Filter settings are too restrictive

Solutions:

• Check your WordPress media library for video files
• Adjust or remove filter settings temporarily
• Check if your videos are being transcoded by GoDAM in the media library on upload.

Videos Not Loading Properly

Possible Causes:

• Slow internet connection
• Server performance issues
• Too many videos loading at once
• JavaScript conflicts with other plugins

Solutions:

• Reduce the number of videos displayed initially
• Disable other plugins temporarily to test for conflicts
• Contact your hosting provider about server performance
• Try using the Load More button instead of infinite scroll

Gallery Layout Problems

Possible Causes:

• Theme CSS conflicts
• Browser compatibility issues
• Mobile responsive problems
• Custom CSS overrides

Solutions:

• Test with a default WordPress theme
• Clear browser cache and cookies
• Check gallery appearance on different devices
• Review any custom CSS modifications