Nous allons voir dans ce tutoriel comment afficher le stock sur shopify

Il est important pour votre client de savoir si vous avez du stock pour vos produits et cela permet également de rendre votre fiche produit plus attrayante.

Je rappelle que dans ce tuto nous allons afficher le stock réel toutes variantes confondues.  Ce qui veut dire qu’il n’est pas destiné au dropshipping car la notion réelle de rupture de stock n’est pas justifiée et justifiable.

Ce que cela donne en vrai: https://dgeodev.myshopify.com/products/produit-1

Passons à la partie technique !

Comment installer le code

Rendez-vous dans les  fichiers de votre thème shopify et dans le dossier « sections ».

Trouvez le product-template.liquid et rechercher en faisant Ctrl + F (ou cmd + R) l’occurence « price » comme sur l’exemple ci-dessous sur le thème debut.

comment afficher le stock sur shopify

Si vous ne parvenez pas à trouver cette zone essayez de mettre des mots un peu partout pour vous repérer du style:
toto1 toto2 toto3 ! astuce de bibi 😀

Vous allez maintenant copier/coller le code suivant à l’endroit souhaité.

<style>
.sd-items-count p { color:#ff2200; font-size:15px; padding:7px 0; margin:0; }
.sd-items-count img { float:left; width:20px !important;height:auto !important;margin:0 7px 0 0; padding:0; }
</style>
{% assign product_qty = 0 %}
{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
{% assign product_qty = product_qty | plus: variant.inventory_quantity %}
{% endif %}
{% endfor %}
{% if product_qty > 0 %}
<div class="sd-items-count">          
<p><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM5LjQxMSAzOS40MTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM5LjQxMSAzOS40MTE7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBkPSJNMTkuNzA2LDIzLjQxMWMtMC4wNzYsMC0wLjE1My0wLjAxOC0wLjIyNC0wLjA1M0wzLjYzNywxNS40MzdjLTAuMTY5LTAuMDg1LTAuMjc2LTAuMjU4LTAuMjc2LTAuNDQ3ICAgICBzMC4xMDctMC4zNjIsMC4yNzYtMC40NDdsMTIuNjMyLTYuMzE1YzAuMjQ3LTAuMTIzLDAuNTQ3LTAuMDI0LDAuNjcxLDAuMjI0YzAuMTIzLDAuMjQ3LDAuMDIzLDAuNTQ3LTAuMjI0LDAuNjcxTDQuOTc5LDE0Ljk4OSAgICAgbDE0LjcyNyw3LjM2M2wxNC43MjctNy4zNjNsLTExLjU4LTUuNzljLTAuMjQ3LTAuMTI0LTAuMzQ3LTAuNDI0LTAuMjI0LTAuNjcxYzAuMTI1LTAuMjQ3LDAuNDI1LTAuMzQ1LDAuNjcxLTAuMjI0bDEyLjQ3NSw2LjIzNyAgICAgYzAuMTY5LDAuMDg1LDAuMjc2LDAuMjU4LDAuMjc2LDAuNDQ3cy0wLjEwNywwLjM2Mi0wLjI3NiwwLjQ0N2wtMTUuODQ1LDcuOTIyQzE5Ljg1OSwyMy4zOTQsMTkuNzgyLDIzLjQxMSwxOS43MDYsMjMuNDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMTkuNzA2LDM5LjQxMWMtMC4wNzYsMC0wLjE1My0wLjAxOC0wLjIyNC0wLjA1M0wzLjYzNywzMS40MzdjLTAuMjQ3LTAuMTI0LTAuMzQ3LTAuNDI0LTAuMjI0LTAuNjcxICAgICBjMC4xMjUtMC4yNDcsMC40MjQtMC4zNDUsMC42NzEtMC4yMjRsMTUuNjIxLDcuODFsMTUuNjIxLTcuODFjMC4yNDgtMC4xMjIsMC41NDctMC4wMjMsMC42NzEsMC4yMjQgICAgIGMwLjEyMywwLjI0NywwLjAyMywwLjU0Ny0wLjIyNCwwLjY3MWwtMTUuODQ1LDcuOTIyQzE5Ljg1OSwzOS4zOTQsMTkuNzgyLDM5LjQxMSwxOS43MDYsMzkuNDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMzUuNTUsMzEuNDg5Yy0wLjI3NiwwLTAuNS0wLjIyNC0wLjUtMC41di0xNmMwLTAuMjc2LDAuMjI0LTAuNSwwLjUtMC41czAuNSwwLjIyNCwwLjUsMC41djE2ICAgICBDMzYuMDUsMzEuMjY2LDM1LjgyNywzMS40ODksMzUuNTUsMzEuNDg5eiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMTkuNzA2LDM5LjQxMWMtMC4yNzYsMC0wLjUtMC4yMjQtMC41LTAuNXYtMTZjMC0wLjI3NiwwLjIyNC0wLjUsMC41LTAuNXMwLjUsMC4yMjQsMC41LDAuNXYxNiAgICAgQzIwLjIwNiwzOS4xODgsMTkuOTgyLDM5LjQxMSwxOS43MDYsMzkuNDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCQk8cGF0aCBkPSJNMy44NjEsMzEuNDg5Yy0wLjI3NiwwLTAuNS0wLjIyNC0wLjUtMC41di0xNmMwLTAuMjc2LDAuMjI0LTAuNSwwLjUtMC41czAuNSwwLjIyNCwwLjUsMC41djE2ICAgICBDNC4zNjEsMzEuMjY2LDQuMTM3LDMxLjQ4OSwzLjg2MSwzMS40ODl6IiBmaWxsPSIjMDAwMDAwIi8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggZD0iTTE5LjcwNiwxMy4yMzhjLTAuMjc2LDAtMC41LTAuMjI0LTAuNS0wLjVWMC41YzAtMC4yNzYsMC4yMjQtMC41LDAuNS0wLjVzMC41LDAuMjI0LDAuNSwwLjV2MTIuMjM4ICAgIEMyMC4yMDYsMTMuMDE1LDE5Ljk4MiwxMy4yMzgsMTkuNzA2LDEzLjIzOHoiIGZpbGw9IiMwMDAwMDAiLz4KCQk8cGF0aCBkPSJNMjQuNTU1LDUuODVjLTAuMTI4LDAtMC4yNTYtMC4wNDktMC4zNTQtMC4xNDZsLTQuNDk1LTQuNDk2bC00LjQ5Nyw0LjQ5NmMtMC4xOTUsMC4xOTUtMC41MTIsMC4xOTUtMC43MDcsMCAgICBzLTAuMTk1LTAuNTEyLDAtMC43MDdsNC44NTEtNC44NUMxOS40NDcsMC4wNTMsMTkuNTc0LDAsMTkuNzA3LDBsMCwwYzAuMTMzLDAsMC4yNiwwLjA1MywwLjM1NCwwLjE0Nmw0Ljg0OSw0Ljg1ICAgIGMwLjE5NSwwLjE5NSwwLjE5NSwwLjUxMiwwLDAuNzA3QzI0LjgxMSw1LjgwMSwyNC42ODMsNS44NSwyNC41NTUsNS44NXoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
Il reste <span class="sd-count"><strong>{{ product_qty }}</strong></span> produits en stock.</p>
</div>
{% endif %}

Si vous voulez le mettre sur le produit mis en avant de votre page d’accueil, il vous suffira de trouver dans « sections » le fichier featured-product.liquid

Il se peut que selon le thème le nom ne soit pas forcément le même mais si il est bien codé alors ça sera le cas 😉.

Il sera intéressant de rajouter l’économie gagnée et le pourcentage juste en dessous.

Ce tutoriel existe aussi en vidéo

Vous savez maintenant comment afficher le stock sur shopify !

Bon tuto à tous et bonnes ventes !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 6 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 13 commentaires

  1. Super merci ! Il serait intéressant de faire un tuto sur comment ajouter le nombre de personnes en train de regarder ce produit actuellement ce serais super 🙂

  2. Merci pour ce tuto ! Tu feras gaffe tu as mis la fermeture du mais pas l’ouverture au début ^^

    1. Hello, Merci 😉

  3. Merci pour le tuto,
    simple et facile à mettre en place

  4. merci pour tout ce que tu nous apprend gratuitement.

    1. Merci pour le commentaire 🙂

  5. Bonjour,
    Est-ce valable pour tous les thèmes?
    Je n’arrive pas à trouver cette section

    1. Hello, sur certains thèmes il faut peaufiner oui. Le tuto vidéo arrive bientôt 😉 pour ne pas le louper vous pouvez vous abonner à la chaine Speedecom
      https://www.youtube.com/c/speedecom Bonne journée

  6. Bonjour. Est-ce que c’est possible en personnalisant le stock ?

    1. Hello, non navré et c’est illégal de mettre un stock fictif 🙂

      1. Dommage !

  7. bonjour, est-ce que c’est possible d’afficher le stock en fonction des tailles ? (ex : j’ai 3 S / 3 M / 3 L) avce ce code si je selectionne S ça laisse « il reste 9 dispo » alors que je voudrais que ça affiche « il reste 3 dispo »
    Merci !

    1. Hello, je pense que oui mais cela demande un codage spécifique 🙂

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation