Modification ou suppression d'un bouton d'achat ou d'un panier incorporé

Les boutons d'achat et les paniers sont générés à partir des extraits de code que vous copiez depuis votre interface administrateur Shopify et que vous collez dans le code HTML source de votre page web. Ces extraits de code sont appelés codes incorporés. Si vous souhaitez modifier l'apparence ou le comportement d'un bouton ou d'un panier, vous devez modifier le code incorporé qui y est associé.

Supprimer un bouton d'achat, une collection intégrée ou un panier incorporé

Étapes :

  1. Ouvrez le code HTML source de la page web contenant le bouton d'achat, la collection intégrée ou le panier incorporé.
  2. Supprimez le code incorporé complet du code HTML source, en commençant par <script data-shopify-buy-ui> et en terminant par </script>. Le code incorporé d'un bouton d'achat ressemble à ce qui suit :
<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.

Le bouton d'achat, la collection intégrée ou le panier incorporé ne s'afficheront plus sur votre page web.

Modifier un bouton d'achat

Pour modifier l'apparence ou les paramètres d'un bouton d'achat existant, vous devez modifier le code incorporé que vous avez ajouté à votre code HTML source.

Chaque bouton d'achat est créé à partir de composants distincts dans le code incorporé. Par exemple, si vous ajoutez un produit avec un panier à votre page web, le code incorporé génère un composant product, un composant cart et un composant toggle de panier :

.

Si vous souhaitez que votre composant de produit ouvre une fenêtre modale avec les détails du produit, le code incorporé génère un composant modal et un composant modalProduct :

.

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'
          }
        }
      }
    }
  });
});

Ces composants sont configurés séparément via des objets de configuration dans le code intégré. Vous pouvez modifier l'apparence ou le comportement de vos boutons d'achat en modifiant les objets de configuration dans le code incorporé.

Chaque composant possède de nombreux attributs que vous pouvez modifier. Pour consulter une liste complète des options modifiables, consultez la documentation du développeur. Si vous souhaitez configurer une option qui ne s'affiche pas déjà dans votre code incorporé, vous devez ajouter la clé appropriée à l'objet approprié (voir l'exemple).

Modifier le style d'un composant

Chaque composant possède un objet de configuration styles imbriqués, que vous pouvez modifier ou ajouter pour changer l'apparence du composant. Ces styles sont formatés de la même manière que CSS. Chaque clé de niveau supérieur de l'objet styles représente un élément du composant, tel que le titre ou le bouton. Dans cet objet, chaque clé est une propriété CSS (par exemple, 'couleur-de-fond' ou 'bordure'), et la valeur est une valeur CSS.

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

Toute propriété CSS valide peut être ajoutée aux styles. Notez que les noms de propriété comportant des tirets doivent être mis entre guillemets.

Pour obtenir plus d'informations sur la personnalisation CSS, consultez la documentation du développeur.

Exemple : remplacer le lien vers le panier par les détails du produit modal

Dans cet exemple, vous pouvez modifier votre code incorporé actuel pour diriger votre client vers les détails d'un produit modal au lieu du panier :

  1. Ouvrez le code HTML de la page contenant le produit incorporé que vous souhaitez modifier.
  2. Trouvez l'objet de configuration du product.
  3. Trouvez la clé buttonDestination dans l'objet :
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. Changez la valeur de cette clé en 'modal' (n'oubliez pas d'inclure les guillemets) :
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. Enregistrez vos modifications.

Exemple : modifiez la disposition de votre produit incorporé

Dans cet exemple, vous pouvez modifier la disposition de votre produit incorporé afin que l'image s'affiche sur le côté au lieu d'en haut :

  1. Ouvrez le code HTML de la page contenant le produit incorporé que vous souhaitez modifier.
  2. Trouvez l'objet de configuration du product.
  3. Ajoutez une clé layout, puis définissez la valeur sur 'horizontal' :
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

  1. Enregistrez vos modifications.

Modifier le panier de votre site web

Si vous souhaitez modifier l'apparence ou le comportement du panier de votre site web, vous devez modifier l'objet de configuration du cart dans votre code incorporé.

Étapes :

  1. Ouvrez le code HTML de la page contenant le panier que vous souhaitez modifier.
  2. Trouvez l'objet de configuration du cart dans votre code incorporé :
options: {
      cart: {
        startOpen: false
      }
}
  1. Modifiez ou ajoutez la propriété que vous souhaitez modifier. Pour une liste complète des propriétés configurables, affichez la documentation du développeur.

  2. Enregistrez vos modifications.

Modifier une collection incorporée

Une collection incorporée peut être modifiée de façon similaire à un produit ou un panier. Pour modifier les propriétés des produits dans la collection (par exemple, la mise en page de chaque produit), vous devez rechercher l'objet de configuration du product et le modifier de la même manière qu'un produit incorporé. Pour modifier les propriétés de la collection elle-même (par exemple, le texte du bouton Page suivante ), modifiez la clé productSet à la place.

Certaines propriétés, telles que le texte d'un composant, sont configurées via des objets imbriqués, qui sont des objets qui apparaissent à l'intérieur d'autres objets. Par exemple, le texte du bouton Page suivante apparaît dans l'objet text du composant productSet :

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

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

Essayez gratuitement