There is a very easy way to fix this problem: tell your customers how much money they need to add to their carts to take advantage of free shipping.

In addition to lowering the number of abandoned carts, displaying the amount remaining before free shipping also has the effect of increasing the average cart value of your store. Customers are .

We will see together how to set up this functionality on your Prestashop merchant site.

Use a module to display the amount before getting shipping costs

The easiest way to display how much a customer must add to his/her cart to get free shipping is to install the Amount before free shipping module.

Designed for Prestashop 1.7, it integrates perfectly with all stores in just a few clicks and offers a wide variety of options:

• It allows you to display blocks containing messages saying “Amount left before free delivery: xx €” on different places of the store (at the top of each page, within the order tunnel, on add-to-cart confirmation pop-in…)
• For each of these blocks you can customize the appearance (background and text colors, …) and the text of the message
• The blocks are updated in real time, as soon as the contents of the cart change
• It works with both the “Free shipping starts at” field (if you offer delivery cost for a similar cart amount threshold, regardless of the carrier) and the price ranges system, which allow you to configure a different free shipping threshold for each delivery method.

This module is availablee on our store. Do not hesitate to click on the block below to access its detailed presentation. There you will find a lot of informations and a link to a demo on where you can test the various integrated features.

Show on cart page the amount to add for having free delivery

If you don’t want to go through a module, you can also implement the functionality by modifying the source code of your site. We will therefore see in this 2nd part how to manually add, on the basket summary page, a block indicating to the customer the amount he must add to obtain the free delivery. .

To do this, you have to modify the controller which is responsible for managing the cart page and the associated template.

Several remarks before we start:

• the tutorial below explains how to do this for Prestashop 1.7. For previous versions, the template is different because the file structure has changed in this version. Depending on your theme the name or the path of the template may be different.
• the method described here is only valid if you use the “Free shipping starts at” field of the “Shipping > Preferences” menu (in other words if you offer delivery from a certain amount, regardless of the carrier selected by the customer); if you use the price ranges, please refer to the 1st part of this article, dealing with the “Amount before Free Delivery” module

If you haven’t already done so, go to the “Shipping > Preferences” menu in your back office. There you will find a field titled “Free shipping starts at” (€). This is where you will indicate the threshold from which you offer the shipping costs to the customer (the value included VAT). For this tutorial we will set this value to 79 €.

To transmit this amount to the page we will need to create an “override” of the controller. To do this, you must create a file called CartController.php in the override/controllers/front directory of Prestashop. This file should contain the following code:

<?php

class CartController extends CartControllerCore
{
    public function initContent()
    {
        parent::initContent();
        $shipping_free_price = (float)Configuration::get('PS_SHIPPING_FREE_PRICE');
        $this->context->smarty->assign([
            'shipping_free_price' => $shipping_free_price
        ]);
    }
}

The code added here is intended to pass a Smarty variable that corresponds to the value defined in the preferences.

Then we will be able to use this value in the template. We choose the cart-detailed-totals.tpl template (in the \templates\checkout\_partials directory of your theme), which corresponds to the block summarizing all the subtotals in the right column of the cart summary page. It has the advantage of being dynamic, whcih mean its content is refreshed each time the cart is modified (product addition or deletion, etc.).

We add the block showing the amount remaining before free delivery after the “Delivery” subtotal as follows:

          {if $subtotal.type === 'shipping'}
              <div><small class="value">{hook h='displayCheckoutSubtotalDetails' subtotal=$subtotal}</small></div>
              {* Block containing remaining amount before free delivery *}
              {if isset($shipping_free_price)}
              <div {if $shipping_free_price <= $cart.subtotals.products.amount}style="display:none"{/if}>
                {assign var="missing_amount" value=$shipping_free_price-($cart.subtotals.products.amount - $cart.subtotals.discounts.amount)}
                {$missing_amount|number_format:2:",":""} {$currency.sign} {l s='before free delivery' d='Shop.Theme.Global'}
              </div>
              {/if}
              {* End of block *}
          {/if}

As you can see, we compare the amount of the order (without discounts) to the threshold of free shipping. If this amount is lower, we display the difference, otherwise we hide the block.

You can then add an CSS identifier or class to the HTML div tag to be able to modify the appearance of the block as you wish.

Remember to empty the site cache from the Advanced settings > Performances menu so that of files modifications are taken into account.

As explained above this method has its own limits: it does not work with the price ranges system, it must be used in a place of the theme which reload on every cart update, it does handle free-delivery discount codes, … For all these reasons (and may be others), we invite you to discover our Amount Before Free Delivery module introduced in the 1st part of this article if you haven’t read it already. It covers all cases and has a large number of setting options.

L’article Prestashop – Display remaining amount before free delivery est apparu en premier sur BeComWeb Web-Agency.

However, the information displayed on this page is limited: just your logo, a title and a short text… Nothing more. A little light ! If the version 1.7 of Prestashop allows you to enter a personalized maintenance message, it is still quite limited. Basically it is like saying “We are closed” to your customers, without further details.

Which raises many questions for them:

• When will your site be available again?
• How to contact you during this time?

And on your side you might want to make this page a little nicer. Black text on a white background, no image,… This is not what we can call “attractive”.

Edit Prestashop maintenance page manually

The 1st method to modify the content and the appearance of the maintenance page will consist of modifying the files that compose it.

Let’s start with Prestashop 1.6. In this version, the files in question are those ones:

• the maintenance.tpl template (located in your theme directory),
• the maintenance.css stylesheet (located in the css subdirectory of your theme)

If you want to add texts or images, you can do so in the template. For texts, if your store is multilingual, do not forget to respect the Smarty syntax which give you the ability to make a character string translatable:{l s=’Text to be translated’}.

Then for all the design modifications (font size, background color, ..), you must modify the stylesheet (which obviously requires a little mastery of this language).

In Prestashop 1.7, the names and locations of these files are slightly different:

• the maintenance.tpl template is located in thetemplates/errors directory of your theme,
• the stylesheet is called error.css and is in theassets/css directory of your theme

Don’t forget that in this version you can customize the text of the page yourself, as I told you a little earlier (from the “Shop parameters > General” menu, “Maintenance” tabs).

A customization module for the Prestashop maintenance page

If the 1st method turns you off (because you do not have the necessary technical skills), you can have a look on our “Custom maintenance page” module.

Very easy to use, it has the following options:

• selection of a template from the available selection (“Site under maintenance”, “Available soon”) or manual entry of the page title and text,
• choice of image and background color,
• setting up a countdown before the availability of the site
• display of contact details and links to social networks

In a few minutes you will be able to offer your customers a nicer, usefull and more complete maintenance page for your Prestashop store, as in the examples below.

Do not hesitate to take a deeper look at the modul’s dedicatedpage, you will find the full list of features and several other screenshots.

L’article Prestashop – Customize the maintenance page est apparu en premier sur BeComWeb Web-Agency.