Belgrade 3.0.0 is the most significant update to our Drupal Commerce theme since its initial release. Modified based on the needs of clients and the functionality we have implemented for real-world eCommerce implementations again and again, it goes beyond just a normal theme.

Rather than being a rigid starter kit, Belgrade is now firmly centered around Drupal Commerce Kickstart, showcasing best practices and the full capabilities of the platform. You can use it as an example when designing and building your own Drupal Commerce themes.

Modernized login and user account pages

We brought a more contemporary design to user authentication pages that matches patterns consistently used across client projects. The login, registration, and password reset forms now feature a centered, card-based layout with:

• Optional background image - Add visual interest to authentication pages with a  customizable background
• Custom styling - Modern form design matching your checkout experience, moving away from the default Drupal primary tabs

The whole experience can be toggled.

Implementing cleaner login forms is a normal step for more Drupal Commerce sites to help them look fresh and modern. Belgrade 3.0.0 makes this step much easier.

Additionally, the theme now includes settings for displaying user account forms (primarily address book forms) in modal dialogs instead of full page redirects. This provides a more seamless user experience by keeping users on their current page while completing account-related actions.

Configurable appearance with extensive theme settings

What previously required custom code, template overrides, and preprocessing can now be configured through the admin interface. Modifications that almost every Drupal Commerce site requires can now be configured with a few clicks.

Form styling options

Belgrade 3.0.0 introduces four distinct form style options for checkout:

• Floating labels - A modern approach used across major commerce platforms. When you interact with the field, the label floats above the input.
• Minimal style - From Belgrade's original design. Kept for backward compatibility.
• Default style - A standard boxed input approach.
• Additional style options - Multiple form styles to match different design needs, such as button styling with icons.

Cart display and behavior options

The cart block now offers extensive customization options that were previously hardcoded:

• Adjustable text labels - Change what the cart is called (“shopping bag”, etc.) and tweak the item count label
• Adjustable icons - Choose from a large selection of icons to represent your cart
• Badge display options - Show item count as a badge or hide the text and display only in a badge
• Animation options - Choose from fade, slide, or other animations
• Control position of cart dropdown - Display the dropdown in the center or to the left or right.
• Display triggers - Show the card dropdown when clicked or on hover
• Color customization - Choose from primary, light, or dark color schemes and adjust text for readability.

All of these cart improvements use Bootstrap's native fade and transition classes, moving away from older jQuery implementations.

Button mapping system

One of the most challenging aspects of theming Drupal is managing button classes across different forms. Belgrade 3.0.0 introduces a button mapping system that lets you assign Bootstrap button classes to specific buttons based on their text value.

For example, you can configure your "Update cart" or "Checkout" button to use any Bootstrap button state (primary, secondary, success, danger, warning, info) by simply changing a text field in the settings. 

Need your checkout button to be green (success) or red (danger)? Just change the mapping. You can even add icons to buttons without any preprocessing code.

Focused checkout

The new Focused Checkout removes the header and footer from checkout pages to direct customer attention solely to completing their purchase. It can be enabled with a simple toggle with sensible defaults.

But you can also configure it to match your particular requirements.

• Header settings - Configure visibility of the logo and navigation buttons.
• Content settings - Configure display of the current checkout step, or show the full checkout progress indicator.
• Layout - Configure the width of the checkout area relative to the order summary.

As part of this work, we also implemented a mobile-friendly order summary. Instead of showing the full summary at the bottom of the checkout experience, requiring the user to scroll past lengthy forms to see their order details, we display a compact, sticky summary at the bottom of the screen. Clicking on it expands the summary to show full details.

New product gallery

Product image galleries have been completely rebuilt. Through the theme settings, you can toggle gallery navigation options:

• Navigation arrows - Allow the user to navigate the gallery with left and right arrows.
• Navigation dots - Allow the user to navigate the gallery with dots.
• Thumbnail navigation - show thumbnails of every image below the main image.

You can also change the behavior when a user clicks or hovers on the main image. It can open the full image in a lightbox, allow the user to pan and zoom on the image, or do nothing.

Built for real projects

The philosophy behind this release is simple: if a customization was needed more than ten times across different projects, it probably belongs in the theme as a configurable option. Belgrade becomes more helpful, but isn't bloated with features nobody uses. Every option included addresses a real, recurring need.

What used to require extensive custom development now comes out of the box with Commerce Kickstart. When developing your own Commerce themes and websites,  you can copy the work we’ve done in Belgrade and save yourself hours and hours of development time. You’ll find the developer experience has also been improved.

Getting started

Belgrade 3.0.0 is compatible with Drupal 10 and Drupal 11.

We recommend starting with Commerce Kickstart to see all of these features in action, then customizing the theme settings to match your specific requirements.

If you’re already using an earlier version of Belgrade, this latest release maintains backward compatibility. New features are only enabled on fresh installs.