Nous allons voir dans ce tutoriel comment créer un Badge « Nouveauté » sur les zones listant vos produits de votre boutique Shopify. En effet vos clients pourront voir en un clin d’oeil quel produit est nouveau et permettre à votre site de gagner en originalité.

Le résultat est visible sur le site de démo.

Comment fonctionne le système ?

Un petit badge nouveauté apparaitra sur le listing de vos produits sur la page d’accueil et sur vos collections. Ce système est administrable et fonctionne sur le nombre de jours suivants la date de création de chaque produit.

Par défaut le système est basé sur 30 jours. Si votre produit a été créé dans les 30 jours selon la date du jour alors le badge s’affichera 😉 Vous pourrez bien évidemment modifier cette valeur.

Comment installer le code ?

Rendez-vous dans boutique en ligne – Actions – Modifier le code et essayer de trouver dans le dossier Extraits (Snippets) un fichier habituellement nommé:

  • product-grid-item.liquid
  • product-cart-grid.liquid
  • etc…

bref si vous ne trouvez pas il vous suffit de demander au développeur de votre thème le fichier qui boucle les produits pour les templates de listing produits.

Bon il va falloir à ce stade trouver la balise image : faite un ctrl +F et recherchez <img et copiez/collez le code ci-dessous juste avant cette balise.

<!-- nombre de jours après la création du produit -->
{% assign days = 30 %}
{% assign period_time = days | times: 24 | times: 60 | times: 60 %}
{% assign date_now = 'now' | date:'%s' %}
{% assign date_finished = product.published_at | date:'%s' | plus: period_time | date:'%s' %}
{% if date_finished > date_now %}
<div class="badge-new">Nouveauté</div>
{% endif %}

