Products Sort Block

A dropdown control that allows customers to sort product listings by different criteria.

What It Does

The Products Sort block adds a dropdown menu for customers to change how products are ordered (price, name, newest, etc.). It works with the Products block to re-sort results.

Use cases:

• Product listing pages
• Search results
• Collection/category pages
• Shop pages

How to Add It

Requirements: Must be used inside a Products block.

1. Add a Products block to your page
2. Click + inside the Products block
3. Search for “Products sort”
4. Click to insert

Block Settings

Sort Options

Enable/disable sort options:

• Featured - Manual ordering from BigCommerce
• Best Selling - Most purchased (requires sales data)
• Newest - Recently added products
• Oldest - Oldest products first
• A-Z - Alphabetical by product name
• Z-A - Reverse alphabetical
• Price: Low to High - Cheapest first
• Price: High to Low - Most expensive first

Default sort: Choose which option is selected on page load.

Label & Display

Label text:

• “Sort by:” (default)
• “Order by:”
• Custom text
• No label (dropdown only)

Dropdown style:

• Show arrow icon
• Hide arrow icon
• Custom icon

Positioning

Dropzone: Place in specific layout positions within Products block:

• Above products (default)
• Below products
• Sidebar
• Toolbar

Customization

Styling the Dropdown

/* Sort dropdown container */
.wpe-commerce-products-sort-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Label */
.wpe-commerce-products-sort-control label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

/* Dropdown select */
.wpe-commerce-products-sort-control select {
  padding: 0.5rem 2rem 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
  cursor: pointer;
}

/* Dropdown on hover */
.wpe-commerce-products-sort-control select:hover {
  border-color: #0073aa;
}

/* Dropdown when focused */
.wpe-commerce-products-sort-control select:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

Mobile Responsive

/* Stack label and dropdown on mobile */
@media (max-width: 768px) {
  .wpe-commerce-products-sort-control {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .wpe-commerce-products-sort-control select {
    width: 100%;
  }
}

Common Patterns

Toolbar with Sort and Filters

Horizontal toolbar above products:

Products block
├── Products Sort (Above products dropzone)
├── Products Filters (Above products dropzone)
└── Products Grid

Compact Sort in Sidebar

Minimal sort in sidebar layout:

• Label: “Sort:”
• Dropzone: Sidebar
• Enabled options: Price, Name only

Results Toolbar

Sort + counter + pagination:

Products block
├── Products Sort
├── Products Counter ("Showing 1-12 of 48 products")
├── Products Grid
└── Products Pagination

How It Works

Sort Logic

When customer selects an option:

1. JavaScript captures dropdown change event
2. Products block receives sort parameter
3. Products block queries BigCommerce GraphQL API with new sort
4. Results update without page reload
5. URL updates with sort parameter (for bookmarking)

URL format:

/shop/?sort=price-asc
/shop/?sort=name-desc
/collection/shoes/?sort=newest

Default Sort Behavior

On first page load:

• Uses default sort from block settings
• Falls back to “Featured” if no default set
• Respects URL parameter if present

When navigating:

• Preserves last selected sort
• Stores in session/local storage
• Resets when leaving site

Block Context

Must be used inside:

• Products block

Uses context from Products block:

• wpe-commerce/productsDropzones - Available layout positions
• wpe-commerce/productsFullPayload - Current product data
• wpe-commerce/productsIsFetching - Loading state

Does not work:

• Standalone (requires parent Products block)
• Inside Single Product block
• Outside Products block

Technical Details

Block name: wpe-commerce/products-sort-control

Attributes:

• dropzone (string) - Layout position
• settingsId (string) - Settings reference

Supports:

• Alignment
• Custom CSS classes

Does not support:

• Multiple instances (one per Products block recommended)
• Typography controls
• Color controls from block UI

Troubleshooting

Sort not changing products

Check:

1. Block is inside Products block
2. Products block has products to display
3. JavaScript is not blocked/errored
4. Browser console for errors

Fix:

• Hard refresh page (Cmd+Shift+R / Ctrl+Shift+F5)
• Check browser console for JavaScript errors
• Verify Products block is fetching data correctly

Sort options not showing

Check:

1. Options enabled in block settings
2. BigCommerce API returning sort data
3. Products have data to sort by (prices, dates, names)

Fix:

• Edit Products Sort block
• Re-enable desired sort options in sidebar
• Save and refresh page

”Best Selling” not working

Best Selling requires sales/order data from BigCommerce.

If not working:

• No orders in BigCommerce yet
• Sales data not synced
• Insufficient data to rank products

Fallback: Will show products in Featured order instead.

URL parameter not applied

If ?sort=price-asc in URL doesn’t sort:

Check:

1. Products Sort block exists on page
2. Dropdown is inside Products block
3. URL parameter format is correct

Valid parameters:

• featured
• best_selling
• newest
• oldest
• name-asc (A-Z)
• name-desc (Z-A)
• price-asc (Low to High)
• price-desc (High to Low)

Related Blocks

• Products - Parent container block
• Products Filters - Filter products by attributes
• Products Counter - Show result count
• Products Grid - Display sorted products