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 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.5 sur 4 votes]

Cet article a 8 commentaires

Naturofeel
15 Sep 2020 Répondre

Merci beaucoup pour ce tutoriel, ça marche c’est absolument parfait !! Merci pour tous tes tutos géniaux ! 😀
1. Dgeo Dev
  15 Sep 2020 Répondre
  
  Hello et merci pour le commentaire 😉
streetstyle
16 Sep 2020 Répondre

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 %}
streetstyle
16 Sep 2020 Répondre

{% 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 %}

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

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

{% render ‘hextom_usb_coll’, product: product %}
streetstyle
16 Sep 2020 Répondre

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. Dgeo Dev
  16 Sep 2020 Répondre
  
  Ok super 🙂 Idéalement sur la div au dessus de la balise img 🙂
Florent DS
18 Oct 2020 Répondre

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. Dgeo Dev
  19 Oct 2020 Répondre
  
  Hello, hum le tuto n’est pas vraiment adapté pour cela 🙁 je ne vois pas de solution désolé. Bonne journée.

Comment fonctionne le système ?

Comment installer le code ?

Peut-on personnaliser un peu ?

Comment changer la couleur du bouton ?

Vous souhaitez mettre le badge à gauche ?

Ce tutoriel existe aussi en vidéo

Vous devriez également aimer

Comment ajouter un badge de confiance sur une fiche produit shopify ?

Comment créer un système de Tracking suivi colis sur Shopify

Comment créer un système de sommaire sur Shopify ?

Cet article a 8 commentaires

Naturofeel

Dgeo Dev

streetstyle

streetstyle

streetstyle

Dgeo Dev

Florent DS

Dgeo Dev

Laisser un commentaire Annuler la réponse

Envie d'apprendre à Coder et Maitriser ton Thème Shopify ?