Aide
Se connecter

Personnalisation ou suppression d’un Bouton d’achat, d’une collection intégrée ou d’un panier intégré

Vous pouvez modifier l’apparence ou le comportement d’un Bouton d’achat, d’une collection intégrée ou d’un panier intégré en modifiant son code d’intégration dans le code source HTML de votre page web. Vous pouvez également supprimer une intégration en retirant le code de votre page web.

Un Bouton d’achat affiche un produit avec un bouton d’achat. Une collection intégrée affiche plusieurs produits. Un panier intégré affiche un panier autonome que les clients peuvent utiliser sur différentes pages.

Le code d’intégration est l’extrait de code que vous avez copié depuis votre interface administrateur Shopify et collé dans le code HTML de votre page web lorsque vous avez créé le Bouton d’achat ou le panier. Le code d’intégration est rédigé en JavaScript, le langage de programmation utilisé pour ajouter des fonctionnalités interactives aux pages web.

Sur cette page

Comprendre le code d’intégration du Bouton d’achat

Chaque Bouton d’achat est composé d’éléments distincts appelés composants. Un composant est une section nommée du code d’intégration qui contrôle une partie de l’expérience du Bouton d’achat. Par exemple, lorsque vous ajoutez un produit avec un panier à votre page web, le code d’intégration génère les composants suivants :

  • un composant product, qui affiche les informations sur le produit et le bouton d’achat
  • un composant cart, qui affiche le contenu du panier
  • un composant de panier toggle, qui affiche l’icône permettant d’ouvrir le panier

Si le composant de votre produit ouvre une fenêtre contextuelle de détails du produit, le code d’intégration génère deux composants supplémentaires : un composant modal pour la fenêtre contextuelle elle-même et un composant modalProduct pour les informations sur le produit qui s’y trouvent.

Dans l’extrait de code suivant, il existe des composants distincts pour le product et le cart :

ShopifyBuy.UI.onReady(client).then(function (ui) {
  ui.createComponent('product', {
    id: 12345,
    options: {
      product: {
        buttonDestination: 'cart',
        contents: {
          description: true
        },
        text: {
          button: 'Add to Cart'
        },
        styles: {
          button: {
            'background-color': 'blue'
          }
        }
      },
      cart: {
        styles: {
          button: {
            'background-color': 'orange'
          }
        }
      }
    }
  });
});

Chaque composant est configuré par le biais d’un objet de configuration dans le code d’intégration. Un objet est un groupe structuré de paramètres, formaté sous forme de liste de paires clé-valeur :

  • Une clé est le nom d’un paramètre, par exemple buttonDestination.
  • Une valeur correspond au réglage attribué au paramètre, par exemple 'cart'.

Un objet ressemble à une feuille de calcul : chaque clé correspond à un nom de colonne, et chaque valeur au contenu d’une cellule. Pour modifier l’apparence ou le comportement de vos Boutons d’achat, modifiez les clés et les valeurs dans les objets de configuration.

Chaque composant possède de nombreuses clés modifiables. Pour obtenir la liste complète des clés modifiables, consultez la documentation pour les développeurs. Pour configurer une clé qui ne figure pas encore dans votre code d’intégration, ajoutez-la à l’objet correspondant. Pour voir un exemple, reportez-vous à la section Modifier la mise en page d’un produit intégré.

Personnaliser les styles des composants

Chaque composant possède un objet de configuration imbriqué, styles, qui contrôle l’apparence du composant. Un objet imbriqué est un objet placé à l’intérieur d’un autre objet.

L’objet styles utilise le CSS, le langage permettant de décrire l’aspect visuel des éléments d’une page web. Chaque clé de premier niveau de l’objet styles représente un élément du composant, comme le titre ou le bouton. Dans cette clé, chaque clé imbriquée est une propriété CSS (par exemple, background-color ou border) et la valeur correspond à une valeur CSS.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

N’importe quelle propriété CSS valide peut être ajoutée à styles. Assurez-vous que les noms de propriétés comportant des tirets sont placés entre guillemets.

Pour plus d’informations sur la personnalisation CSS, consultez la documentation pour les développeurs.

Composants de collection intégrée

