Ajouter un lien de poursuite des achats à votre panier

Vous pouvez ajouter un lien Poursuivre vos achats à votre page de panier. Cela permet aux clients de retourner consulter vos produits facilement lorsqu'ils en ont ajouté un à leur panier. Vous pouvez insérer un lien qui les ramène à la page de votre catalogue, à votre page d’accueil ou à la dernière page de collection qu’ils ont consultée.

Poursuivre vos achats

Ajouter un lien de poursuite des achats à la page de votre panier

Pour ajouter un lien Poursuivre vos achats à la page de votre panier :

  1. Dans le répertoire Sections, cliquez sur cart-template.liquid. Si votre thème ne possède pas ce fichier, cliquez sur cart.liquid dans le répertoire Modèles.

  2. Trouvez le code du bouton de paiement en recherchant name="checkout" dans le fichier. La ligne de code du bouton de paiement varie selon le thème, mais elle ressemble à ceci :

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>
  1. L’étape suivante consiste à coller une nouvelle ligne de code pour créer un lien Poursuivre vos achats. Le code que vous collez dépend de la page à laquelle vous souhaitez que le lien conduise :

Pour créer un lien vers la page de votre catalogue

Pour ajouter un lien menant à la page de votre catalogue, collez le code suivant sur une nouvelle ligne, soit avant soit après le code du bouton de paiement :

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

Pour créer un lien vers votre page d’accueil

Pour ajouter un lien allant sur votre page d'accueil, collez le code suivant sur une nouvelle ligne, soit avant soit après le code du bouton Paiement :

<a href="/" title="Continue shopping">Continue shopping</a>

Pour créer un lien vers la dernière collection consultée

Pour ajouter un lien menant à la dernière collection consultée, collez le code suivant sur une nouvelle ligne, soit avant soit après le code du bouton de paiement :

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>
  1. Cliquez sur Enregistrer. Si vous avez ajouté un lien menant à la page de votre catalogue ou à votre page d’accueil, vous n'avez rien d'autre à faire. En revanche, si vous avez ajouté un lien conduisant à la dernière collection consultée, vous devez ajouter du JavaScript au code de votre thème. Pour ce faire, suivez les étapes ci-dessous.

  2. Dans le répertoire Mise en page, cliquez sur theme.liquid.

  3. Recherchez la balise de fermeture </body>, vers le bas du fichier. Collez le code suivant au-dessus de la balise de fermeture </body> :

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>
  1. Cliquez sur Save (Enregistrer).

Ajouter un style de bouton (facultatif)

Si vous utilisez un thème Shopify gratuit, vous pouvez appliquer un style à votre lien Poursuivre vos achats afin qu’il ressemble à un bouton. En ajoutant un attribut de classe au code du lien de votre bouton, vous pouvez assortir le style de ce dernier à celui des autres boutons de votre thème. Tous les thèmes gratuits de Shopify utilisent le même nom de classe pour les styles de boutons principaux, et la plupart utilisent le même nom de classe pour les styles de boutons secondaires.

Pour appliquer le style du bouton principal à votre lien de poursuite des achats :

Ajoutez l’attribut class="btn" à la ligne de code que vous avez collée pour ajouter un lien Poursuivre vos achats. Votre code doit ressembler à ceci :

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Pour appliquer le style de bouton secondaire à votre lien de poursuite des achats :

Si vous utilisez un thème gratuit autre que Supply, ajoutez l’attribut class="btn--secondary" à la ligne de code que vous avez collée pour créer un lien Poursuivre vos achats. Votre code doit ressembler à ceci :

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Si vous utilisez Supply, ajoutez l'attribut class="btn-secondary" à la ligne de code que vous avez collée pour ajouter un lien Poursuivre vos achats. Votre code doit ressembler à ceci :

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement