> ## Documentation Index
> Fetch the complete documentation index at: https://storekit.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Stratégies de frais de livraison

> Optimisez vos frais de livraison et frais de service pour maximiser la conversion au paiement tout en couvrant vos coûts. Comparez les options forfait, palier, distance et livraison gratuite.

export const DeliveryFeeCalculator = () => {
  const [deliveryCost, setDeliveryCost] = useState(5.00);
  const [serviceCharge, setServiceCharge] = useState(0.99);
  const [deliveryFee, setDeliveryFee] = useState(2.99);
  const [monthlyOrders, setMonthlyOrders] = useState(500);
  const [selectedStrategy, setSelectedStrategy] = useState(null);
  const strategies = [{
    id: 'subsidy',
    name: 'Service Charge Subsidy',
    description: 'Small service charge on all orders, lower delivery fee',
    serviceCharge: 0.99,
    deliveryFee: deliveryCost - 1.50,
    icon: '💰'
  }, {
    id: 'balanced',
    name: 'Balanced Approach',
    description: 'Even split between service charge and delivery fee',
    serviceCharge: deliveryCost * 0.25,
    deliveryFee: deliveryCost * 0.65,
    icon: '⚖️'
  }, {
    id: 'full-recovery',
    name: 'Full Cost Recovery',
    description: 'Pass full delivery cost to customer',
    serviceCharge: 0,
    deliveryFee: deliveryCost,
    icon: '📊'
  }, {
    id: 'aggressive',
    name: 'Conversion Focused',
    description: 'Minimise visible fees, maximise conversions',
    serviceCharge: 1.49,
    deliveryFee: Math.max(0, deliveryCost - 2.50),
    icon: '🚀'
  }];
  const calculateMetrics = (sc, df) => {
    const customerTotal = sc + df;
    const yourRevenue = customerTotal;
    const subsidy = Math.max(0, deliveryCost - yourRevenue);
    const profit = yourRevenue - deliveryCost;
    const monthlySubsidy = subsidy * monthlyOrders;
    const monthlyRevenue = yourRevenue * monthlyOrders;
    return {
      customerTotal: customerTotal.toFixed(2),
      subsidy: subsidy.toFixed(2),
      profit: profit.toFixed(2),
      monthlySubsidy: monthlySubsidy.toFixed(0),
      monthlyRevenue: monthlyRevenue.toFixed(0),
      coveragePercent: (yourRevenue / deliveryCost * 100).toFixed(0)
    };
  };
  const customMetrics = calculateMetrics(serviceCharge, deliveryFee);
  return <div className="not-prose space-y-6">
      {}
      <div className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50">
        <h3 className="text-lg font-semibold text-zinc-900 dark:text-white mb-4">Your Delivery Costs</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
              Average delivery cost (£)
            </label>
            <input type="number" step="0.50" min="0" value={deliveryCost} onChange={e => setDeliveryCost(parseFloat(e.target.value) || 0)} className="w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white" />
          </div>
          <div>
            <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
              Monthly delivery orders
            </label>
            <input type="number" step="50" min="0" value={monthlyOrders} onChange={e => setMonthlyOrders(parseInt(e.target.value) || 0)} className="w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white" />
          </div>
        </div>
      </div>

      {}
      <div>
        <h3 className="text-lg font-semibold text-zinc-900 dark:text-white mb-4">Compare Strategies</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {strategies.map(strategy => {
    const metrics = calculateMetrics(strategy.serviceCharge, strategy.deliveryFee);
    const isSelected = selectedStrategy === strategy.id;
    return <div key={strategy.id} onClick={() => {
      setSelectedStrategy(strategy.id);
      setServiceCharge(strategy.serviceCharge);
      setDeliveryFee(strategy.deliveryFee);
    }} className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'}`}>
                <div className="flex items-start gap-3">
                  <span className="text-2xl">{strategy.icon}</span>
                  <div className="flex-1">
                    <h4 className="font-semibold text-zinc-900 dark:text-white">{strategy.name}</h4>
                    <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-1">{strategy.description}</p>
                    
                    <div className="mt-3 grid grid-cols-2 gap-2 text-sm">
                      <div className="bg-zinc-100 dark:bg-zinc-700/50 rounded px-2 py-1">
                        <span className="text-zinc-500 dark:text-zinc-400">Service: </span>
                        <span className="font-medium text-zinc-900 dark:text-white">£{strategy.serviceCharge.toFixed(2)}</span>
                      </div>
                      <div className="bg-zinc-100 dark:bg-zinc-700/50 rounded px-2 py-1">
                        <span className="text-zinc-500 dark:text-zinc-400">Delivery: </span>
                        <span className="font-medium text-zinc-900 dark:text-white">£{strategy.deliveryFee.toFixed(2)}</span>
                      </div>
                    </div>
                    
                    <div className="mt-2 flex items-center justify-between text-sm">
                      <span className="text-zinc-600 dark:text-zinc-400">Customer pays:</span>
                      <span className="font-bold text-lg text-zinc-900 dark:text-white">£{metrics.customerTotal}</span>
                    </div>
                    
                    <div className="mt-1 flex items-center justify-between text-sm">
                      <span className="text-zinc-600 dark:text-zinc-400">Cost coverage:</span>
                      <span className={`font-medium ${parseFloat(metrics.coveragePercent) >= 100 ? 'text-green-600 dark:text-green-400' : parseFloat(metrics.coveragePercent) >= 80 ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'}`}>
                        {metrics.coveragePercent}%
                      </span>
                    </div>
                  </div>
                </div>
              </div>;
  })}
        </div>
      </div>

      {}
      <div className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800">
        <h3 className="text-lg font-semibold text-zinc-900 dark:text-white mb-4">Custom Calculator</h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div>
            <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
              Service charge (£)
            </label>
            <input type="number" step="0.10" min="0" value={serviceCharge} onChange={e => {
    setServiceCharge(parseFloat(e.target.value) || 0);
    setSelectedStrategy(null);
  }} className="w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white" />
          </div>
          <div>
            <label className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
              Delivery fee (£)
            </label>
            <input type="number" step="0.10" min="0" value={deliveryFee} onChange={e => {
    setDeliveryFee(parseFloat(e.target.value) || 0);
    setSelectedStrategy(null);
  }} className="w-full px-3 py-2 rounded-lg border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white" />
          </div>
        </div>

        {}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          <div className="bg-zinc-50 dark:bg-zinc-700/50 rounded-lg p-3 text-center">
            <div className="text-xs text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Customer Pays</div>
            <div className="text-2xl font-bold text-zinc-900 dark:text-white mt-1">£{customMetrics.customerTotal}</div>
          </div>
          <div className="bg-zinc-50 dark:bg-zinc-700/50 rounded-lg p-3 text-center">
            <div className="text-xs text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Your Subsidy</div>
            <div className={`text-2xl font-bold mt-1 ${parseFloat(customMetrics.subsidy) > 0 ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}`}>
              £{customMetrics.subsidy}
            </div>
          </div>
          <div className="bg-zinc-50 dark:bg-zinc-700/50 rounded-lg p-3 text-center">
            <div className="text-xs text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Cost Coverage</div>
            <div className={`text-2xl font-bold mt-1 ${parseFloat(customMetrics.coveragePercent) >= 100 ? 'text-green-600 dark:text-green-400' : parseFloat(customMetrics.coveragePercent) >= 80 ? 'text-yellow-600 dark:text-yellow-400' : 'text-red-600 dark:text-red-400'}`}>
              {customMetrics.coveragePercent}%
            </div>
          </div>
          <div className="bg-zinc-50 dark:bg-zinc-700/50 rounded-lg p-3 text-center">
            <div className="text-xs text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Monthly Subsidy</div>
            <div className={`text-2xl font-bold mt-1 ${parseFloat(customMetrics.monthlySubsidy) > 0 ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}`}>
              £{customMetrics.monthlySubsidy}
            </div>
          </div>
        </div>
      </div>

      {}
      <div className="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
        <div className="flex items-start gap-3">
          <span className="text-xl">💡</span>
          <div>
            <h4 className="font-semibold text-blue-900 dark:text-blue-100">Recommendation</h4>
            <p className="text-sm text-blue-800 dark:text-blue-200 mt-1">
              {parseFloat(customMetrics.coveragePercent) >= 90 ? "Great balance! You're covering most of your costs while keeping fees reasonable." : parseFloat(customMetrics.coveragePercent) >= 70 ? "Good for conversions, but you're subsidising each delivery. Ensure higher order volume makes up for it." : "Heavy subsidy - consider increasing fees or focus on pickup orders to improve margins."}
            </p>
          </div>
        </div>
      </div>
    </div>;
};

