3.4.4. Free Shipping Indicator

Owned by Adnan Krzavic
Last updated: Apr 14, 2022 by Duy Pham
3 min read

The Free Shipping Indicator is a simple visualization or message that points out that free shipping will be applied on a given item. When free shipping is applied for an item the customer will be incentivized to make a purchase which in turn increases conversions. The Free Shipping Indicator can be used on following elements:

 

  1. as a text message in the buybox on the Product Detail page

  2. as a badge on the product image on the Product Detail page

  3. as a badge / label on the product tile (CC Image Teaser 2.0 or CC Products Grid)

  4. as a badge in the autosuggest field on the search flyout

 

Figure 119 Free Shipping Indicator on Product Detail page (storefront)

 

Before setting up the Free Shipping Indicator make sure that you actually have a shipping method using free shipping. Access STORES / SETTINGS / CONFIGURATION and navigate to SALES and then SHIPPING METHODS.37

Now do the following: 

  1. In order to enable the free shipping method set ENABLED to YES.

  2. Enter a TITLE to identify the Free Shipping method during checkout on the storefront.

  3. Enter a METHOD NAME to describe this shipping method (used only for the admin panel).

  4. Enter the MINIMUM ORDER AMOUNT to trigger free shipping. E.g. if the input is “30”, free shipping will be applied in case the subtotal amount is more than 30.

  5. In the DISPLAYED ERROR MESSAGE input field, type the message to appear if free shipping becomes unavailable.

  6. In the SHIP TO APPLICABLE COUNTRIES you can choose the following.

    1. “All Allowed Countries”: Customers from all countries specified in STORES / SETTINGS
      / CONFIGURATION under GENERAL / GENERAL / COUNTRY OPTIONS can use free shipping.

    2. “Specific Countries”: You can select specific countries from the multi-select field to apply free shipping.

  7. In SHOW METHOD IF NOT APPLICABLE you can choose:

    1. “Yes”: the free shipping method will always be shown in the checkout, even if not 
      applicable (MINIMUM ORDER AMOUNT was not reached).

    2. “No”: the free shipping method is shown only if applicable.

  8. In the SORT ORDER input field you can enter the priority in displaying the free shipping method in the 
    checkout (0 = highest, 1 = second highest etc.)

 

When the above settings are done click SAVE CONFIG. Now the free shipping method can be used to display the Free Shipping Indicator.

 

Figure 120 Shipping Method configuration (admin panel)

 

Access STORES / SETTINGS / CONFIGURATION and navigate to MAGESUITE and POSITIVE INDICATORS. Expand the FREE SHIPPING section. Here you can do the following:

 

  1. Select the DEFAULT SHIPPING METHOD to be used for checking if the free shipping threshold was hit. In case you choose the free shipping method created above, the MINIMUM ORDER AMOUNT will be this threshold. You can also choose another shipping method which has a free shipping threshold (MINIMUM ORDER AMOUNT) set.

  2. SHOW IN PRODUCT TILES: if “Yes” is selected, a badge / label on the product tile (Product Grid, CC Image Teaser 2.0 or CC Products Grid) will appear

  3. SHOW TEXT NOTE ON PRODUCT’S DETAILPAGE: if “Yes” is selected, a text message in the buybox on the Product Detail page will appear.

  4. SHOW BADGE ON PRODUCT’S DETAILPAGE: if “Yes” is selected, a badge on the product image on the Product Detail page will appear.

  5. SHOW IN SEARCH AUTOSUGGEST: if “Yes” is selected, a badge in the autosuggest field on the search flyout will appear.

 

When the above settings are done click SAVE CONFIG in the top section on the right-hand side. In order to make the changes visible go to SYSTEM / TOOLS / CACHE MANAGEMENT and click FLUSH MAGENTO CACHE.

 

 

_________________________________________ 

37 Under following link you can learn more about setting up shipping methods in
Magento 2 : https://docs.magento.com/m2/2.2/ce/user_guide/shipping/shipping.html