Modifier ou supprimer un bouton d'achat ou un panier intégré

Attention

Il s’agit d’un tutoriel avancé, qui n’est pas pris en charge par Shopify. La connaissance des langages de design web tels que HTML, CSS, JavaScript et Liquid est requise. Si vous avez besoin d’aide, vous pouvez engager un(e) Partenaire Shopify.

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 d'intégration. Si vous souhaitez modifier l'apparence ou le comportement d'un bouton ou d'un panier, vous devez modifier le code d'intégration qui y est associé.

Remarque

Ces instructions s'appliquent au code d'intégration du bouton d'achat que vous avez généré après le 26 septembre 2016. Si vous souhaitez modifier le code d'intégration que vous avez généré avant cette date, vous devez suivre les instructions existantes. Vous pouvez également recréer votre code d'intégration en utilisant le canal de vente du bouton d'achat.

Si vous n'êtes pas sûr(e) de la version du code d'intégration, vérifiez s'il commence par <script data-shopify-buy-ui>. Si c'est le cas, il s'agit de la dernière version. S'il commence par <div data-emebd_type=... ou un autre type de balise <div>, cela signifie que vous utilisez la version héritée.

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

Étapes :

1. Ouvrez le code HTML source de la page web contenant le bouton d'achat, la collection intégrée ou le panier intégré.
2. Supprimez le code d'intégration complet du code HTML source, en commençant par <script data-shopify-buy-ui> et en terminant par </script>. Le code d'intégration 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 intégré 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 d'intégration que vous avez ajouté à votre code HTML source.

Chaque bouton d'achat est créé à partir de composants distincts dans le code d'intégration. Par exemple, si vous ajoutez un produit avec un panier à votre page web, le code d'intégration 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 d'intégration 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 d'intégration. Vous pouvez modifier l'apparence ou le comportement de vos boutons d'achat en modifiant les objets de configuration dans le code d'intégration.

Conseil

Dans JavaScript, un objet est un ensemble de paires clé-valeur, au format {key: value}. Vous pouvez le voir comme un tableur : une clé est comme un nom de colonne, et une valeur est comme le contenu d'une cellule.

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 d'intégration, 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 d'intégration 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 intégré 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 intégré

Dans cet exemple, vous pouvez modifier la disposition de votre produit intégré 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 intégré 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'
      }
}

<aside class="note">
<h4>Remarque</h4>
<p>When you add the <code>&#39;horizontal&#39;</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>

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 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 du cart dans votre code d'intégration :

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 intégrée

Une collection intégré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 intégré. 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'
    }
  }
}