La façon dont vous structurez les frais de livraison et de service impacte fortement à la fois vos taux de conversion au paiement et vos marges. Ce guide explore différentes stratégies pour trouver le bon équilibre pour votre activité.

## Comprendre vos frais

storekit propose deux types de frais configurables :

| Type de frais          | Portée                                            | Où le configurer             |
| ---------------------- | ------------------------------------------------- | ---------------------------- |
| **Frais de service**   | Montant fixe sur toutes les commandes             | Paramètres du magasin        |
| **Frais de livraison** | Par zone de livraison, variable selon la distance | Fulfillment > Delivery Zones |

Les deux apparaissent en lignes distinctes au paiement, pour que les clients voient exactement ce qu'ils paient.

## La psychologie des frais de livraison

Des frais de livraison élevés sont une cause majeure d'abandon de panier. Les études montrent que :

* Les clients s'attendent souvent à une livraison « gratuite » ou subventionnée en commande en ligne
* Un unique frais élevé est ressenti plus douloureusement que plusieurs petits frais
* Les clients acceptent plus facilement de petits frais de service que de gros frais de livraison

## Stratégie 1 : subvention par les frais de service (recommandée)

**Idéale pour :** magasins utilisant la livraison tierce (Uber Direct, Stuart, etc.) ou leurs propres chauffeurs

