How can I show the remaining amount for free shipping on the cart page?

I want to show the shoppers the minimum amount of shopping they need to do to benefit from the free shipping and the amount of money remaining for this amount.

If you are using  Free shipping over 'X' and Value of 'X' from admin for the free shipping adjustment, you can show the remaining price in shopping cart page like this, also you can filter out products by remaining price to suggest users to buy to have the free shipping benefit. You can add the logics in razor page like this -
@if (Model.SubTotal < valueOfXAmount)
  {
            <tr class="order-subtotal">
                <td class="cart-total-left" colspan="2">
                    <label>Orders over $@{valueOfXAmount} eligible for free shipping benefit </label>
                </td>
            </tr>
  }

Or you can introduce a new view component from a plugin, or update the values with ajax in every cart add, your wish.

Hi,

can you explain this a little bit more?
If you are using  Free shipping over 'X' and Value of 'X' from admin for the free shipping adjustment, you can show the remaining price in shopping cart page like this

i am using version 4.5.

Thank you

can you explain this a little bit more?
what exactly you needed to Implement so according to that we can suggest ?

As kazirahiv written this

@if (Model.SubTotal < valueOfXAmount)
  {
            <tr class="order-subtotal">
                <td class="cart-total-left" colspan="2">
                    <label>Orders over $@{valueOfXAmount} eligible for free shipping benefit </label>
                </td>
            </tr>
  }

so in this case it will be display message as per the request
it can be done using customize or by adding viewcomponenet

If you want to do it in the .cshtml file (with razor code), you will need to modify this file
\Views\Shared\Components\OrderTotals\Default.cshtml
You need to "Resolve" the ShippingSettings to get the FreeShippingOverXValue:

@model OrderTotalsModel
@{
    var freeShippingOverXValue = Nop.Core.Infrastructure.EngineContext.Current.Resolve<Nop.Core.Domain.Shipping.ShippingSettings>().FreeShippingOverXValue;
}

...
@if (Model.SubTotal < freeShippingOverXValue)
... (as per above)

Hi, Thank you. I will test this.

I am new to this kind of coding, so I my son helped me. I'm not sure if it is what it should be. This was built upon what the others have shared. The code doesn't nest pretty. Thanks to the other guys mostly. They got me going by sharing of their code. :)

@model OrderTotalsModel
@{
    var freeShippingOverXValue = Nop.Core.Infrastructure.EngineContext.Current.Resolve<Nop.Core.Domain.Shipping.ShippingSettings>().FreeShippingOverXValue;
    var freeX = @freeShippingOverXValue;
    var subT = Decimal.Parse(@Model.SubTotal.Replace("$",""));
}

<div class="total-info">
    <table class="cart-total">
        <tbody>
        @if (freeShippingOverXValue > 0)
            {
                <tr class="order-subtotal">
                    <td class="cart-total-left" colspan="2" style="text-align: center;">
                        <label>Orders over $@freeShippingOverXValue get free shipping!</label>
                        <br>
            @if (subT < freeX)
                {
                            <label>Spend $@(freeX - subT) more to get free shipping!</label>
                }
            @if (subT >= freeX)
                {
                            <label>You get free shipping!</label>
                }
                        
                    </td>
                </tr>
            }