Within styles.scss below

.section.cart-area div.cart_inner-footer-cta {
  padding: 2rem 0 0;
}

Add the following code:

/* Zapiet */
.cart-mobile-header {
  display: none;
}
.desktop-cart-pricing {
  display: block;
}
.desktop-line-items {
  display: block;
}
.desktop-cart-cta {
  display: block;
}
.mobile-cart-cta {
  display: none;
}
.mobile-line-items {
  display: none;            
}
.mobile-line-items .table-responsive-sm {
  display: none;
}
.mobile-cart-footer {
  display: none;
}
/* Eof Zapiet */

Within responsive.scss below

section.cart-area.desktop {
   display: block;
}

Add the following code:

/* Zapiet */
section.cart-area.desktop {
  display: none;
}
.cart-mobile-header {
  display: block;
}
.desktop-cart-pricing {
  display: none;
}
.desktop-line-items {
  display: none;
}
.desktop-cart-cta {
  display: none;
}
.mobile-cart-cta {
  display:block;
}
.mobile-line-items {
display: block;            
}
.mobile-line-items .table-responsive-sm {
  display: inline-table;
}
.mobile-cart-footer {
  display: block;
}
/* Eof Zapiet */

Update the cart.liquid file with the following (this is a french version):

<!-- //Desktop -->
<section class="cart-area section desktop">
<div class="cart shopping">
<div class="container">
<!-- //Title -->
<div class="cart__title">
<h1 class="text-center">Votre panier</h1>
</div>

{% if cart.item_count > 0 %}
<div class="cart__inner-container">
<div class="row justify-content-center">
<div class="col-lg-10">
                            <div class="cart-mobile-header">
                              <p class="c__light mgb-10">*Frais de port et remises calculés à la caisse</p>
                            </div>
                         
