Suchleiste in Einschubmenü auf Smartphone einfügen?

[Andrej1701]

Hallo zusammen,

Derzeit baue ich meinen 1. eigenen Online-Shop auf und hätte mal eine Frage bezüglich der Lage der Suchfunktion.

Nämlich gefällt mir zwar, dass die Suchlupe auf dem Desktop im Header angezeigt wird -  es gefällt mir aber nicht, dass diese auch auf dem Smartphone im Header angezeigt wird, da dadurch sich auch die Lage von meinem Logo verschiebt und dieses dann nicht mehr mittig vom Bild sitzt.

Ich würde die Suchfunktion gerne in das Einschubmenü des Smartphones packen. Sodass keine Suchlupe dort ist sondern direkt eine Suchleiste im Einschubmenü. Wie bekomme ich die dorthin belasse es aber auf dem Desktop, so wie es zurzeit ist.

Mein Shop: DetailCa.com

[Gabe]

Hey @Andrej1701 

Erstmals ein herzliches Willkommen auf der Plattform! 

Das wird auch ein tolles Shop! Nicht vergessen, dass wenn es noch nicht fertig ist, dann empfehlen wir es noch passwortgeschützt zu halten.

Dann habe ich einen schnellen 👁️ in dein Shop geworfen und folgendes scheint das Verhalten der Suchlupe auf Mobile zu sein was für mich nicht schlecht scheint und auf gut für die Barrierefreiheiten ist:

Wenn du es aber trotzdem ändern möchtest, in Shopify gibt es auch mehrere Wege, Anpassungen wie diese vorzunehmen. Die meisten Themes verwenden Liquid, die Shopify-eigene Vorlagensprache, und das kann man bearbeiten, um eine solche Änderung zu erzielen. Die meisten Themen sind jedoch unterschiedlich aufgebaut, sodass der genaue Prozess variieren kann.

Wenn du es selber 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 die hier 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 negative 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!

Im Allgemeinen könnte der Prozess wie folgt aussehen:

1. Gehe zu "Online Store > Themes" -> "Actions" -> "Duplicate" -> "Edit code".

2. Suche die Datei, die das Header-Layout für das mobile Design enthält. Dies könnte eine Datei wie header.liquid oder theme.liquid sein, abhängig vom Theme. Suche nach etwas, das wie {% if device == 'mobile' %} aussieht.

3. Da den Code für die Suchfunktion finden - wahrscheinlich etwas wie {% include 'search-bar' %} sein. Kopiere den Code.

4. Dann suchen nach dem Einschubmenü Code für das mobile Design - eine Datei wie drawer.liquid oder side-menu.liquid.

5. Füge den kopierten Suchcode an der Stelle ein, an der du die Suchfunktion im Einschubmenü anzeigen möchtest.

6. Anschließend den ursprünglichen Suchcode aus dem Header entfernen, aber nur für das mobile Layout. Um das zu tun, den Code in eine Bedingung wie diese einwickeln: {% if device != 'mobile' %}...Suchcode...{% endif %}. Dies stellt sicher, dass der Suchcode nur dann ausgeführt wird, wenn das Gerät kein Mobilgerät ist.

7. Das ganze speichern.

Bitte beachte, dass dies eine allgemeine Anleitung ist und einige Details je nach dem spezifischen Theme variieren können. Das ganze ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

[Andrej1701]

Hi,

danke für deine ausführliche Nachricht. Leider finde ich weder im header.liquid noch im theme.liquid irgendwas was wie "mobile" oder "device" aussieht.
Ich habe das Theme Refresh. Kannst du mir da weiter helfen?
MFG

[Gabe]

Hey @Andrej1701 

Dies würde eine ziemlich komplexe Programmierung verlangen und dafür empfehle ich einen Experten in Auftrag zu nehmen. Du kannst deine Frage in unserem Design Forum posten hier auf Englisch posten (bitte mit befristeten Vorschaulink zum Beispiel, so dass du eine schnelle Antwort bekommst). Du kannst auch einen deutschen Programmierer in unserer privaten FB Gruppe hier finden der das für dich machen kann. 

Da das ein Shopify Theme ist können wie auch kleine Änderungen für dich machen als Teil deines 60-Min Design Time. Siehe was du uns in Auftrag geben kannst hier. 

VG,