Créer une barre de progression pour avoir la livraison gratuite sur Shopify

Une demande de développement que nous avons souvent est d'ajouter une barre de progression pour débloquer la livraison gratuite au niveau du panier d'achat Shopify.

Pour réaliser un développement parfait et complet il faut s'adapter au thème de chaque client mais voici ci-dessous une solution facile et qui devrait fonctionner sur tous les thèmes.

Étape 1 : chercher le fichier correspondant au panier

Ce fichier peut changer de nom selon les thèmes, voici les plus courants : cart.liquid, main-cart.liquid et main-cart-items.liquid.

Étape 2 : ajouter le code à l'endroit souhaité

Ajoutez le code suivant à l'endroit souhaité. Sous le titre de la page est un bon emplacement.

<span>0€ <progress max="10000" value="{{ cart.total_price }}"></progress> 100€</span>

Étape 3 : customiser les valeurs

Dans le code précédent, la livraison gratuite est indiquée à 100€. Si vous voulez changer cette valeur pour qu'elle corresponde aux paramètres d'expéditions de votre boutique, il faut changer 100€ et max="10000". En sachant que pour ce dernier, c'est votre livraison gratuite x 100. Exemple pour 50€ : max="5000".

Étape 4 : ajouter une phrase motivante

Ajoutons maintenant une phrase motivante, en dessous du code précédent, qui poussera notre visiteur à augmenter son panier et l'informera de sa progression.

<p>{% if cart.items.size == 0 %}Ajoutez des produits au panier pour obtenir la livraison gratuite{% endif %}{% if cart.items.size != 0 %}{% if cart.total_price >= 10000 %} Vous avez la livraison gratuite 👌{% elsif cart.total_price < 10000 %}Plus que {{ 10000 | minus: cart.total_price | money }} pour obtenir la livraison gratuite.{% endif %}{% endif %}</p>

Il faut bien évidemment changer les valeurs par les vôtres.

Résultat :