The DigiCommerce Product Gallery Block displays product images in an interactive gallery format with thumbnail navigation and lightbox functionality. This Pro block automatically integrates with DigiCommerce product data to showcase product images professionally. It works seamlessly with our DigiFusion theme and its Pro version for creating custom single product templates through the Site Builder feature.
Adding the DigiCommerce Product Gallery Block
Navigate to your single product template or product page in the block editor. Click the block inserter (+) and search for “Product Gallery” in the DigiBlocks DigiCommerce category. The block displays placeholder product images in the editor while actual DigiCommerce product gallery images appear on the frontend.
Layout Configuration
Gallery Layout Options
Configure the overall gallery structure through the Layout panel:
Thumbnail Position – Choose where thumbnails appear relative to the main image:
- Bottom – Thumbnails display below the main image in a grid
- Left – Thumbnails appear as a vertical column on the left side
- Right – Thumbnails display as a vertical column on the right side
Thumbnail Columns – Control how many thumbnail columns display when positioned at the bottom. This setting includes responsive controls for different screen sizes.
Enable Lightbox – Toggle lightbox functionality that allows users to view enlarged images in an overlay when clicking the main image.
Image Settings
Size Configuration
Control image dimensions and quality through the Image Settings panel:
Main Image Size – Select the WordPress image size for the primary gallery image:
- Thumbnail – Smallest size, typically 150x150px
- Medium – Medium resolution for faster loading
- Large – High resolution for detailed viewing
- Full – Original uploaded image size
Thumbnail Size – Choose the image size for gallery thumbnails using the same size options as the main image.
Styling Options
Spacing Controls
Manage spacing between gallery elements:
Gallery Spacing – Set the gap between the main image and thumbnail container with responsive controls for desktop, tablet, and mobile devices.
Thumbnail Spacing – Control the spacing between individual thumbnail images with device-specific settings.
Padding – Add internal spacing around the entire gallery block using responsive dimension controls for top, right, bottom, and left sides.
Margin – Set external spacing around the gallery block with responsive controls for precise positioning.
Visual Enhancement
Borders & Radius
Shape the appearance of gallery images:
Main Image Border Radius – Round the corners of the main product image with responsive controls supporting pixel and percentage units.
Thumbnail Border Radius – Apply corner rounding to thumbnail images independently from the main image styling.
Shadow Effects
Add depth and visual interest with customizable shadows:
Main Image Shadow – Apply drop shadows to the main image with separate settings for normal and hover states. Configure horizontal offset, vertical offset, blur radius, spread radius, and shadow color.
Thumbnail Shadow – Create shadows for thumbnail images with independent normal and hover state configurations.
Advanced Features
Animation Effects
Enhance user engagement with entrance animations:
Animation Effect – Choose from various animation options including fade, slide, zoom, and bounce effects that trigger when the gallery enters the viewport.
Preview Animation – Test animation effects directly in the editor using the preview button to see how animations will appear to visitors.
Responsive Visibility
Control gallery display across different devices:
Hide on Desktop – Prevent the gallery from displaying on desktop screens while remaining visible on smaller devices.
Hide on Tablet – Hide the gallery specifically on tablet devices while showing on desktop and mobile.
Hide on Mobile – Remove gallery visibility on mobile devices while maintaining display on larger screens.
Additional Settings
Customize advanced block properties:
HTML Anchor – Create a unique identifier for direct linking to the gallery section. Enter a word without spaces to generate a custom URL fragment.
Additional CSS Classes – Add custom CSS classes for advanced styling through your theme or custom CSS. Separate multiple classes with spaces.
Interactive Features
Lightbox Functionality
When lightbox mode is enabled, users can click the main image to view it in an enlarged overlay. A zoom icon appears on hover to indicate the lightbox functionality is available.
Thumbnail Navigation
Thumbnails provide quick navigation between product images. The active thumbnail displays with enhanced opacity and scale effects, while inactive thumbnails appear with reduced opacity until hovered.
Responsive Behavior
The gallery automatically adapts to different screen sizes:
- Desktop: Full layout with customizable thumbnail positioning
- Tablet: Adjusted spacing and thumbnail sizes for optimal viewing
- Mobile: Forces thumbnails to bottom position regardless of desktop setting for better touch navigation
Integration with DigiCommerce
This block seamlessly integrates with DigiCommerce product data, automatically displaying:
- Product gallery images uploaded to DigiCommerce products
- Proper image alt text for accessibility
- Optimized image sizes based on your configuration
- Dynamic thumbnail generation from product images
The gallery respects DigiCommerce image settings and provides enhanced display options beyond the default product gallery functionality.