Logo mittig im Header --> Theme: Dawn

[-Eddy-]

Hallo, 

ich würde gerne mein Logo im Shop im Header gerne Mittig setzen, sodass links und rechts von Logo die Kategorien angezeigt werden. Es gibt bereits einige solcher Einträge allerdings haben mir keines davon geholfen. 

Ich verwende das Theme: Dawn mit Version 11.0.0. 

Das sollte ungefähr so aussehen: https://www.brushyooteeth.de/ oder so https://dropoutclothing.com/

Vielen Dank schon mal für die Hilfe. 

Viele Grüße 

Eddy

[Ben310]

@-Eddy- 

Kannst du eigentlich im Theme Editor von Dawn machen wie unten abgebildet:

Deine Beispiele sind vom Refresh Theme dass das Logo out-of-the-box in der Mitte hat. Du kannst das Refresh Theme im Shop installieren und das header.liquid vom Dawn Theme Code mit dem des Refresh Themes ersetzend da es ja auf dem Quellcode des Dawn Theme aufgebaut ist. Mach das aber zuerst in einer Testumgebung.

Das 2. Beispiel ist Impulse Theme. Das wird nicht gehen außer du bezahlst für dieses super Theme! Kannst aber jederzeit als Testumgebung zum Shop hinzufügen. 😉

[-Eddy-]

Hallo Ben310, 

vielen Dank für die schnelle Antwort. 

Soweit war ich auch schon aber bei mir sieht das dann eben so aus.... 

Ich möchte eben, dass die Kategorien nicht alle links vom Logo sind sondern links und rechts aufgeteilt. 

Vielen Dank schon mal. 

[Ben310]

@-Eddy-  Super, nur dann must du wählen welche Kategorien du links haben möchtest, und welche rechts. Sobald du das hier angibst kann ich dir etwas Code senden.

[-Eddy-]

Ich hätte gerne Home, Herren, Damen und Kinder links und Accessoire, Tassen, Gadgets und Kontakt dann rechts.  Kann man dann eigentlich das Suchsymbol auch nach links verlegen? 

(Ich hoffe das entspricht dann meinen Vorstellungen :D)

Danke dir schon mal

[Gabe]

Hey @-Eddy- 

Da helfe ich auch gerne weiter. Da dies einiges an Coding verlangen wird, und 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 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!

Um das gewünschte Layout in deinem Shopify Dawn-Theme zu erreichen, müssen einige Änderungen am Code vorgenommen werden. Beachte, dass das Bearbeiten des Theme-Codes zu unerwarteten Ergebnissen führen kann, daher solltest du immer eine Sicherung deines aktuellen Themes machen, bevor du Änderungen vornimmst.

Schritt-für-Schritt Anleitung:

1. Sicherung deines aktuellen Themes erstellen: Gehe zu "Online Store" > "Themes", klicke auf "Actions" für dein aktuelles Theme und wähle "Duplicate" aus.

2. Code-Anpassungen: Gehe zu "Online Store" > "Themes" > "Code bearbeiten" für die kopierte Version deines Themes.

3. Header anpassen:

   • Öffne sections/header.liquid.
   • Suche nach dem Menü-Code und ändere es so, dass du zwei separate Menüs hast (eins für links und eins für rechts vom Logo).
   • Beispiele:

<nav class="menu-left">
  {% for link in linklists['menu-left'].links %}
  <!-- menu link code here -->
  {% endfor %}
</nav>

<div class="logo">
  <!-- Logo code here -->
</div>

<nav class="menu-right">
  {% for link in linklists['menu-right'].links %}
  <!-- menu link code here -->
  {% endfor %}
</nav>

CSS-Stile hinzufügen:

• Öffne assets/base.css.liquid oder eine ähnliche CSS-Datei.
• Füge am Ende der Datei die folgenden Stile hinzu, um die Ausrichtung anzupassen:

.menu-left, .menu-right {
  display: inline-block;
}

.logo {
  display: inline-block;
  vertical-align: top;
}

Suchsymbol nach links verlegen:

• In sections/header.liquid, finde das Suchsymbol und verschiebe es an die gewünschte Stelle.
• Menü im Admin-Bereich einrichten:
  • Gehe zu "Navigation" in deinem Shopify Admin.
  • Erstelle zwei neue Menüs: menu-left und menu-right und füge die entsprechenden Links hinzu, wie du sie aufgeteilt haben möchtest.
  • Theme aktivieren: Nachdem du alle Änderungen vorgenommen hast, gehe zu "Online Store" > "Themes" und klicke auf "Aktionen" für die kopierte Version deines Themes und wähle "Veröffentlichen".

Beachte, dass diese Anleitung eine grundlegende Anpassung ist und möglicherweise weitere kleinere Anpassungen erforderlich sind, um das gewünschte Erscheinungsbild und Verhalten genau zu erreichen.

Es kann auch hilfreich sein, einen Shopify-Entwickler oder Experten zu konsultieren, wenn du dir unsicher bist oder Unterstützung benötigst.

[-Eddy-]

Vielen Dank für die Hilfe Gabe, 

allerdings komme ich schon bei dem Punkt "Menü-Code" suchen nicht weiter 😄

Ich habe mein Theme bereits dupliziert und mache die Versuche nur auf der Kopie. 

Den Support habe ich schon geschrieben gehabt und ich wurde auf die Community verwiesen. 

Danke euch

[Gabe]

@-Eddy- 

Yup, das was du erreichen möchtest ist ziemlich komplex leider. Du könntest das Problem natürlich mit einem Schlag lösen indem du zum Impulse oder Refresh Theme wechselst! 😉 

Stelle deine Frage in unserem Design Experten Forum auf Englisch und ein Experte wird sich sicherlich melden! Füge alles aus unserem Gespräch hier mit bei in deinem Post.

VG,

[-Eddy-]

@Gabe 

Hmm schade, dass es so kompliziert ist.. Was ist aber am Fresh Theme anders? Bzw. warum ist es dort einfacher das zu erreichen? Kann man sein Theme einfach so auf ein anderes übernehmen?

Dann muss ich wohl im Englischen Forum schreiben. 

Viele Grüße

[Ben310 · Accepted solution]

Musst halt selber testen im "Fresh" Theme (Refresh) - die Code Struktur ist halt anders und die Kategorien werden unterhalb des Logos angezeigt, nicht irgendwelche links und rechts:

Du möchtest eine sog. "Menüaufteilung" was im Code sehr schwer umsetzbar ist (außer du verwendest das Impulse Theme):