LogoLogo
SucheService PortalWissensdatenbankSonstigesEnglishSupport anfordern
  • Willkommen
  • Elemente in der Storefront
    • Header
    • Footer
    • Kategorieseiten
    • Produktseiten
  • Zusatzfunktionen
    • CMS-Erweiterungen
      • CMS-Blöcke
        • Hero-Slider
          • Hero-Slider (2x)
          • Hero-Slider (3x)
          • Hero-Slider (4x)
        • Teaser
        • Banner
        • Spalten
          • Eine Spalte
          • Zwei Spalten
          • Zwei Spalten (auf Handys getauscht)
          • Zwei Spalten, 3-9
          • Zwei Spalten, 4-8
          • Zwei Spalten, 5-7
          • Zwei Spalten, 7-5
          • Zwei Spalten, 8-4
          • Zwei Spalten, 9-3
          • Drei Spalten
          • Drei Spalten, 2-2-8
          • Drei Spalten, 2-8-2
          • Drei Spalten, 3-3-6
          • Drei Spalten, 3-6-3
          • Drei Spalten, 6-3-3
          • Drei Spalten, 8-2-2
          • Vier Spalten
          • Fünf Spalten
          • Sechs Spalten
          • Sechs Spalten (Individuell)
        • Grids
          • Grid 'Modern'
          • Grid 'Modern' (getauscht)
          • Grid 'One'
          • Grid 'One' (getauscht)
          • Grid 'Two'
          • Grid 'Two' (swapped)
          • Grid 'Three'
          • Grid 'Three' (swapped)
          • Grid 'Four'
          • Grid 'Four' (swapped)
          • Grid 'Five'
          • Grid 'Five' (swapped)
          • Grid 'Six'
          • Grid 'Six' (swapped)
        • Text & Bild
          • Bild & Text überlagernd
        • Kategorieseite
        • Produktseite
          • Produktname (ohne Hersteller-Logo)
          • Galerie und Buybox (mit Produktname)
          • Galerie und Buybox (mit Produktname & Hersteller-Logo)
          • Produktbeschreibung und -bewertungen (Accordion)
        • Sidebar
          • Unterkategorie-Navigation (Sidebar)
        • Sale
          • Hero-Countdown
          • Countdown-Banner
          • Countdown-Banner (kompakt)
          • Discount-Banner
        • Verschiedenes
          • Breadcrumb-Navigation
          • Testimonial (Kundenrezension)
          • Testimonials (Vier Spalten)
          • Individueller Code (HTML/CSS/JS)
      • CMS-Elemente
        • Hero-Slider
          • Call-to-Action-Slide (Hero-Slider)
          • Text-Slide (Hero-Slider)
          • Image-Slide (Hero-Slider)
        • Teaser
          • Text-Teaser
          • Text-Teaser (verziert)
          • Button-Teaser
          • Call-to-Action
          • Hover-Box
          • Image-Teaser
          • Hero-Teaser
          • Advanced-Teaser
          • Classic-Teaser
          • Modern-Teaser
          • Runder Teaser
        • Banner
          • Image-Banner
          • Parallax-Banner
          • Hero-Banner
          • Advanced-Banner
        • Text & Bild
          • Bild & Text überlagernd
        • Kategorieseite
          • Unterkategorien im Listing
          • Unterkategorien im Listing (Modern)
        • Produktseite
          • Galerie (Grid)
          • Produktbeschreibung und -bewertungen (Accordion)
        • Sidebar
          • Unterkategorie-Navigation
        • Sale
          • Hero-Countdown (Überschrift)
          • Countdown-Banner
          • Countdown-Banner (kompakt)
          • Discount-Banner
        • Verschiedenes
          • Breadcrumb-Navigation
          • Testimonial (Kundenrezension)
          • Individueller Code (HTML/CSS/JS)
    • Erweiterungen
      • Ankündigungsbanner
      • Checkout-Steps
      • Erlebniswelt-Header
      • Floating-Widget
      • Hero-Sektion
      • Hersteller in Listings
      • Individuelle Ankündigung
      • Kategorie hervorheben
      • Labels auf Produktseiten
        • Ausverkauft-Label
        • Nicht verfügbar-Label
        • Lagerbestand-Label
        • Lieferzeit-Label
        • Versandkostenfrei-Label
        • Vorbestellung-Label
      • Produkt-Badges
        • Ausverkauft-Badge
        • Lagerbestand-Badge
        • Neu-Badge
        • Rabatt-Badge
        • Topseller-Badge
        • Versandkostenfrei-Badge
      • Produkt-Datenblätter
      • Produkt-Downloads
      • Produkt-Kurzbeschreibung
      • Produkt-Spezifikationen
      • Produktnummer in Listings
      • Produktvideos
      • Quickview
      • Slideout-Communities
      • Social-Media-Links (Icons)
      • Social-Proofing
        • Verkäufe-Infotext
      • Tabs auf Produktseiten
        • Benutzerdefinierter-Tab
        • Datenblätter-Tab
        • Eigenschaften-Tab
        • Hersteller-Tab
        • Videos-Tab
      • Teilen-Links
      • Unterkategorien im Listing
      • USP-Bar
      • Vorteile auf Produktseiten
      • Zahlungsarten auf Produktseiten
    • Grafiken
      • Erlebniswelten
      • Flaggensymbole
      • Social-Icons
      • Versandarten-Logos
      • Zahlungsarten-Logos
    • Widgets
      • Auszeichnungen, Siegel oder Zertifikate
      • Communities bzw. Social Media
      • Footer-Navigation
      • Individueller Text
      • Newsletter
      • Service-Hotline
      • Standort bzw. Ladengeschäft
      • Über uns
      • Versandanbieter-Logos
      • Vorteile
      • Zahlungsanbieter-Logos
      • Zahlungs- und Versandarten
    • Zusatzfelder
      • Kategorien
        • Body-Klasse
        • Erlebniswelt-Header
        • Hero-Sektion
        • Kategorie hervorheben
        • Spalten pro Zeile
        • Unterkategorien im Listing
      • Produkte
        • Allgemein
          • Benutzerdefinierter-Tab – Text
          • Benutzerdefinierter-Tab – Titel
          • Hover-Bild
          • Kommentar
          • Kurzbeschreibung
          • Vorteile
          • Zusatzfeld 1
          • Zusatzfeld 2
          • Zusatzfeld 3
        • Datenblätter
          • Datenblätter (Text)
          • Datenblatt 1
          • Datenblatt 1 – Titel
          • Datenblatt 2
          • Datenblatt 2 – Titel
          • Datenblatt 3
          • Datenblatt 3 – Titel
        • Downloads
          • Download 1
          • Download 1 – Titel
          • Download 1 – Beschreibung
          • Download 2
          • Download 2 – Titel
          • Download 2 – Beschreibung
          • Download 3
          • Download 3 – Titel
          • Download 3 – Beschreibung
        • Videos
          • Produkt-Videos (Text)
          • Video 1
          • Video 1 – Titel
          • Video 2
          • Video 2 – Titel
          • Video 3
          • Video 3 – Titel
          • YouTube-Video(s)
          • Vimeo-Video(s)
        • Weiterführende Links
          • Link 1
          • Link 1 – Titel
          • Link 1 – Link in einem neuen Tab öffne
          • Link 2
          • Link 2 – Titel
          • Link 2 – Link in einem neuen Tab öffne
          • Link 3
          • Link 3 – Titel
          • Link 3 – Link in einem neuen Tab öffne
  • Mehr Wissen
    • Google Fonts
    • JavaScript-Plugins
    • Textbausteine
    • Versandarten
    • Zahlungsarten
  • Konfiguration
    • Layout
      • Hauptfarben
        • Konfiguration
      • Status-Ausgaben
        • Konfiguration
      • Typografie
        • Konfiguration
      • E-Commerce
        • Konfiguration
      • Bilder
        • Konfiguration
      • Layout
        • Konfiguration
      • Buttons
        • Konfiguration
      • Formulare
        • Konfiguration
      • Modals
        • Konfiguration
      • Produkt-Bewertung
        • Konfiguration
      • Tabellen
        • Konfiguration
    • Header
      • Layout
        • Konfiguration
      • Logo
        • Konfiguration
      • Top-Bar
        • Konfiguration
      • Suche
        • Konfiguration
      • Aktions-Buttons
        • Konfiguration
      • Top-Navigation
        • Konfiguration
      • Top-Navigation Flyout
        • Konfiguration
      • Sticky Top-Navigation (Basis-Header "Header 1" und "Header 2")
        • Konfiguration
      • Minimaler Header (im Checkout)
        • Konfiguration
      • Mobiler Header
        • Konfiguration
      • Erlebniswelt-Header
        • Konfiguration
    • Footer
      • Layout
        • Konfiguration
      • Oberer Bereich
        • Konfiguration
      • Mittlerer Bereich
        • Konfiguration
      • Unterer Bereich
        • Konfiguration
      • Inhalte zuweisen und anordnen
        • Konfiguration
      • Minimaler Footer (im Checkout)
        • Konfiguration
      • Logos-Footer
        • Konfiguration
      • Copyright-Footer
        • Konfiguration
    • Inhalt
      • Breadcrumb
        • Konfiguration
      • Cookie-Hinweis
        • Konfiguration
      • Offcanvas-Navigation
        • Konfiguration
      • Paginierung
        • Konfiguration
      • Produkt-Badges
        • Konfiguration
      • Scroll-Up Button
        • Konfiguration
      • Sliders
        • Konfiguration
    • Erlebniswelten
      • Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten)
        • Konfiguration
      • Bild-Slider (Kategorie "Bilder")
        • Konfiguration
      • Galerie (Kategorie "Bilder")
        • Konfiguration
      • Zwei Spalten, zentriertes Bild & Text (Kategorie "Text & Bild")
        • Konfiguration
      • Produkt-Slider (Kategorie "Commerce")
        • Konfiguration
      • Produkt-Filter (Kategorie "Sidebar")
        • Konfiguration
      • Kategorie-Navigation (Kategorie "Sidebar")
        • Konfiguration
    • Kategorieseiten
      • Layout (Layout-Typ "Standard")
        • Konfiguration
      • Layout (Layout-Typ "Großes Bild")
        • Konfiguration
      • Layout (Layout-Typ "Minimaler Inhalt")
        • Konfiguration
      • Produkt-Badges (in der Produkt-Box)
        • Konfiguration
      • Produkt-Box
        • Konfiguration
      • Produkt-Box (Layout-Typ "Standard")
        • Konfiguration
      • Produkt-Box Layout-Typ "Großes Bild")
        • Konfiguration
      • Produkt-Box (Layout-Typ "Minimaler Inhalt")
        • Konfiguration
    • Produktseiten
      • Layout
        • Konfiguration
      • Galerie
        • Konfiguration
      • Buybox
        • Konfiguration
      • Lieferinformationen-Labels (in der Buybox)
        • Konfiguration
      • Produkt-Badges (in der Galerie oder Buybox)
        • Konfiguration
      • Produkt-Spezifikationen (in der Buybox)
        • Konfiguration
      • Produktvideos (in Tabs)
        • Konfiguration
      • Social-Proofing (in der Buybox)
        • Konfiguration
      • Teilen-Links (in der Buybox)
        • Konfiguration
      • Vorteile (in der Buybox)
        • Konfiguration
      • Zahlungsanbieter-Logos (in der Buybox)
        • Konfiguration
      • Tabs
        • Konfiguration
      • Tab "Beschreibung"
        • Konfiguration
      • Tab "Eigenschaften"
        • Konfiguration
      • Tab "Produktvideos"
        • Konfiguration
      • Tab "Datenblätter"
        • Konfiguration
      • Tab "Benutzerdefinierter Inhalt"
        • Konfiguration
      • Tab "Hersteller"
        • Konfiguration
      • Cross-Selling
        • Konfiguration
    • Seiten
      • Allgemein
        • Konfiguration
      • Login
        • Konfiguration
      • Mein Konto
        • Konfiguration
      • Checkout
        • Konfiguration
    • Sidebar
      • Layout
        • Konfiguration
      • Sidebar-Widgets
        • Konfiguration
      • Sidebar-Widgets (Überschriften)
        • Konfiguration
      • Sidebar-Widgets: Inhalte zuweisen und anordnen
        • Konfiguration
    • Widgets
      • Footer-Navigation
        • Konfiguration
      • Auszeichnungen, Siegel oder Zertifikate
        • Konfiguration
      • Vorteile
        • Konfiguration
      • Communities bzw. Social Media
        • Konfiguration
      • Service-Hotline
        • Konfiguration
      • Standort bzw. Ladengeschäft
        • Konfiguration
      • Newsletter
        • Konfiguration
      • Zahlungsanbieter-Logos
        • Konfiguration
      • Versandanbieter-Logos
        • Konfiguration
    • Erweiterungen
      • Ankündigungsbanner (im Header)
        • Konfiguration
      • Checkout-Steps
        • Konfiguration
      • Individuelle Ankündigung (auf Produktseiten und im Checkout)
        • Konfiguration
      • Floating-Widget
        • Konfiguration
      • Hero-Sektion (auf Kategorieseiten)
        • Konfiguration
      • Unterkategorien im Listing (auf Kategorieseiten)
        • Konfiguration
      • Slideout-Communities
        • Konfiguration
      • USP-Bar
        • Konfiguration
    • Weiteres
      • Erweiterte Einstellungen
        • Konfiguration
      • Experten-Einstellungen
        • Konfiguration
      • Kompatibilität (HC-Architecture®)
        • Konfiguration
      • Beta
        • Konfiguration
      • Veraltet
        • Konfiguration
  • Sonstiges
    • Über ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Wissensdatenbank
    • ThemeWare® Video-Tutorial
    • ThemeWare® Utilities
    • 🇬🇧English
