Ajouter un lien de poursuite des achats à votre panier

Attention

Les thèmes vintage ne sont pas disponibles dans la Boutique des thèmes. Ces thèmes ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour que des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pourrez peut-être contacter l’assistance de Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. Pour plus d’informations, voir Assistance par rapport aux thèmes.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorez les personnalisations de thème Online Store 2.0

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.

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

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

Bureau

1. Depuis votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.

2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur Gérer les thèmes.

4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.

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. Recherchez 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 :

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

### For a link that goes to your home page

To add a link that goes to your home page, paste the following code on a new line either before or after the code for the **Checkout** button:

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

### For a link that goes to the last collection viewed

To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the **Checkout** button:

<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> près du 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 :

Remarque

L’ajout de cette classe n’aura aucun effet sur Boundless.

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>