Product Table Block

The Product Table block displays products from an order in a formatted table with columns for item name, quantity, price, and total. This provides a clean, professional way to display order information.

Adding a Product Table Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Product Table” or find it in the “E-Commerce” category
3. Click to insert the block

Note: The Product Table block works with Product Query context and automatically displays all products from the current order.

Table Columns

The table includes four columns by default:

1. Item: Product name/title
2. Qty: Quantity ordered
3. Price: Unit price per item
4. Total: Line total (quantity × price)

Column Customization

Column Labels

Customize the column header labels:

• Item Label: Default “Item” (e.g., “Product”, “Description”)
• Qty Label: Default “Qty” (e.g., “Quantity”, “Amount”)
• Price Label: Default “Price” (e.g., “Unit Price”, “Each”)
• Total Label: Default “Total” (e.g., “Line Total”, “Subtotal”)

Column Alignment

Set text alignment for each column:

• Item Column: Left (default) – Product names align left
• Qty Column: Center (default) – Quantities center-aligned
• Price Column: Right (default) – Prices right-aligned
• Total Column: Right (default) – Totals right-aligned

Color Customization

Heading Colors

• Heading Text Color: Color of column header text
• Custom Heading Text Color: Custom color value
• Heading Background Color: Background color of header row
• Custom Heading Background Color: Custom background color
• Heading Border Color: Border color for header row
• Custom Heading Border Color: Custom border color

Row Colors

• Odd Row Text Color: Text color for odd-numbered rows
• Custom Odd Row Text Color: Custom text color
• Even Row Text Color: Text color for even-numbered rows
• Custom Even Row Text Color: Custom text color
• Odd Row Background Color: Background color for odd rows
• Custom Odd Row Background Color: Custom background color
• Even Row Background Color: Background color for even rows
• Custom Even Row Background Color: Custom background color
• Row Border Color: Border color for data rows
• Custom Row Border Color: Custom border color

Use Case: Alternating row colors improve readability in product tables.

Styling Options

Typography

• Font Size: Control the size of table text
• Font Family: Choose a font family
• Font Weight: Make text bold or regular
• Font Style: Apply italic styling
• Line Height: Control vertical spacing
• Letter Spacing: Adjust spacing between characters
• Text Transform: Uppercase, lowercase, or capitalize
• Text Decoration: Add underline or other decorations

Spacing

• Padding: Add internal spacing around the table

Borders

• Border Color: Choose a border color
• Border Radius: Round the table corners
• Border Style: Solid, dashed, dotted, etc.
• Border Width: Set border thickness

Best Practices

1. Color Contrast: Ensure sufficient contrast between text and background colors
2. Alternating Rows: Use alternating row colors for better readability
3. Clear Headers: Make column headers stand out with distinct styling
4. Consistent Alignment: Use appropriate alignment for each column type
5. Mobile-Friendly: Test how tables appear on mobile devices (may stack or scroll)
6. Professional Appearance: Style tables to match your brand and email design

Examples

Example 1: Simple Product Table

Settings:

• Heading Background: Light gray (#f5f5f5)
• Heading Text: Dark gray (#333333)
• Row Background: White
• Alternating Rows: Light gray (#fafafa) for even rows
• Border: 1px solid #e0e0e0

Example 2: Branded Product Table

Settings:

• Heading Background: Brand primary color
• Heading Text: White
• Row Background: White
• Alternating Rows: Light brand color tint
• Border: 2px solid brand color

Troubleshooting

Table Not Displaying

• Verify that products are available from the form entry
• Check that the Product Query context is properly set
• Ensure the Gravity Forms integration is configured
• Verify dynamic data is enabled with a form entry selected

Products Missing

• Check that the form entry contains products
• Verify products are properly configured in Gravity Forms
• Ensure product data is available in the entry

Styling Not Applying

• Some email clients have limited table styling support
• Test in multiple email clients
• Use inline styles when possible
• Avoid complex CSS that may not render

Mobile Display Issues

• Tables may stack or scroll on mobile devices
• Test on actual mobile devices
• Consider using simpler layouts for mobile
• Some email clients may render tables differently

Column Alignment Issues

• Verify alignment settings are correct
• Test in multiple email clients
• Some clients may not support all alignment options
• Use standard alignments (left, center, right) for best compatibility