Force Product Free Shipping Graphic to display

Is there a way to force the free shipping graphic to appear on the product pages when the free shipping is not selected for the product?

I assume it would be something like this, but I cannot get it to work.

.product-details-page .delivery{
display: inline; }
.product-details-page .free-shipping{
display: inline; }

Any help will be appreciated.

Hello Richard,

You will need to do some code modification in order to display the free shipping graphic on every product.
You will need to replace the code in  ~/Views/Product/_DeliveryInfo.cshtml with the following:

@model ProductDetailsModel
@using Nop.Web.Models.Catalog;

<div class="delivery">
    <div class="free-shipping">@T("Products.FreeShipping")</div>

    @if ((Model.FreeShippingNotificationEnabled && Model.IsFreeShipping) || !String.IsNullOrWhiteSpace(Model.DeliveryDate))
    {

        if (!String.IsNullOrWhiteSpace(Model.DeliveryDate))
        {
            <div class="delivery-date">
                <span class="label">@T("Products.DeliveryDate"):</span>
                <span class="value">@Model.DeliveryDate</span>
            </div>
        }
    }
</div>

I would like to change the Free Shipping image.  Is there an easy way to do this?

Hello Richard,

The Free Shipping "icon" in Motion is not an image. It is actually the text from the products.freeshipping resource with a round background. You can change the text of the resource in Administration -> Language -> Edit Language -> String Resources.
You can find the CSS code responsible for the styling in ~Themes/Motion/Content/Styles.css at line 2012:

.free-shipping {
    width: 80px;
    height: 80px;
    padding: 19px 0;
    margin: 0 auto 20px;
    background: #46c688;
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
}