Nous allons voir dans cette vidéo comment créer un véritable système d’upsells au niveau du panier sur une Boutique Shopify.
Fini de surcharger votre thème avec une application qui bien souvent est payante ! Grâce à ce tuto shopify vous allez pouvoir proposer à vos clients une collection d’upsells bien spécifique 😉

Comment créer le système ?

C’est très simple il nous suffit de créer un extrait (snippet) avec le code du système que vous trouverez plus bas et on pourra ensuite l’appeler au niveau du panier. Pourquoi faire comme ça plutôt que de coller directement le code comme d’habitude ? Bin par ce que c’est plus propre ou plus facile à maintenir et à déplacer 😉

Création du Snippet

Rendez-vous dans Boutique en ligne – Actions – Modifier le code et dépliez le dossier Estraits (Snippets) et cliquez sur « Ajouter un nouveau extrait », nommez le « dg-cart-upsells » et copiez/collez le code suivant:

<style>
  .dgCartUpsell { text-align:center; margin:25px auto; max-width:1170px; }
  .dgCartUpsellCont { margin:0 auto; }
  .dgCartUpsellInner {  display:inline-flex; margin:0 auto; border:1px solid #f0f0f0; }
  .dgCartUpsellForm {  max-width:300px; padding:10px 15px; margin:10px; }
  .dgCartUpsellForm * { display:block; clear:both; width:100%; margin-bottom:15px; }
  .dgCartUpsell .dci-title { font-size: 16px; line-height: 21px; min-height: 45px; }
  .dgCartUpsellQty { display:none !important; }
  .dgCartUpsell input[type=number] { float:none; display:block; }
  .dgCartUpsell .btn-primary, .dgCartUpsell .btn-primary:hover { }
</style>

{% assign upsellCollection = "upsells" %}
{% assign upsellLimit = "4" -%}
{% assign upsellTitle = "Et si vous craquiez aussi pour... ?" %}
{% assign upsellAtc = "Ajouter au panier" %}


<div class="dgCartUpsell">

  <h2>{{ upsellTitle }}</h2>

  <div class="dgCartUpsellCont">
    {% for collection in collections  %}
    {% if collection.handle == upsellCollection %}

    {% for product in collection.products limit:upsellLimit %}

    <div class="dgCartUpsellInner">

      <form action="/cart/add" method="post" class="dgCartUpsellForm">
        <img class="dci-image" src="{{ product | img_url: '600x600', scale: 2 }}" alt="{{ product.title | escape }}" >
        <strong class="dci-title">{{ product.title }}</strong> 

        <select name="id" class="dci-product-variants" >
          {% for variant in product.variants %}
          {% if variant.available %}    
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
            {% if variant.title != "Default Title" %}{{ variant.title }} - {% endif %}
            {{ variant.price | money_with_currency }}            
          </option>
          {% else %}
          <option disabled="disabled">
            {{ variant.title }} - {{ 'products.product.sold_out' | t }}
          </option>
          {% endif %}
          {% endfor %}
        </select> 
        <div class="dgCartUpsellQty">
          <label for="quantity-{{forloop.index}}">Quantité</label>
          <input type="number" id="quantity-{{forloop.index}}" name="quantity-{{forloop.index}}" value="1" min="1" class="quantity-selector"> 
        </div>
        <button type="submit" name="add" class="btn btn-primary">{{ upsellAtc }}</button>
      </form>
    </div>
    {% endfor %}
    {% endif %}
    {% endfor %}
  </div>
</div>

Placement des upsells

Cette fois ci dans le dossier Templates ouvrez le fichier cart.liquid. Mettez vous tout en bas et copiez/collez le code suivant:

{% include 'dg-cart-upsells' %}

Fonctionnement et personnalisation du système d’upsells

Une fois le code installé vous allez devoir créer une collection d’upsell qui sera utilisée pour proposer des articles à vos clients.

Attention ! vous allez toujours proposer les mêmes produits car il faut savoir qu’au niveau d’un thème on ne peut pas proposer tel ou tel produit selon les produits achetés… En fait on le pourrait mais la on sort du cadre d’un tuto gratuit et il faudrait demander un développement spécifique 😉 bin quoi… faut bien que je gagner un peu ma vie hein 😀

A ce stade on va créer la collection en cliquant sur Produits – Collections – Créer une collection et intitulez-la « upsells » ensuite mettez les produits que vous souhaitez proposer en upsell au niveau du panier.

Côté personnalisation que peut-on faire ?

Je vous propose 4 options que nous allons détailler:

upsellCollection = « nom de votre collection ici upsell »
upsellLimit = « nombre de produit à afficher »
upsellTitle = « titre de la zone d’upsell »
upsellAtc = « Texte du bouton ajouter au panier »

Disclaimer… Fonctionne uniquement avec un panier de type page ! si vous avez un thème avec un panier modal (en popup) ou en drawer (colonne de droite qui s’ouvre) ce système ne fonctionnera pas !

Besoin de personnaliser un peu plus ?

Je vous invite à visionner la vidéo ci-dessous 😉

Ce tutoriel existe aussi en vidéo

Merci de me laisser une petite note 😉

[Note moyenne de: 4.9 sur 8 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.

« Comment supprimer le « Default Title » sur Shopify

Comment Arrondir les Boutons sur Shopify »

Cet article a 25 commentaires

AMINE OUZZANE
14 Déc 2020 Répondre

Comme toujours je te remercie infiniment, juste une petite remarque là l’espace ne s’applique pas même si g copier-coller g essayé avec 700 et même 1200 pour voir mais rien ne change
1. Dgeo Dev
  14 Déc 2020 Répondre
  
  Hello, cela dépend bcp de la structure du thème. le lien en MP au besoin et je regarderai
Will
10 Jan 2021 Répondre

Salut Diego,

Merci encore pour ton tuto !

Petite question par rapport au variant je crois, le fait qu’on puisse sélectionner le prix. Quand je supprime « » il ne reste que le prix qui s’affiche comme je le souhaite mais dans une couleur/police que je ne veux pas.. Comment simplement afficher le prix dans un cadre par exemple mais sans menu déroulant ou option ? Je sais pas si je suis clair…
Merci !
Brudy
18 Jan 2021 Répondre

Hello,
J’adore tes tutos.
Je ne comprend pas, tu as bien construis le code pour que l’upsell Collection puisse porter un autre nom que Upsell. En tout cas, de ma lecture de ton code.
Et pourtant ,impossible, elle marche bien avec Upsell, Upsells. Mais rien d’autre. Je t’avoue que je ne comprend pas, c’est bien cette condition qui détermine la collection appelée ? je suis perdu.
1. Dgeo Dev
  19 Jan 2021 Répondre
  
  Hello, oui un autre nom est possible mais dans ce cas il ne faut pas oublier de modifier la variable dans le code le upsellCollection 😉
Brudy
19 Jan 2021 Répondre

Juste pour être sur de bien saisir.
J’ai bien modifié ta variable UpsellCollection.
Donc théoriquement, et en voyant ta construction de code, c’est le nom de la collection que tu veux appeler.

Si je met « Cadeaux » par exemple, ma collection « Cadeaux » n’est pas appelée :'(
1. Dgeo Dev
  20 Jan 2021 Répondre
  
  Et sans la majuscule ?
  1. Brudy
    20 Jan 2021 Répondre
    
    Rien à faire, j’ai essayé dans tout les sens.
    Et je ne comprend pas ce qui l’empêche d’appeler une autre variable..
    1. Dgeo Dev
      22 Jan 2021 Répondre
      
      Etrange au besoin notre équipe pour intervenir. Nous contacter ici et expliquer le problème: speedecom.freshdesk.com
2. joel
  23 Jan 2021 Répondre
  
  Salut à tous, je suis dans le même cas !!! C’est la première fois que je n’arrive pas à mettre un code en suivant tes tutos !! Pour mon cas ça m’affiche juste » Et si vous craquiez aussi pour… ? » Pas les produits.
Nico
26 Mar 2021 Répondre

Salut, merci pour ce tuto !
Est-il possible de retirer le menu déroulant pour le prix et le remplacer par notre prix barré ?
Car j’ai mit « profitez de 20% » en en-tête, et c’est bien le prix avec la promo qui s’affiche sur les produits, mais du coup mes clients pourraient penser que c’est 20% sur le prix affiché, cela peut porter à confusion.
Je sais pas si tu vois ce que je veux dire, j’aimerai savoir si on peut afficher le prix barré sur l’upsell.
Merci de ta réponse !
1. Dgeo Dev
  26 Mar 2021 Répondre
  
  Hello, c’est théoriquement jouable en remplaçant variant.price par variant.compare_at_price
Will
8 Avr 2021 Répondre

Comment faire un upsell en drawer ?
1. Dgeo Dev
  10 Avr 2021 Répondre
  
  Hello, il faut trouver le fichier du drawer 🙂 généralement c’est généré en JS du coup c’est un peu compliqué à mettre en place.
Corinne Renault
1 Mai 2021 Répondre

Bonjour,

Est ce que ça fonctionne pour un site mono produit, et utiliser cette upsell pour une produit complementaire?
J’ai essayé, la phrase s’affiche au bonne endroit mais je n’ai pas mon produit qui s’affiche!
j’ai refait la manip mais toujours rien!
1. Dgeo Dev
  2 Mai 2021 Répondre
  
  Bonsoir, étrange ca devrait fonctionner…
Arnaud
2 Sep 2021 Répondre

Merci pour le tuto, le snippet est efficace et très propre. J’en ai profité pour ajouter l’url sur les images des produits proposés en upsell si le client souhaite les voir de plus près.
1. Dgeo Dev
  2 Sep 2021 Répondre
  
  Merci pour le com et super pour l’idée des urls 🙂
Emma
29 Oct 2022 Répondre

Comment ne plus afficher l’upsell si j’ajoute au panier le produit proposé (sachant que j’ai un seul produit dans la collection)
Ziggypop
5 Nov 2022 Répondre

Bonjour,
Mon fichier cart.liquid est en .json. Comment faire ?
Merci
1. Dgeo Dev
  7 Nov 2022 Répondre
  
  Hello, dans ce cas regarder dans sections un cart-template.liquid ou main-cart.liquid
fabrice
6 Avr 2023 Répondre

Très instructif… j’ai bien aimé..
plus d’astuce prochainement…
1. Dgeo Dev
  7 Avr 2023 Répondre
  
  Hello, merci c’est sympa 😉
mahdi
25 Juil 2023 Répondre

cart.liquid / cart-template.liquid ou main-cart.liquid. ne sont pas disponible dans la theme dawn est ce que je peux essaye sur
main-cart-items.liquid
1. Dgeo Dev
  27 Août 2023 Répondre
  
  Hello, oui 🙂

Comment créer le système ?

Création du Snippet

Placement des upsells

Fonctionnement et personnalisation du système d’upsells

Côté personnalisation que peut-on faire ?

Besoin de personnaliser un peu plus ?

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cet article a 25 commentaires

AMINE OUZZANE

Dgeo Dev

Will

Brudy

Dgeo Dev

Brudy

Dgeo Dev

Brudy

Dgeo Dev

joel

Nico

Dgeo Dev

Will

Dgeo Dev

Corinne Renault

Dgeo Dev

Arnaud

Dgeo Dev

Emma

Ziggypop

Dgeo Dev

fabrice

Dgeo Dev

mahdi

Dgeo Dev

Laisser un commentaire Annuler la réponse

Comment créer le système ?

Création du Snippet

Placement des upsells

Fonctionnement et personnalisation du système d’upsells

Côté personnalisation que peut-on faire ?

Besoin de personnaliser un peu plus ?

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment créer un bouton vibrant sur shopify ?

Comment Créer un Loader Animé sur Shopify

Comment mettre automatiquement à jour le prix du panier au changement de quantité sur shopify ?

Cet article a 25 commentaires

AMINE OUZZANE

Dgeo Dev

Will

Brudy

Dgeo Dev

Brudy

Dgeo Dev

Brudy

Dgeo Dev

joel

Nico

Dgeo Dev

Will

Dgeo Dev

Corinne Renault

Dgeo Dev

Arnaud

Dgeo Dev

Emma

Ziggypop

Dgeo Dev

fabrice

Dgeo Dev

mahdi

Dgeo Dev

Laisser un commentaire Annuler la réponse

Panier