Les collections intégrées utilisent les mêmes objets de configuration que les Boutons d’achat. Pour modifier la mise en page ou d’autres propriétés des produits de la collection, trouvez l’objet de configuration product et modifiez-le de la même manière qu’un produit intégré. Pour modifier les propriétés de la collection elle-même, telles que le texte du bouton Page suivante, modifiez plutôt l’objet de configuration productSet.

Certaines clés, comme le texte d’un composant, sont configurées par le biais d’objets imbriqués. Par exemple, le texte du bouton Page suivante se trouve dans l’objet text du composant productSet :

options: {
  productSet: {
    text: {
      nextPageButton: 'Continue'
    }
  }
}

Une fenêtre modale de détails du produit est une fenêtre contextuelle qui affiche des informations sur le produit. Pour rediriger votre client vers une fenêtre modale de détails du produit au lieu du panier, modifiez le code d’intégration du Bouton d’achat dans le code HTML source de votre page web.

Étapes :

  1. Ouvrez le code HTML de la page contenant l’intégration de produit que vous souhaitez modifier.
  2. Trouvez l’objet de configuration product.
  3. Trouvez la clé buttonDestination dans l’objet :
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Modifiez la valeur de cette clé pour 'modal', en incluant les guillemets :
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Enregistrez vos modifications.

Modifier la mise en page d’un produit intégré

Une mise en page horizontale d’un produit intégré place l’image à côté des détails du produit plutôt qu’au-dessus. Pour passer à cette mise en page, modifiez le code d’intégration de votre Bouton d’achat dans le code HTML source de votre page web.

Étapes :

  1. Ouvrez le code HTML de la page contenant l’intégration de produit que vous souhaitez modifier.
  2. Trouvez l’objet de configuration product.
  3. Ajoutez une clé layout, puis définissez la valeur sur 'horizontal'. Assurez-vous que la valeur inclut les guillemets et que la ligne précédente se termine par une virgule :
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. Enregistrez vos modifications.

Modifier l’apparence et le comportement d’un panier intégré

Pour modifier l’apparence ou le comportement d’un panier, modifiez l’objet de configuration cart dans votre code d’intégration.

Étapes :

  1. Ouvrez le code HTML de la page contenant le panier que vous souhaitez modifier.
  2. Trouvez l’objet de configuration cart dans votre code d’intégration :
options: {
      cart: {
        startOpen: false
      }
}
  1. Modifiez une clé existante ou ajoutez-en une nouvelle pour modifier l’apparence ou le comportement du panier. Pour consulter la liste complète des clés configurables, reportez-vous à la documentation pour les développeurs.
  2. Enregistrez vos modifications.

Suppression d’un bouton d’achat, d’une collection intégrée ou d’un panier intégré

Pour retirer un Bouton d’achat, une collection intégrée ou un panier intégré de votre page web, supprimez son code d’intégration du code HTML source.

Étapes :

  1. Ouvrez le code HTML source de la page web qui contient le bouton d’achat, la collection intégrée ou le panier intégré.
  2. Supprimez l’intégralité du code d’intégration dans le code HTML source, en commençant par <script data-shopify-buy-ui> et en terminant par </script>. Voici un exemple de code d’intégration de Bouton d’achat :
<script data-shopify-buy-ui>
   var scriptURL = "https://cndurl.com/buy-button-storefront.js";
    if (window.ShopifyBuy && window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      var script = document.createElement('script');
      script.async = true;
      script.src = scriptURL;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
      script.onload = ShopifyBuyInit;
    }

    function ShopifyBuyInit() {
      var client = ShopifyBuy.buildClient({
        apiKey: 'your-api-key',
        domain: 'your-store.myshopify.com',
        appId: '6'
      });

      ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
          id: 12345,
          options: {
            product: {
              buttonDestination: 'cart',
              contents: {
                description: true
              },
              text: {
                button: 'Add to Cart'
              },
              styles: {
                button: {
                  'background-color': 'blue'
                }
              }
            },
            cart: {
              styles: {
                button: {
                  'background-color': 'orange'
                }
              }
            }
          }
        });
      });
    }
</script>
  1. Enregistrez vos modifications.