Ajoutez un petit frais de service fixe à toutes les commandes, puis réduisez les frais de livraison visibles par le client.

### Fonctionnement

1. Calculez votre coût moyen de livraison (par ex. 4,50 £ par commande)
2. Ajoutez un frais de service de 0,99 £ à toutes les commandes
3. Fixez les frais de livraison à 2,99 £ au lieu de 4,50 £

**Le client voit :**

* Frais de service : 0,99 £
* Livraison : 2,99 £
* **Total des frais : 3,98 £**

**Vous encaissez :** 3,98 £ sur vos 4,50 £ de coût (vous subventionnez 0,52 £ par commande)

<Tip>
  Un frais de service de 99p paraît insignifiant aux clients mais s'accumule. Sur 1 000 commandes/mois, cela représente 990 £ pour couvrir les coûts de livraison.
</Tip>

### Configuration

1. Allez dans **Settings > Store Settings**
2. Définissez le **Service Charge** au montant souhaité (par ex. 99)
3. Optionnellement, définissez un **Service Charge Label** (par ex. « Order fee » ou « Packaging »)
4. Allez dans **Fulfillment > Delivery Zones**
5. Réduisez les frais de livraison de chaque zone du montant du frais de service

## Stratégie 2 : frais de livraison par palier

**Idéale pour :** magasins couvrant un large rayon de livraison, où les coûts varient fortement

Fixez des frais différents par zone en fonction du coût réel, tout en utilisant un frais de service pour rendre la zone la plus proche très abordable.

### Exemple de configuration

| Zone   | Distance  | Coût réel | Frais de service | Frais de livraison | Total client |
| ------ | --------- | --------- | ---------------- | ------------------ | ------------ |
| Zone 1 | 0-2 miles | 3,50 £    | 0,99 £           | 1,99 £             | 2,98 £       |
| Zone 2 | 2-4 miles | 5,00 £    | 0,99 £           | 3,49 £             | 4,48 £       |
| Zone 3 | 4-6 miles | 7,00 £    | 0,99 £           | 4,99 £             | 5,98 £       |

Cette approche :

* Maintient une livraison locale très compétitive
* Répercute les coûts plus élevés sur les clients éloignés
* Assure un revenu constant de frais de service

## Stratégie 3 : seuil de livraison gratuite

**Idéale pour :** magasins souhaitant augmenter le panier moyen

Combinez une valeur de commande minimale avec des frais réduits ou gratuits.

### Exemple de configuration

* Frais de service : 1,49 £ (toutes commandes)
* Frais de livraison : 2,99 £ (commandes inférieures à 25 £)
* Livraison gratuite : commandes supérieures à 25 £

Configurez-la avec :

1. Un frais de service dans les paramètres du magasin
2. Un [code de remise](/docs/fr/guides/discounts/discount-codes) avec :
   * Type : Livraison gratuite
   * Commande minimum : 25 £
   * Auto-application : activée

<Note>
  Même en « livraison gratuite », vous conservez le revenu du frais de service pour compenser vos coûts.
</Note>

## Stratégie 4 : récupération complète des coûts

**Idéale pour :** restaurants premium où les clients s'attendent à payer pour un service de qualité

Répercutez la totalité du coût de livraison sur les clients, mais présentez-le de façon transparente.

### Configuration

