How to Build a Custom Checkout Progress Bar in Magento 2

Why You Need a Custom Checkout Progress Bar in Magento 2

Let’s be honest—nobody likes a confusing proceso de pago. If your customers feel lost or unsure about where they are in the pago flow, they might abandon their cart. That’s where a custom pago progress bar comes in handy. It visually guides shoppers through each step, reducing friction and increasing conversions.

Magento 2’s default pago is solid, but sometimes you need a little extra flair to match your store’s branding or improve UX. En esta guía,’ll walk through cómo build a custom pago progress bar in Magento 2—paso a paso, with code examples.

Understanding the Default Magento 2 Checkout Flow

Antes de diving into customization, let’s quickly recap how Magento 2’s pago works por defecto:

  • Shipping – Customer enters shipping details.
  • Review & Payments – Customer selects método de pago and reviews order.
  • Success Page – Order confirmation.

The default progress indicator is minimal, just showing the current step. We’ll enhance this with a dynamic, visually appealing progress bar.

Step 1: Create a Custom Module

Primero, we need a module to house our customizations. Here’s cómo set one up:

app/code/Magefine/CheckoutProgressBar/
├── etc/
│   └── module.xml
├── registration.php
└── view/frontend/
    └── layout/
        └── checkout_index_index.xml

registration.php:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magefine_CheckoutProgressBar',
    __DIR__
);

etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magefine_CheckoutProgressBar" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 2: Override the Checkout Layout

A continuación, we’ll modify the pago layout to include our custom progress bar.

view/frontend/layout/pago_index_index.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom.checkout.progress" template="Magefine_CheckoutProgressBar::progress.phtml" before="checkout.root"/>
        </referenceContainer>
    </body>
</page>

Step 3: Create the Progress Bar Template

Ahora, let’s build the actual progress bar HTML and styling.

view/frontend/templates/progress.phtml:

<div class="custom-progress-bar">
    <ul>
        <li class="step-shipping active"><span>Shipping</span></li>
        <li class="step-review"><span>Review & Payment</span></li>
        <li class="step-success"><span>Order Complete</span></li>
    </ul>
</div>

Step 4: Add CSS Styling

To make it look polished, we’ll add some CSS. Create a new file:

view/frontend/web/css/source/_module.less:

.custom-progress-bar {
    margin-bottom: 30px;
    ul {
        display: flex;
        list-style: none;
        padding: 0;
        justify-content: space-between;
        li {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 10px 0;
            color: #ccc;
            font-weight: bold;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: #eee;
            }
            &.active {
                color: #1979c3;
                &::before {
                    background: #1979c3;
                }
            }
            span {
                position: relative;
                z-index: 1;
                background: #fff;
                padding: 0 10px;
            }
        }
    }
}

Step 5: Add JavaScript to Update Progress Dynamically

Necesitamos update the progress bar as the customer moves through pago.

view/frontend/web/js/progress.js:

define([
    'jquery',
    'Magento_Checkout/js/model/step-navigator'
], function ($, stepNavigator) {
    'use strict';

    return function () {
        stepNavigator.steps.subscribe(function (steps) {
            steps.forEach(function (step) {
                if (step.isVisible()) {
                    $('.custom-progress-bar li').removeClass('active');
                    $('.custom-progress-bar .step-' + step.code).addClass('active');
                }
            });
        });
    };
});

Ahora, include this JS in your layout:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Text" name="custom.progress.js">
                <action method="setText">
                    <argument name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">
                        {
                            "*": {
                                "Magefine_CheckoutProgressBar/js/progress": {}
                            }
                        }
                    </script>]]></argument>
                </action>
            </block>
        </referenceBlock>
    </body>
</page>

Step 6: Test & Deploy

Después de setting everything up, run these commands:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Ahora, your custom pago progress bar debería ser live! Navigate to the pago page to see it in action.

Advanced Customizations

Want to take it further? Aquí están some ideas:

  • Add Icons – Include visual indicators (like checkmarks) for completed steps.
  • Mobile Optimization – Adjust the layout for smaller screens.
  • Progress Percentage – Show a dynamic percentage completion.

Reflexiones finales

A well-designed pago progress bar can significantly improve your store’s user experience. By following this guide, you’ve learned cómo build a custom one in Magento 2 desde cero. Need a ready-made solution? Check out Magefine’s extensions for optimized pago enhancements!

Got questions? Drop them in the comments below!