<form  action="/cart" method="post">
                                <div class="desktop-line-items">
                                  <table class="table table-responsive-sm">
                                      <thead>
                                          <tr>
                                              <th scope="col">Produit</th>
                                              <th scope="col">Prix unitaire</th>
                                              <th scope="col">Qté</th>
                                              <th scope="col">Total</th>
                                          </tr>
                                      </thead>

                                      <tbody>
                                          {% for line_item in cart.items %}
                                          <tr>
                                              <td>
                                                  <a href="{{line_item.url}}">
                                                      <img width="140" src="{{line_item.image | product_img_url: '1920x'}}" alt="image produit">
                                                      <div class="product-description">
                                                          <h2 class="product-title">{{line_item.product.title}}</h2>
                                                          <p class="c__light mgb-10">{{line_item.variant.title}}</p>
                                                      <div class="c__light">
                                                      {% for p in line_item.properties %}
                                                         {% unless p.first == "_ZapietId" %}
                                                          <div class='bold_option_line'><span class="bold_option_title">{{ p.first | replace: '__', '' | replace: '&amp;', '&' }}</span><span class="bold_option_seperator">: </span>
                                                              <span class="bold_option_value" >{{ p.last | replace: '&amp;', '&' | replace: '&lt;', '<' | replace: '&gt;', '>'  }}</span>
                                                          </div>
                                                          {% endunless %}
                                                      {% endfor %}
                                                      </div>
                                                      <a class="c__red" href="/cart/change?line={{ forloop.index }}&quantity=0" rel="{{ item.id }}">Retirer</a>
                                                      </div>
                                                  </a>
                                              </td>
                                              <td>{{line_item.variant.price | money_without_currency}} €</td>
                                              <td><input width="60" type="number" name="updates[]" id="qty-input" class="form-control" value={{line_item.quantity}} min="0" pattern="[0-9]*"></td>
                                              <td>{{line_item.line_price | money_without_currency}} €</td>
                                          </tr>
                                          {% endfor %}
                                      </tbody>
                                  </table>
                                </div>
                                <!-- Eof desktop items -->
                             
                                <div class="mobile-line-items">
                                  <table class="table table-responsive-sm">
                                      <tbody>
                                          {% for line_item in cart.items %}
                                              <tr>
                                                  <td>
                                                      <img src="{{line_item.image | product_img_url: '1920x'}}" alt="image produit">
                                                  </td>
                                                  <td>
                                                      <div class="product-description">
                                                          <h2 class="product-title">{{line_item.product.title}}
                                                              {% if line_item.quantity > 1 %}
                                                              <span class="medium-up--hide">(x{{ line_item.quantity }})</span>
                                                              {% endif %}
                                                          </h2>
                                                          <p class="mgb-10">{{line_item.variant.price | money_without_currency}} € | <span class="c__light">{{line_item.variant.title}}</span></p>
                                                          {% unless line_item.variant.title contains 'Default' %}
                                                          <div class="c__light">
                                                          {% for p in line_item.properties %}
                                                              {% unless p.first == "_ZapietId" %}
                                                              <div class='bold_option_line'><span class="bold_option_title">{{ p.first | replace: '__', '' | replace: '&amp;', '&' }}</span><span class="bold_option_seperator">: </span>
                                                                  <span class="bold_option_value" >{{ p.last | replace: '&amp;', '&' | replace: '&lt;', '<' | replace: '&gt;', '>'  }}</span>
                                                              </div>
                                                              {% endunless %}
                                                          {% endfor %}
                                                          </div>
                                                          {% endunless %}
                                                          <div class="product-price">
                                                              <a class="c__red" href="/cart/change?line={{ forloop.index }}&quantity=0" rel="{{ line_item.id }}"><u>Retirer</u></a>
                                                          </div>
                                                      </div>

                                                  </td>
                                                  <td>
                                                      <input width="40" type="number" name="updates[]" id="qty-input" class="form-control" value={{line_item.quantity}} min="0" pattern="[0-9]*">
                                                  </td>
                                              </tr>

                                          {% endfor %}
                                      </tbody>
                                  </table>
                                </div>

                                <div class="desktop-cart-pricing">
                                  <div class="cart_inner-footer">
                                      <div class="row justify-content-end">
                                          <div class="col-lg-8">
                                              <p class="c__light">*Frais de port et remises calculés à la caisse</p>
                                          </div>
                                          <div class="col-lg-3">
                                              <p class="cart__inner-item-price f__medium">Sous-total</p>
                                          </div>
                                          <div class="col-lg-1">
                                              <p class="cart__inner-item-price c__red text-right">{{cart.total_price | money_without_currency}} €</p>
                                          </div>
                                      </div>
                                  </div>
                                </div>
                         
                                <!-- Zapiet | Store Pickup + Delivery -->
                                <div id="storePickupApp"></div>
                                <!-- Zapiet | Store Pickup + Delivery -->
       
                                <div class="mobile-cart-cta">
                                  <footer>
                                    <textarea class="form-control w-100 mgb-0" name="note" id="" cols="30" rows="3" placeholder="Précisez ici les spécifités de votre commande (allergènes, remplacement d'ingrédients..."></textarea>

                                    <div class="cart__inner-total text-center">
                                        <span class="cart__inner-item-price f__medium">Sous-total : </span>
                                        <span class="cart__inner-item-price c__red text-right">{{cart.total_price | money_without_currency}} €</span>
                                    </div>

                                    <p class="text-center">
                                        <button type="submit" name="checkout" class="btn btn-primary w120">Payer</button>
                                        <a href="/collections/semaine-en-cours" title="Continuer le shopping" class="btn-primary-bordered mgt-10"><u>Continuer mes achats</u></a>
                                    </p>

                                    <button type="submit" name="update" class="c__green" id="cart_update" value="Mettre à jour"></button>
                                  </footer>
                                </div>
                             
<div class="desktop-cart-cta cart_inner-footer-cta">
<div class="row">
<div class="col-lg-6">
<textarea class="form-control w-100 mgb-0" name="note" id="" cols="30" rows="3" placeholder="Précisez ici les spécifités de votre commande (allergènes, remplacement d'ingrédients..."></textarea>
</div>
<div class="col-lg-6">
<div class="row justify-content-end">
                                             
<a href="/collections/all" title="Continuer le shopping" class="btn btn-primary-bordered mgr-10">Continuer mes achats</a>
<button type="submit" name="checkout" class="btn btn-primary w120">Payer</button>
<button type="submit" name="update" class="c__green hide" id="cart_update" value="Mettre à jour"></button>
</div>
                                         
</div>
</div>
</div>
</form>
</div>
</div>
</div>
{% else %}
<div class="cart__not-found text-center">
<p class="mgb-20">Votre panier est vide pour le moment.</p>
<p><a class="btn btn-primary" href="/collections/all">Continuer mes achats</a></p>
</div>
{% endif %}
</div>
</div>
</section>
Did this answer your question?