* Frais de service : 0 £ (ou petit montant pour l'emballage)
* Frais de livraison : coût complet par zone

Fonctionne quand :

* Votre offre justifie un positionnement premium
* Les clients valorisent la qualité plus que le prix
* Vous voulez préserver des marges saines

<Warning>
  Cette approche donne généralement un taux de conversion plus faible, mais une marge plus élevée par commande. Testez avec précaution.
</Warning>

## Stratégie 5 : inciter au retrait

**Idéale pour :** magasins à fort passage ou souhaitant réduire le volume de livraison

Rendez le retrait nettement moins cher que la livraison pour encourager la collecte.

### Exemple

| Méthode   | Frais                               |
| --------- | ----------------------------------- |
| Retrait   | 0 £                                 |
| Livraison | 3,99 £ + 0,99 £ de frais de service |

Fonctionne bien en combinaison avec :

* Les précommandes en retrait
* Des récompenses de fidélité pour les commandes en retrait
* Un message bien visible « Prêt en X minutes »

## Calculer votre seuil de rentabilité

Pour trouver la bonne structure de frais, calculez vos coûts réels :

### Coûts de livraison tierce

| Prestataire         | Coût typique        | Notes                      |
| ------------------- | ------------------- | -------------------------- |
| Uber Direct         | 4-7 £ par livraison | Variable selon la distance |
| Stuart              | 4-6 £ par livraison | Basé sur des zones         |
| Chauffeurs internes | 2-5 £ par livraison | Carburant + salaire        |

### Formule de rentabilité

```
Seuil = Coût de livraison - Frais de service - Frais de livraison
```

**Exemple :**

* Coût de livraison : 5,00 £
* Frais de service : 0,99 £
* Frais de livraison : 2,99 £
* **Seuil : 1,02 £** (votre subvention par commande)

<Tip>
  Une petite subvention par commande est souvent rentable si elle augmente les taux de conversion et le volume total de commandes.
</Tip>

## Tester vos frais en A/B

Avant de vous engager sur une stratégie, testez différentes approches :

1. **Semaine 1-2 :** frais actuels (taux de conversion de référence)
2. **Semaine 3-4 :** frais de livraison réduits + frais de service
3. **Semaine 5-6 :** montant de frais de service différent

Suivez :

* Le taux de conversion au paiement
* Le panier moyen
* Le chiffre d'affaires total
* La marge par commande

## Erreurs fréquentes à éviter

| Erreur                           | Pourquoi c'est un problème           | Meilleure approche                                         |
| -------------------------------- | ------------------------------------ | ---------------------------------------------------------- |
| Frais de livraison très élevés   | Abandon de panier                    | Répartir en frais de service + frais de livraison plus bas |
| 0 £ de frais de service          | Manque à gagner                      | Même 0,49 £ fait la différence                             |
| Même frais pour toutes les zones | Pertes sur les livraisons lointaines | Zones à paliers                                            |
| Arrondi à l'entier               | Fait plus cher                       | Utilisez un pricing en £X.99                               |

## Point de départ recommandé

Pour la plupart des magasins, nous recommandons de démarrer avec :

| Paramètre                   | Valeur        |
| --------------------------- | ------------- |
| Frais de service            | 0,99 £        |
| Libellé du frais de service | « Order fee » |
| Livraison zone 1 (0-2 mi)   | 1,99-2,49 £   |
| Livraison zone 2 (2-4 mi)   | 2,99-3,49 £   |
| Commande minimum            | 10-15 £       |

Cela équilibre conversion et couverture des coûts, tout en gardant la flexibilité d'ajuster selon vos résultats.

## Comparer les stratégies

Utilisez ce calculateur pour comparer différentes structures de frais et voir l'impact sur vos coûts et ce que paient les clients.

<DeliveryFeeCalculator />

## Étapes suivantes

* [Configurez vos zones de livraison](/docs/fr/guides/fulfillment/delivery/delivery-zones) avec les frais choisis
* [Créez une promotion de livraison gratuite](/docs/fr/guides/discounts/promotions) pour les commandes à forte valeur
* [Configurez les valeurs minimales de commande](/docs/fr/guides/fulfillment/delivery/delivery-zones) par zone


## Related topics

- [Livraison en pub](/docs/fr/guides/use-cases/pub-delivery.md)
- [Frais de livraison dans les réductions](/docs/fr/guides/discounts/delivery-fee-inclusion.md)
- [Zones de livraison](/docs/fr/guides/fulfillment/delivery/delivery-zones.md)
- [Codes de réduction](/docs/fr/guides/discounts/discount-codes.md)
- [Intégration d'orchestration de livraison multi-coursiers Nash](/docs/fr/guides/integrations/delivery/nash.md)