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 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 Snippets et cliquez sur « Ajouter un nouveau snippet », 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 qui arrivera très bientôt 😉

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

Laisser un commentaire

Fermer le menu

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

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

S'abonner à la chaine