Adding Your First Blocks

Learn how to add Commerce Connect blocks to your WordPress® pages to create a functional storefront.

Prerequisites

Before adding blocks, ensure you’ve completed:

• Commerce Connect plugin installed and activated
• BigCommerce store connected
• Initial product sync completed

If you haven’t completed these steps, see Installation and Verification & Testing first.

Understanding Commerce Connect Blocks

Commerce Connect provides 37 blocks organized into categories:

• Product Display Blocks (7) - Show individual product information
• Product Collections Blocks (9) - Display product grids, filters, search
• Reviews Blocks (6) - Product reviews and ratings
• Account Blocks (7) - Customer login, registration, account management
• Category Blocks (5) - Category navigation and display
• Utility Blocks (3) - Cart icon, related products, search tabs

See Blocks Overview for complete catalog.

Quick Example: Adding a Product Grid

Let’s add a product grid to your shop page.

Step 1: Open the Site Editor

1. Navigate to Appearance → Editor in WordPress® admin
2. This opens the Full Site Editor (FSE)
3. Click Pages from the sidebar
4. Select your Shop page (or create a new page)

Step 2: Add the Products Grid Block

1. Click the + (block inserter) button in the editor
2. Search for “Products Grid”
3. Click Products Grid to insert the block
4. The block appears with placeholder content

Step 3: Configure the Block

1. With the block selected, open the Settings panel (right sidebar)

2. Adjust block settings:

   • Columns (Desktop): 3
   • Columns (Tablet): 2
   • Columns (Mobile): 1
   • Products Per Page: 12
   • Pagination Type: Numbered

3. Scroll down to Product Card Settings:

   • Check Show Image ✓
   • Check Show Title ✓
   • Check Show Price ✓
   • Check Show Rating ✓
   • Uncheck Show Add to Cart (optional)

Step 4: Preview and Publish

1. Click Preview button to see how it looks on frontend
2. Products from BigCommerce should display in the grid
3. If satisfied, click Save to publish changes

Tip

Products won’t appear until you’ve completed the initial product sync from BigCommerce. Check sync status at Settings → Commerce Connect → Products.

Common Block Combinations

Shop Page Layout

A typical shop page uses these blocks together:

1. Products Search Box - Header area for product search
2. Products Count - Above grid (“Showing 1-12 of 48 products”)
3. Products Sort Control - Above grid (sort by price, name, etc.)
4. Products Filters - Left sidebar (category, price, attribute filters)
5. Products Grid - Main content area
6. Products Filter Selections - Above grid (active filter chips)

How to build this:

1. Create two-column layout (sidebar + main)
2. Left Column:
   • Add Products Filters block
   • Configure filter controls (category, price, brand)
3. Right Column:
   • Add Products Search Box at top
   • Add Products Count below search
   • Add Products Sort Control (right-aligned)
   • Add Products Filter Selections
   • Add Products Grid
4. Configure grid: 3 columns, 12 per page, numbered pagination

Single Product Page Layout

A typical product detail page includes:

1. Product Images - Left column (gallery)
2. Product Title - Right column, top
3. Product Rating - Below title
4. Product Pricing - Below rating
5. Product Description - Below pricing
6. Product Buy Button - Below description
7. Product Reviews - Full width, below two columns
8. Related Products - Full width, bottom

How to build this:

1. Create two-column layout (images + info)
2. Left Column:
   • Add Product Images block
   • Set aspect ratio: Square
   • Enable lightbox
3. Right Column:
   • Add Product Title (H1 heading)
   • Add Product Rating
   • Add Product Pricing
   • Add Product Description
   • Add Product Buy Button
4. Below Columns:
   • Add Product Reviews block (auto-includes child blocks)
   • Add Related Products block

Account Dashboard Layout

A typical account dashboard includes:

1. Account Menu - Left sidebar (navigation)
2. Account - Main area (parent container)
   • Account Details (child block)
   • Account Addresses (child block)
   • Orders (child block)

How to build this:

1. Create two-column layout (sidebar + main)
2. Left Column:
   • Add Account Menu block
   • Configure menu items (Orders, Addresses, Profile, Logout)
3. Right Column:
   • Add Account block (parent)
   • Child blocks auto-appear inside Account parent:
     • Account Details (profile info)
     • Account Addresses (address book)
     • Orders (order history)

Block Inserter Tips

Finding Blocks Quickly

1. Click + (block inserter)
2. Type search term:
   • “product” - Shows all product-related blocks
   • “account” - Shows customer account blocks
   • “cart” - Shows cart and checkout blocks
   • “commerce” - Shows ALL Commerce Connect blocks

