The DigiCommerce Products Block displays your digital products in beautiful grid or list layouts with comprehensive customization options. This powerful block fetches products from DigiCommerce and presents them with featured images, pricing, ratings, categories, and call-to-action buttons. Perfect for creating product catalogs and shop pages with our DigiFusion theme and its Pro version‘s site builder feature.
Adding the DigiCommerce Products Block
Navigate to your desired page or post and click the block inserter (+). Search for “Products” in the DigiBlocks DigiCommerce category. The block will automatically fetch your DigiCommerce products and display them with default settings.
Layout Configuration
Product Display Style
Choose between two primary layout styles:
Grid Layout – Displays products in responsive columns with consistent spacing
List Layout – Shows products in a single column with horizontal alignment
Grid Settings
When using grid layout, control the responsive column structure:
Columns – Set different column counts for desktop (1-6), tablet (1-4), and mobile (1-2) devices
Item Spacing – Adjust the gap between product items from 0 to 80 pixels
Card Style Options
Enable card styling to wrap each product in a visual container:
Card Style – Toggle to display products as cards with backgrounds and borders
Card Background – Set background color for product cards
Card Padding – Control internal spacing within each card
Card Border – Configure border style, width, and color
Card Border Radius – Round the corners of product cards
Card Shadow – Add drop shadows with normal and hover states
Content Display Options
Product Elements
Control which product information to display:
Display Featured Image – Show product featured images
Display Title – Include product names as clickable links
Display Price – Show regular and sale pricing
Display Rating – Include star ratings and review counts
Display Categories – Show product category tags
Display Excerpt – Include product descriptions
Display View Product Button – Add call-to-action buttons
Image Configuration
Image Size – Choose from thumbnail, medium, large, or full-size images
Image Border Radius – Round image corners independently from cards
Content Settings
Excerpt Length – Set the number of words to display in product descriptions (5-100 words)
Button Text – Customize the text for view product buttons
Query and Filtering
Product Selection
Products to Show – Display 1-20 products per page
Order By – Sort products by date, title, price, or modified date
Order – Choose ascending or descending order
Category – Filter products by specific DigiCommerce categories
Pagination
Enable Pagination – Add navigation for multiple pages of products
Pagination Alignment – Position pagination left, center, or right
Color Customization
Normal State Colors
Title Color – Set the color for product names
Excerpt Color – Choose text color for product descriptions
Price Color – Define regular price color
Sale Price Color – Set color for discounted prices
Categories Background Color – Background color for category tags
Categories Color – Text color for category labels
Button Background – Background color for action buttons
Button Text – Text color for button labels
Pagination Background – Background color for pagination buttons
Pagination Color – Text color for pagination numbers
Pagination Active Background – Background color for current page
Pagination Active Color – Text color for active pagination
Hover Effects
Title Hover Color – Color change when hovering over product titles
Categories Hover Background Color – Background color change on category hover
Categories Hover Color – Text color change for category hover
Button Background Hover – Background color change on button hover
Button Text Hover – Text color change for button hover
Typography Controls
Title Typography
Font Family – Select from Google Fonts library
Font Size – Responsive sizing with pixel, em, or rem units
Font Weight – Choose from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize options
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with responsive controls
Letter Spacing – Adjust character spacing across devices
Price Typography
Independent typography controls for pricing information with the same options as title typography.
Category Typography
Separate font styling for category tags with responsive typography options.
Excerpt Typography
Dedicated typography controls for product description text.
Button Typography
Custom typography settings for call-to-action buttons.
Spacing and Layout
Element Spacing
Padding – Internal spacing around the entire block
Margin – External spacing around the block
Image Margin – Gap between product images and content
Content Margin – Spacing between content elements within each product
Button Padding – Internal spacing within action buttons
Border and Radius Controls
Image Border Radius – Round product image corners
Button Border Radius – Round action button corners
Card Border Radius – Round product card corners when card style is enabled
Advanced Features
Animation Effects
Add entrance animations to make products appear dynamically as users scroll. Choose from fade, slide, zoom, and bounce effects with preview functionality.
Visibility Controls
Hide the block on specific devices:
Hide on Desktop – Remove from desktop view
Hide on Tablet – Hide on tablet devices
Hide on Mobile – Conceal on mobile screens
Additional Settings
HTML Anchor – Create unique anchors for direct linking to the product section
Additional CSS Classes – Add custom CSS classes for advanced styling
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust layout, typography, spacing, and visual elements independently for each screen size to ensure optimal product display across all devices.
DigiCommerce Integration
The block automatically integrates with your DigiCommerce store settings, including currency symbols and positioning. Products display real-time pricing, categories, and availability status directly from your DigiCommerce catalog.