Dodaj niestandardowy HTML lub CSS do wysuwanego panelu koszyka

Najpierw użyj wbudowanych ustawień kolorów, obrazów i tekstu. Niestandardowy HTML i CSS są dostępne w przypadku zmian wymagających własnych znaczników lub stylów.

Dodaj blok niestandardowego HTML

1. Edytuj koszyk i otwórz Koszyk.
2. Użyj opcji Dodaj niestandardowy HTML w obszarze treści lub stopki.
3. Wprowadź znaczniki w polu HTML, a następnie ustaw blok w wybranym miejscu za pomocą uchwytu przeciągania w tym obszarze. Pole jest edytorem kodu z numerami wierszy i kolorowymi znacznikami, a przycisk Formatuj porządkuje wcięcia.
4. Sprawdź układ, zapisz i sprawdź sklep.

W każdym obszarze możesz dodać maksymalnie 10 bloków niestandardowego HTML. Edytor przyjmuje maksymalnie 10 000 znaków na blok, a cała konfiguracja koszyka również ma limit rozmiaru.

Dodaj niestandardowy CSS

Otwórz Styl, przewiń na dół do sekcji Zaawansowane i otwórz Niestandardowy CSS. Ogranicz reguły do panelu, na przykład za pomocą #bxc-drawer, aby nie zmieniały przypadkowo stylu pozostałej części motywu. Zachowaj kopię istniejącego CSS przed jego zastąpieniem. Pole przyjmuje maksymalnie 10 000 znaków.

Pole jest edytorem kodu: koloruje CSS, podpowiada nazwy właściwości podczas pisania i oznacza na czerwono regułę, której nie może odczytać, dzięki czemu brakujący nawias klamrowy zostanie wykryty przed zapisaniem. Przycisk Formatuj porządkuje wcięcia.

Wypróbuj prostą notatkę

Ten przykład dodaje notatkę marki. Użyj bloku HTML, aby wprowadzić jej treść:

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

Następnie dodaj ograniczoną regułę w sekcji Niestandardowy CSS, aby nadać tej notatce obramowanie po lewej stronie:

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

Zapisz i sprawdź notatkę, elementy sterujące produktów oraz przycisk finalizacji zakupu na komputerze i telefonie.

Podgląd i działanie w sklepie różnią się

Podgląd wyświetla układ niestandardowego HTML, ale usuwa skrypty i interaktywne atrybuty. W sklepie niestandardowe znaczniki są traktowane jak kod motywu. Zwykłe wstawione znaczniki <script> nie są automatycznie wykonywane, dlatego to pole nie jest uniwersalnym instalatorem skryptów.

Wklejaj wyłącznie kod, który rozumiesz lub który został sprawdzony przez dewelopera. Sprawdź opublikowany rezultat na komputerze i urządzeniu mobilnym, w tym dodawanie produktu i otwieranie finalizacji zakupu. Jeśli po zmianie panel przestanie działać, usuń niestandardowy kod, zapisz ponownie i przetestuj jeszcze raz.