Ajouter du HTML ou du CSS personnalisé au tiroir du panier

Utilisez d'abord les réglages intégrés pour les couleurs, les images et le texte. Le HTML et le CSS personnalisés sont disponibles pour les modifications nécessitant votre propre balisage ou style.

Ajouter un bloc HTML personnalisé

1. Modifiez votre panier et ouvrez Panier.
2. Utilisez Ajouter du HTML personnalisé dans la zone de contenu ou de pied de page.
3. Saisissez le balisage dans HTML, puis positionnez le bloc dans cette zone à l'aide de sa poignée de déplacement. Le champ est un éditeur de code avec des numéros de ligne et des balises colorées, Formater ajuste l'indentation.
4. Vérifiez la mise en page, enregistrez, puis consultez la vitrine.

Vous pouvez ajouter jusqu'à 10 blocs HTML personnalisés par zone. L'éditeur accepte jusqu'à 10 000 caractères par bloc ; la configuration complète du panier possède également une limite de taille.

Ajouter du CSS personnalisé

Ouvrez Style, faites défiler jusqu'à Avancé en bas, puis ouvrez CSS personnalisé. Limitez les règles au tiroir, par exemple avec #bxc-drawer, afin qu'elles ne modifient pas involontairement le reste de votre thème. Conservez une copie du CSS existant avant de le remplacer. Le champ accepte jusqu'à 10 000 caractères.

Le champ est un éditeur de code : il colore votre CSS, suggère des noms de propriétés pendant la saisie et marque en rouge une règle qu'il ne peut pas lire, afin qu'une accolade manquante soit signalée avant l'enregistrement. Formater ajuste l'indentation.

Essayez une note simple

Cet exemple ajoute une note de marque. Utilisez le bloc HTML pour son contenu :

<p class="aurelia-cart-note">
  <strong>Aurelia Botanicals</strong><br>
  Everyday skincare essentials.
</p>

Ajoutez ensuite une règle limitée dans le CSS personnalisé pour donner une bordure gauche à cette note :

#bxc-drawer .aurelia-cart-note {
  border-left: 3px solid #334fb4;
  padding-left: 12px;
}

Enregistrez et vérifiez la note, les commandes des produits et le bouton de paiement sur ordinateur et téléphone.

Le comportement de l'aperçu et celui de la vitrine diffèrent

L'aperçu affiche la mise en page du HTML personnalisé, mais supprime les scripts et les attributs interactifs. Sur la vitrine, le balisage personnalisé est traité comme du code de thème. Les balises <script> insérées normalement ne sont pas exécutées automatiquement, ce champ n'est donc pas un installateur de scripts général.

Collez uniquement du code que vous comprenez ou que vous avez fait vérifier par votre développeur. Vérifiez le résultat publié sur ordinateur et mobile, notamment en ajoutant un article et en ouvrant le paiement. Si le tiroir ne fonctionne plus après une modification, supprimez ce code personnalisé, enregistrez à nouveau, puis testez encore.