Sonderwünsche erfassen

[FloRe2]

Hallo !

unsere Kunden haben oft Sonderwünsche. Diese wollen wir ermöglichen und neben dem finalen Bearbeiten dieser scheitert es derzeit leider schon am mitteilen. 

Wir brauchen im Artikel oder im Warenkorb ein deutliches Feld welches der Kunde ausfüllen kann 

Im Sidecart gibt es das "Notiz hinzufügen", das ist aber so klein, dass das niemand wahr nimmt. 

Hat jemand einen heissen Tip ?

[Gabe]

Hey @FloRe2 

Danke für das Bild aber zu wissen welches Theme das ist wäre hilfreich denn der Customer Cart Notes Feature ist oft einstellbar via dem Theme Editor in den meisten Themes. Der in deinem Bild ist aber wirklich sehr klein und die meisten User werden diesen wahrscheinlich gar nicht wahrnehmen. 

Dazu kommt, dass euer "Notiz hinzufügen" Link Custom-Made zu sein scheint, sprich, eine eigene Lösung, ist das richtig? Es sieht auch nicht wie eine UX Best Practice aus da er sehr klein ist und nur als Text Link anklickbar, anstatt als größerer Button. Hinzukommt, dass wenn man auf den Text-Link klickt, ich nehme mal an, dass ein Kästchen sich öffnet das den Checkout Button überdeckt, ist das richtig? Kann man es auch wieder schließen falls man aus Versehen auf den Text Link als User geklickt hat? Wenn nein dann ist das keine gute UX.

Ihr könnt diesen Text Link aber in einen Button umwandeln so dass dieser eine verbesserte UX darstellen kann. Das würde aber eine Coding Solution verlangen und folgendes ist ein Tipp wie man vorgehen könnte.

Wenn ihr stattdessen unserer Product Options Apps ausprobieren wollt, die das auch ohne Coding machen können, dann kann ich gerne bei Bedarf welche vorschlagen oder demonstrieren, die ein Best Fit für euren Use-Case sein könnte. Siehe was ich meine, in meinem kurzen Video hier.

ES DIY selber machen

Wenn du es selber im ausklappbaren Cart Drawer programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Den "Notiz bearbeiten" Text-Link in einen besser sichtbaren Button verwandeln:

Hier ist ein Code Beispiel eines Buttons an derselben Stelle, samt meine Kommentare im Code zu was jede Zeile macht:

<div class="mini-cart__actions text--subdued text--xsmall">
  <button type="button" is="toggle-button" id="order-note-toggle" class="order-note-button" data-action="toggle-order-note" aria-controls="mini-cart-note" aria-expanded="false">
    Notiz bearbeiten
  </button>
</div>

<style>
  /* CSS für das neue Button-Styling */
  .order-note-button {
    background-color: #007acc; /* Eine auffällige Farbe */
    color: #ffffff; /* Weißer Text für Kontrast */
    border: none; /* Entfernt den Rahmen */
    padding: 8px 12px; /* Fügt etwas Polsterung hinzu */
    border-radius: 4px; /* Abgerundete Ecken für ein weicheres Aussehen */
    cursor: pointer; /* Ändert den Cursor zu einem Zeiger für eine Klick-Indikation */
  }

  /* Hover- und Fokuseffekte für bessere UX */
  .order-note-button:hover, .order-note-button:focus {
    background-color: #005a99; /* Dunklere Farbe beim Hover oder Fokus */
    outline: none; /* Entfernt den Standardrahmen */
  }
</style>

Hier was der Code macht:

1. HTML-Struktur: Der Text-Link wird durch einen Button mit der Klasse order-note-button ersetzt.

2. CSS-Styling: Die neue Button-Klasse .order-note-button stylt den Button mit:

   • Einer auffälligen Hintergrundfarbe.
   • Weißem Text für Kontrast.
   • Polsterung, um den Button größer zu machen.
   • Abgerundeten Ecken für eine ästhetische Anmutung.
   • Hover- und Fokuseffekten, um die UX zu verbessern.

3. Verbesserte UX: Diese Modifikation adressiert sowohl visuelle als auch Benutzerfreundlichkeits-Bedenken und macht es einfacher für Kunden, die Notiz-Funktion zu bemerken und zu nutzen, ohne andere UI-Elemente zu überlappen.

Um dies zu integrieren, die Theme-Vorlage und das Stylesheet anpassen, um diese Änderungen zu berücksichtigen. Suche nach der Liquid Datei, die die Mini-Cart-Ansicht enthält, wie z. B. in Snippets oder Sections, je nach verwendetem Theme. Füge den HTML-Code an die Stelle ein, an der der Mini-Cart-Link steht. Für den CSS Style verwende unsere Anleitung hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[FloRe2]

Hallo Gabe !

Danke für die umfangreiche Rückmeldung. Das muss ich nochmal in Ruhe lesen und besprechen. 

Ich weiss, und das wollte ich Dir mitteilen, es sich um das Foca Theme handelt. Eine Customcodierung steckt da noch nicht drin, meine ich. Weil dann hätte das mein Entwickler den ich sehr lieb habe, ja schon gleich in hübsch und perfekt codiert. 🙂

Ich kläre das und gebe Rückmeldung.

[Gabe]

@FloRe2 

Gut, ich habe jetzt das Focal Theme als Testumgebung installiert und konnte in der Tat die Einstellungen im Theme Editor finden, wie hier abgebildet:

Aber lass wissen wie ihr damit weiterkommt und gerne können wir die Themen hier weiterbesprechen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