Dokumentation für benutzerdefiniertes Shopify-Theme

Diese Anleitung beschreibt, wie Sie das Theme für Ihren Shopify-Shop anpassen können. Das Theme ist benutzerfreundlich gestaltet und enthält zahlreiche Anpassungsoptionen direkt in den Einstellungen.
Theme-Abschnitte
Logo-Bereich

   -Zweck: Zeigt das Shop-Logo oder den Shop-Namen an.
   -Anpassung:
       -Wenn in den Einstellungen ein Logo hochgeladen wird (settings.logo), erscheint dieses im Header.
      - Andernfalls wird der Shop-Name als anklickbarer Textlink angezeigt.

Einklappbare Navigation

  - Zweck: Erstellt ein responsives, einklappbares Navigationsmenü.
  - Funktionsweise:
      - Ein Hamburger-Button (nav-toggle) zum Ein- und Ausklappen der Navigation für Mobilgeräte und Desktop.
     -  Hinweis: Navigationspunkte sind in einer Liste (nav-list) enthalten und werden durch die active-Klasse ein- oder ausgeblendet.

Sticky-Header

 -  Zweck: Fixiert den Header oben auf der Seite beim Scrollen.
  - Funktionsweise:
      - CSS (position: sticky; top: 0;) sorgt dafür, dass der Header sichtbar bleibt.

JavaScript-Funktionen (script.js)

 -  Zweck: Fügt Interaktivität im Header hinzu.
 -  Funktionen:
      - Ein- und Ausklappen des Navigationsmenüs.
      - Sanftes Scrollen für interne Links.
      - Umschaltbare Farbpaletten.

Theme-Einstellungen
Logo-Upload (image_picker)

Ermöglicht das Hochladen eines benutzerdefinierten Logos für die Navigationsleiste.
Farbauswahl (select und color)

  - Zweck: Anpassung der Farben im Theme.
  - Details:
      - Auswahl aus drei vordefinierten Farbpaletten.
      - Alternativ stehen benutzerdefinierte Farben für primäre, sekundäre und Hintergrundfarben zur Verfügung.

Sticky-Header-Option (checkbox)

Ermöglicht das Ein- oder Ausschalten des Sticky-Headers.
Testimonial-Anzeigeoption (checkbox)

Ermöglicht das Ein- oder Ausblenden des Testimonial-Bereichs auf der Startseite.
Startseite und Hero-Bereich
Hero-Bereich-Anpassung

  - Zweck: Anpassung des Hauptbanners mit Text und Call-to-Action-Button.
  - Details:
      - Optionen zum Festlegen von Titel, Untertitel, Button-Link und Button-Text.

Footer-Anpassung

 -  Zweck: Benutzerdefinierter Footer-Text, der im Footer angezeigt wird.

Dynamische Produktanzeige
Produktbild

  - Zweck: Zeigt das Hauptbild des Produkts an oder ein Platzhalterbild, falls kein Bild vorhanden ist.

Produktinformationen

 -  Details:
     -  Produktname: Wird im Header-Format angezeigt.
     -  Preis: Zeigt den Originalpreis an, wenn das Produkt im Angebot ist, ansonsten nur den regulären Preis.

"In den Warenkorb"-Button

Fügt das ausgewählte Produkt mit einer versteckten Eingabe für die Produkt-Variant-ID zum Warenkorb hinzu.
Erweiterte Theme-Funktionen
Sticky, einklappbare Navigation

   -Der nav-toggle Button aktiviert das ein-/ausklappbare Menü für Desktop- und Mobilgeräte.

Hover-Effekte auf Produktkarten

 -  Fügt beim Hovern visuelle Effekte wie Schatten oder Farbänderungen hinzu und verbessert die Benutzererfahrung.

Farbpaletten-Wechsel

  - Falls ein Farbwähler hinzugefügt wird (#color-palette-selector), können Benutzer das Farbschema dynamisch ohne Seitenneuladen ändern.