Powered by GitBook
LogoLogo

ThemeWare®

  • Über ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informationen

  • Datenschutz
  • Impressum
  • Kontakt
  • Newsletter

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH

On this page
  • Element konfigurieren
  • Konfiguration
  • HTML
  • CSS
  • JavaScript
  • Demo

Was this helpful?

  1. Zusatzfunktionen
  2. CMS-Erweiterungen
  3. CMS-Elemente
  4. Verschiedenes

Individueller Code (HTML/CSS/JS)

PreviousTestimonial (Kundenrezension)NextErweiterungen

Last updated 7 months ago

Was this helpful?

Hinweis: Dieses Element sowie dieser Artikel sind in Arbeit.

Das ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" ist ein CMS-Element mit welchem du individuellen HTML-, CSS- und JS-Code in deiner Erlebniswelt platzieren kannst.

Da durch individuellen Code potenziell gefährliche Schwachstellen entstehen können, richtet sich dieses Element an erfahrene Anwender bzw. Experten, die sicher im Umgang mit individuellen Programmierungen sind. Bist du nicht absolut sicher, was du tust, nutze den HTML-Editor eines beliebigen Text-Elementes von Shopware 6. Dieser Editor bereinigt deinen individuellen Code automatisch.

Beta: Bitte beachte, dass sich dieses Element in einer Testphase befindet, probiere es gerne einmal aus.

