Custom module requirements

In this course, we’ll be building a module for a Magento 2 website that displays free shipping information to customers. This lesson outlines the requirements and discuss the process of creating this module.

User Story

As a visitor, I’d like to know how many dollars to add to my cart so I know when my shopping cart total qualifies for the free shipping promotion.

Requirements and Details

A new banner should be shown at the top of the website that lets the visitor know about the free shipping promotion. The content for this banner should change depending on one of three states:

  1. No items in the cart: Show a notice that says “Free shipping on orders over $100” with an emoji.
  2. Items in the cart with a subtotal between $0.01 and $99.99: Show a message that says “You are X dollars away from free shipping” with a sunglass emoji.
  3. Items in the cart with a subtotal of $100 or more: Show a message that says “Your order now has free shipping.”

The goal is to let the visitor know about the free shipping promotion, how much more they need to spend to qualify, or if they already qualify for free shipping.

A visual mockup should be provided to show how the free shipping text should display on the site. Mockups are useful because they help visualize the end result and make it clear what needs to be done.


  1. The text display does not need to be editable or configurable from the admin. This avoids creating unnecessary admin configuration screens.
  2. The free shipping threshold value of $100 is fixed and will not change. No admin system configuration is needed; the value can be hardcoded.
  3. The text displayed should dynamically change when the cart subtotal changes, without needing the page to be refreshed.

UI Component

Since the text needs to dynamically react to the cart subtotal changes, the module should be built as a UI Component.

Time Estimates

  • For experienced developers, this task can be estimated as a medium ticket, taking between 3 and 5 hours to complete. This includes researching how to get the cart subtotal and handling any intricacies involved with the display of the text.
  • For beginning or intermediate developers, this task can be estimated as a large item, taking more time for research and learning the necessary steps.

With the requirements and estimates in place, it’s time to start working on this task!

Complete and Continue  
Extra lesson content locked
Enroll to access all lessons, source code & comments.
Enroll now to Unlock