<style>
.badge-new {
z-index:999;
display:inline-block;
position:absolute;
right:0;
top:0;
padding:5px 8px;
background:#FF8800 !important;
color:#FFF !important; }
</style>

Vous ne devriez  pas voir le badge pour le moment  sur l’image car il manque une étape mais nous pouvons y remédier en trouvant juste au dessus de notre code une balise <div… ou vous allez pouvoir mettre un code bien précis: style="display:relative;"  ce qui donnera quelque chose comme ceci:

badge nouveauté shopify

Peut-on personnaliser un peu ?

Oui vous allez pouvoir modifier 2 éléments…

  • Le premier est le nombre de jours ou le badge s’affiche par rapport à la date de création des produits. Pour modifier cela changez la valeur days = 30 par le nombre de jours souhaité.
  • Le deuxième élément que vous pouvez modifier c’est le mot nouveauté

Comment changer la couleur du bouton ?

Il vous suffit de trouver le background:#FF8800; et le color:#FFF; et de changer la couleur hexadécimale pour le fond et la couleur du texte 😉 je vous laisse vous renseigner sur les couleurs hexadécimale html sur Google 🙂

Vous souhaitez mettre le badge à gauche ?

Dans ce cas trouvez la partie right:0; et remplacez par right:auto; left:0;

Ce tutoriel existe aussi en vidéo

Bon tuto à toutes et tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 4.8 sur 11 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 34 commentaires

  1. Merci beaucoup pour ce tutoriel, ça marche c’est absolument parfait !! Merci pour tous tes tutos géniaux ! 😀

    1. Hello et merci pour le commentaire 😉

  2. Salut dgeo ! merci pour ces tutos extraordinaire ! je n’arrive pas à placer ce bout de code et de donner un style au conteneur, j’ai que des div class voici le bout de code de product-card-grid liquid :

    {% unless grid_image_width %}
    {%- assign grid_image_width = ‘600×600’ -%}
    {% endunless %}

    1 %} has-secondary{% endif %} » href= »{{ product.url | within: collection }} »>

    {% if product.images.size > 1 %}

    {% endif %}
    {{ product.title }}
    {% if section.settings.show_vendor %}
    {{ product.vendor }}
    {% endif %}

    {% include ‘product-price’, variant: product %}


    {% render ‘hextom_usb_coll’, product: product %}

  3. Dsl pour le premier post, j’ai bien trouvé l’endroit ou rajouter le bout de code,mais je n’ai que des div=class je ne sais pas ou mettre le style.

    1. Ok super 🙂 Idéalement sur la div au dessus de la balise img 🙂

  4. Merci pour ce super tuto! C’est absolument génial par contre j’aimerais savoir si c’est possible de ne pas mettre de règle de durée. Car j’ai mis « Best seller » à la place et je dois toujours rajouter des jours dans le code sinon il disparait et si je mets trop de jours, tous les produits ont le badge. Merci d’avance!

    1. Hello, hum le tuto n’est pas vraiment adapté pour cela 🙁 je ne vois pas de solution désolé. Bonne journée.

  5. Merci tellement merci ! je suis tellement nulle en code…j’y connais rien mais de voir que j’y arrive grâce à votre tutoriel me donne des ailes !

    1. Hello, ravi que ca vous plaise et bravo ! 🙂

  6. Bonjour,

    wow ça fonctionne No.1 … Un grand merci pour ce tuto.

    La Québécoise 🙂

  7. Super!! Merci beaucoup! Est-il possible de faire la même chose pour des variantes ajoutées (sur les images des variantes). Merci 🙂

  8. Chez nous ca marche pas !! vous pouvez nous aider ? On utilise le thème boost de Shopify Merci !

    1. Hello, vous pouvez faire une demande ici 🙂 speedecom.freshdesk.com

  9. Bonsoir, super merci beaucoup, je viens de le faire sur mes 2 sites et cela fonctionne parfaitement. Par contre lool, lorsque je mets une nouvelle variante, on ne voit pas le nouveauté si le produit n’est pas nouveau en lui même. Y a t il une astuce ? Merci

    1. Bonsoir, non navré, shopify ne prend en compte que la création du produit générique

  10. Bonjour,

    Merci pour ce tuto qui a été très utile. Je l’utilise sur le thème DAWN, le badge apparait parfaitement mais il reste tout le temps, ne respectant pas la réglé du temps. que je mets 1j ou 30j le badge reste. Une solution pour cela?

    1. Hello, il doit y avoir un conflit car le js ne semble pas être pris en compte – Si besoin d’aide nous contacter ici : speedecom.freshdesk.com 🙂

  11. SVP comment je prux fair les produit en grid sur la version mobile

    1. Hello, hum ca dépend du thème, le mieux serait de contacter leur support 🙂

  12. Super le tuto je vais le tester.
    Mais peux-t-on faire une collection avec les nouveaux produits ?

    1. Oui bien sur 🙂

  13. Un grand merci pour ce tuto très simple mais efficace pour un super effet sur ma boutique !!

  14. Bonjour je voudrait savoir si vous etes sur 5euro.com car j’aurait besoin de vos service svp

    1. Hello, ah non navré je ne travaille pas pour 5e ^^ mais vous pouvez détailler votre besoin à notre agence ici : https://speed-ecom.eu/contact/ on analysera tout cela 😉 Bonne journée

  15. c’est bon j’ai trouver une personne qui ma fait ma modification

  16. bonjour merci bcp pour ce tuto ! est ce possible d’avoir un tuto pour créer un badge « bestseller » en fonction du nombre de vente et non nombre de jour svp ? merci d’avance

    1. Hello et merci pour le com 🙂 non malheureusement un thème n’a pas ce pouvoir contrairement à une app 🙁

  17. Bonjour, merci pour tout les tutos. J’ai un petit souci quand je termine d’écrire les codes et que j’actualise, le badge est bien positionné mais du coup je ne vois plus le prix, le choix des options, le distributeur,… Tout a disparu. Et le bouton ‘ajouter au panier’ est dans l’image du produit comme le badge. Et aussi j’avais un produit en rupture de stock, et le badge rupture de stock s’est dédoublé il est juste en dessous du badge nouveauté et également en bas… C’est vraiment bizarre…

  18. Bonjour,
    Super Tuto mais j’utilise le thème gratuit Taste de Shopify et impossible de trouver le fichier à modifier.
    Est-ce possible de m’aider ?
    Merci d’avance.

  19. Bonjour,
    le problème sur certain thèmes est le product.published_at qui remonte rien donc cela s’affiche tout le temps, ca doit se nommer différemment !
    Pour ceux qu’on le theme Ride, j’ai réussit différemment, ce n’est pas automatique mais cela fonctionne.
    Déjà l’emplacement est :
    Apres <div class="card__badge et fin de div
    vous pouvez placer le code.
    J'ai modifier car par encore trouvé le bon nom pour le published_at, j'ai pris plutot un tag sur un produit que j'ai appelé "new"
    {% if card_product.tags contains 'new' %}
    Nouveauté
    {% endif %}

    Si cela peut aider, par contre si quelqu’un trouve le bon nom je suis preneur

    1. Bonjour, super un grand merci pour la participation et bravo pour l’investigation et le code !

  20. et oublier de donner le fichier :
    card-product.liquid

  21. Bonjour le code fonctionne parfaitement, seul bémol le badge nouveauté reste actif même lorsque je met 1 jour, j’ai essayé de mettre 0 le badge disparait mais par contre lorsque que « days= 30% » le badge ne veut s’enlever comme le tuto le propose.
    Peut être est-ce une histoire de modification de la fiche du produit, qui du coup remet à zéro le conteur de création du produit ?
    Auriez-vous une solution, je suis sur le thème Ride de shopify.

Laisser un commentaire

Fermer le menu
×
×

Panier