Achtung: Dieses CMS-Element richtet sich an Experten die sicher im Umgang mit individuellem Code sind. Bitte beachte, dass durch individuellen Code potenziell gefährliche Schwachstellen entstehen können!

Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.


Element konfigurieren

Die ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" kannst du wie folgt konfigurieren:

  1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren

  2. Fahre mit der Maus über das entsprechende CMS-Element

  3. Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren

  4. Es öffnet sich das Pop-up "Element-Einstellungen"

  5. Nehme die gewünschten Änderungen vor

  6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.


Konfiguration

Die Konfiguration vom CMS-Element "Individueller Code" ist recht selbsterklärend. Es gibt keine Pflichtfelder.

HTML

Im Tab "HTML" hinterlegst du deinen individuellen HTML-Code.

Individueller HTML-Code

Im Abschnitt "Individueller HTML-Code" kannst du den gewünschten HTML-Code hinterlegen.

Achtung: Potenziell gefährlicher Code wird nicht bereinigt und automatisch aus dem Editor entfernt!

CSS

Im Tab "CSS" kannst du deinen individuellen CSS-Code hinterlegen. Dein CSS-Code wird automatisch mit einem style-Tag umschlossen eingefügt.

Du kannst du deinen CSS-Code natürlich auch über das Feld "Individueller HTML-Code" integrieren, das Feld "Individueller CSS-Code" dient hauptsächlich der besseren Übersicht.

Individueller CSS-Code

Im Abschnitt "Individueller CSS-Code" kannst du den gewünschten CSS-Code hinterlegen.

JavaScript

Im Tab "JavaScript" kannst du deinen individuellen JavaScript-Code hinterlegen. Der JS-Code wird automatisch mit einem script-Tag umschlossen eingefügt.

Du kannst du deinen JS-Code natürlich auch über das Feld "Individueller HTML-Code" integrieren, das Feld "Individueller JavaScript-Code" dient hauptsächlich der besseren Übersicht.

Individueller JavaScript-Code

Im Abschnitt "Individueller JavaScript-Code" kannst du den gewünschten JavaScript-Code hinterlegen.


Demo

Anwendungsbeispiele findest du in unseren Demoshops:

Demo folgt...

ThemeWare® CMS-Element "Individueller Code (HTML/CSS/JS)" konfigurieren