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
  • Suche anzeigen
  • Basiskonfiguration
  • Darstellungsart
  • Ecken
  • Abgerundete Ecken (individuelle Rundung)
  • Farbkonfiguration
  • Textfarbe (Input)
  • Rahmenfarbe (Input)
  • Hintergrundfarbe (Input)
  • Iconfabe (Button)
  • Rahmenfarbe (Button)
  • Hintergrundfarbe (Button)
  • Typografie
  • Textausrichtung
  • Darstellungsart 'Eingabefeld'
  • Maximale Breite
  • Maximale Breite @Desktop (≥1200px)
  • Darstellungsart 'Flyout-Suche'
  • Breite
  • Maximale Breite @Phone (Querformat) (≥576px)
  • Maximale Breite @Desktop (≥1200px)
  • Innenabstand
  • Hintergrundfarbe @Phone (<576px)
  • Hintergrundfarbe
  • Darstellungsart 'Vollbildsuche'
  • Overlay-Farbe
  • Unschärfe-Effekt [px] (Overlay)

Was this helpful?

  1. Konfiguration
  2. Header
  3. Suche

Konfiguration


Suche anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Suche"

Technischer Name: twt-header-search-show

Basiskonfiguration


Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Eingabefeld (Standard) • Flyout-Suche • Vollbildsuche • Global-Suche @Desktop (nur verfügbar mit "Header 1.1")

Beispiel Wert: Eingabefeld (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-search-type

Eingabefeld (Standard) Verfügbar in "Header 1.1" und "Header 1.2".

Flyout-Suche / Vollbildsuche Verfügbar in allen Headern.

Muss für "Header 2.1" und "Full-Width Sticky-Header" ausgewählt werden.

Global-Suche Verfügbar in "Header 1.1" im Desktop-Viewport. Nutzt die Farbe: "Layout" > "Hintergrundfarbe (Aktions-Buttons)".


Ecken

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet (Standard) • runde Ecken • individuelle Rundung

Beispiel Wert: nicht abgerundet (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-search-input-corner-type

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.


Abgerundete Ecken (individuelle Rundung)

Feldtyp: Nummernfeld

Beispiel Wert: 10

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-header-search-input-border-radius

Hinweis: Diese Konfiguration bezieht sich auf Ecken-Konfiguration "individuelle Rundung".

Farbkonfiguration


Textfarbe (Input)

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-input-color


Rahmenfarbe (Input)

Feldtyp: Farbauswahl

Beispiel Wert: #e4e7ea

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-input-border-color


Hintergrundfarbe (Input)

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-input-background-color


Iconfabe (Button)

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-btn-icon-color


Rahmenfarbe (Button)

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-btn-border-color


Hintergrundfarbe (Button)

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-header-search-btn-background-color

Typografie


Textausrichtung

Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • zentriert ausrichten • rechts ausrichten

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Typografie"

Technischer Name: twt-header-search-text-align

Darstellungsart 'Eingabefeld'


Maximale Breite

Feldtyp: Textfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

Technischer Name: twt-header-search-max-width

Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.


Maximale Breite @Desktop (≥1200px)

Feldtyp: Textfeld

Beispiel Wert: 100%

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Eingabefeld'"

Technischer Name: twt-header-search-width-desktop

Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.

Darstellungsart 'Flyout-Suche'


Breite

Feldtyp: Auswahlfeld

Verfügbare Werte: • Container-max-width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Container-max-width (Full-width-boxed)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-container-width


Maximale Breite @Phone (Querformat) (≥576px)

Feldtyp: Textfeld

Beispiel Wert: 500

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-max-width

Gebe die maximale Breite des Eingabefeldes in Pixeln (z.B. 500 oder 500px) an.


Maximale Breite @Desktop (≥1200px)

Feldtyp: Textfeld

Beispiel Wert: 100%

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-max-width-desktop

Gebe die maximale Breite des Eingabefeldes, ab dem Desktop-Viewport (≥1200px), in Pixeln (z.B. 500 oder 500px) oder mit 100% an.


Innenabstand

Feldtyp: Nummernfeld

Beispiel Wert: 15

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-padding

Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.


Hintergrundfarbe @Phone (<576px)

Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-phone-search-flyout-background-color


Hintergrundfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Flyout-Suche'"

Technischer Name: twt-header-search-flyout-background-color

Die Option "Flyout-Suche" muss unter "Suche" > "Darstellungsart" ausgewählt sein.

Darstellungsart 'Vollbildsuche'


Overlay-Farbe

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.9)

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

Technischer Name: twt-header-search-fullscreen-backdrop-color

Wähle die gewünschte Hintergrundfarbe vom Overlay (backdrop) aus.

Die Option "Vollbildsuche" muss als "Darstellungsart" ausgewählt sein.


Unschärfe-Effekt [px] (Overlay)

Feldtyp: Nummernfeld

Beispiel Wert: 0

Pfad zur Einstellung: Tab "Header" => Bereich "Suche" => Abschnitt "Darstellungsart 'Vollbildsuche'"

Technischer Name: twt-header-search-fullscreen-backdrop-effect-blur

Gib die gewüschte Stärke für den Unschärfe-Effekt vom Overlay (backdrop) ein.

PreviousSucheNextAktions-Buttons

Last updated 9 months ago

Was this helpful?