Browse by Category

1. Click + (block inserter)
2. Scroll down to Commerce Connect category
3. All 37 blocks listed in one place
4. Organized by: Product Display, Product Collections, Reviews, Account, etc.

Recently Used Blocks

The block inserter shows recently used blocks at the top for quick access. After using Products Grid once, it appears in your recent blocks list.

Block Settings Panel

Every Commerce Connect block has a Settings panel with configuration options.

Accessing Settings

1. Select a block in the editor (click to highlight)
2. Settings panel appears on the right sidebar
3. Two tabs:
   • Settings - Block functionality and content
   • Styles - Visual styling (colors, spacing, borders)

Common Settings

Most blocks include these settings:

• Alignment - Left, center, right, full width
• Spacing - Padding (internal) and margin (external)
• Colors - Background, text, border colors
• Typography - Font size, weight, line height
• Advanced - Custom CSS classes, HTML attributes

Block-Specific Settings

Each block has unique settings:

• Products Grid: Columns, products per page, pagination type
• Product Images: Layout, aspect ratio, lightbox enable/disable
• Product Reviews: Sort order, reviews per page, form position
• Account Login: Redirect URL, “forgot password” link, registration link

Styling Blocks

Via Settings Panel (No Code)

1. Select block
2. Click Styles tab in Settings panel
3. Adjust:
   • Typography - Font size, weight, letter spacing
   • Colors - Background, text, link colors
   • Spacing - Padding and margins
   • Border - Width, color, radius (rounded corners)

Via Custom CSS (Code)

Add custom CSS to your theme for advanced styling:

/* Customize product card appearance */
.wp-block-commerce-connect-products-grid .product-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Customize product title */
.product-card__title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* Customize price display */
.product-card__price {
  font-size: 20px;
  font-weight: 700;
  color: #8b5cf6; /* Purple */
}

Add to Appearance → Customize → Additional CSS or your theme’s style.css.

Responsive Design

Commerce Connect blocks are responsive by default and adapt to mobile, tablet, and desktop screens.

Column Breakpoints

Most grid blocks (Products Grid, Categories, etc.) allow setting columns per device:

• Mobile (< 768px) - Default: 1 column
• Tablet (768px - 1024px) - Default: 2 columns
• Desktop (> 1024px) - Default: 3+ columns

Configure in block settings:

1. Select Products Grid block
2. Settings panel → Columns (Desktop): 3
3. Settings panel → Columns (Tablet): 2
4. Settings panel → Columns (Mobile): 1

Mobile Optimization Tips

• Use fewer columns on mobile - 1 column for product grids
• Increase touch target sizes - Buttons should be 44px × 44px minimum
• Reduce products per page - 6-8 products on mobile (less scrolling)
• Hide less important elements - Use CSS to hide filters on mobile, show in off-canvas
• Test on real devices - Use responsive design mode in browser dev tools

Testing Your Blocks

Preview Changes

1. Click Preview button in Site Editor
2. Opens frontend preview in new tab
3. Test functionality:
   • Click product cards (should navigate to product page)
   • Test filters (products should filter by category/price)
   • Test pagination (page numbers should load new products)
   • Test cart icon (should show cart count)

Test on Multiple Devices

Use browser responsive design mode:

1. Open preview in browser
2. Press F12 (dev tools)
3. Click Toggle device toolbar icon
4. Test on:
   • iPhone (375px width)
   • iPad (768px width)
   • Desktop (1440px width)

Test Functionality

• Add to cart - Click buy button, verify cart updates
• Search - Type product name, verify results
• Filters - Select category, verify products filter
• Pagination - Click page 2, verify products change
• Account - Test login, registration, order history

Next Steps

Now that you’ve added your first blocks, expand your storefront:

1. Explore all 37 blocks → - Product pages, search, filters, accounts, and more
2. Customize templates → - Build custom product page layouts with Site Editor
3. Configure analytics → - Track customer behavior and conversions
4. Plan migration → - Move from WooCommerce to production

Common Issues

Products not appearing in grid

Solution: Trigger product sync at Settings → Commerce Connect → Products → Sync Products Now. Wait for sync to complete, then reload page.

Block inserter doesn’t show Commerce Connect blocks

Solution: Verify Commerce Connect plugin is activated at Plugins → Installed Plugins. If activated, try clearing browser cache.

Changes not visible on frontend

Solution: Clear WordPress® object cache (wp cache flush) and Edge Full Page Cache (WP Engine admin). Also clear browser cache with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).

Grid layout broken on mobile

Solution: Check column settings for mobile in block settings panel. Should be set to 1 column for mobile devices.