Search Icon verschieben expanse theme

Hey ich würde gerne den search icon links haben und den Header in der Mitte ich habe mein bestes gegeben und es nicht lösen können kann mir jemand behilflich sein.
Url :

https://mihenk-parfum.de/

Liebe Grüße
Ferisma

Hey @Ferismateam

Danke für die URL und hierfür gibt es ein paar Dinge zu beachten, denn man kann den Header deines Expanse Theme zwar mit Code bearbeiten, um das zu erreichen was du dir vorstellst, nur kann es auch den Header auch ziemlich zerschiessen, ggf. auch auf mobile. Und was genau meinst du mit “den Header in der Mitte”. Meinst du das Branding Logo?

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!

Ich habde deinen Header jetzt in der Dev Console angeschaut und um das Suchsymbol nach links zu verschieben und den Header deines Shopify Expanse Themes in der Mitte zu zentrieren, musst du die HTML-Struktur und das CSS anpassen. Hier ist ein modifiziertes deines Codes im Header.liquid, die das Suchsymbol nach links verschiebt und den Header zentriert:

Show More

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


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.

1 Like

es ist nicht so schwer ich weis es jedoch kenn ich mich im aufbau nicht so aus, man könnte auch nur die mobile funktion ändern ohne das die desktop ansicht verändert wird, danke aber für deine zeit jedoch hilft mir das nicht weiter.
LG

@Ferismateam

Es ist nicht so einfach wie du dir denkst und das beste was ich dir empfehlen kann ist das entweder mit den Theme Entwickler zu besprechen, oder einen der Experten die ich oben verlinkt habe, anzuschreiben. Die können das für dich programmieren denn es verlangt einiges an Codierung:

Apropos, so wie dein Header jetzt ist, ist doch nicht so schlecht oder?

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

1 Like

habe mich an den support gemeldet leider bieten die für diese funktion keinen support

ich habe es mir auch angeschaut ich müsste ein eigenes nav erstellen entweder den ganzen nav umbauen oder ich verschiebe das logo in die mitte mit der ganzen section und mache einfach ein margin-left auf das icon damit das icon siechtbar wird

@Ferismateam

Yup stimmt also nicht ganz einfach.

Stelle deine Frage auch in unseren Experten Design Forum aber auf Englisch und mit dem Link zum Shop, aber mit bitte etwas mehr Beschreibung genau was du haben möchtest, als “ich würde gerne den search icon links haben und den Header in der Mitte”.

Da wird sich ein Programmierer bestimmt melden.

VG,

@Ferismateam

Probiere mal diesen diesen CSS-Code zu deinem css editor (mehr dazu hier) :

/* Für die mobile Ansicht */
@media only screen and (max-width: 768px) {
  /* Suchsymbol nach links verschieben */
  .header-item--icons {
    display: flex;
    justify-content: flex-start;
  }

  /* Logo zentrieren */
  .header-item--logo {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  
  /* Platz für das Suchsymbol schaffen */
  .site-header__logo {
    margin-left: 50px; /* Anpassen, um genügend Platz für das Suchsymbol zu schaffen */
  }
}
  1. Media Query: Der CSS-Code wird nur auf Bildschirmbreiten von maximal 768px angewendet, um nur die mobile Ansicht zu ändern.
  2. header-item–icons: Diese Klasse wird verwendet, um das Suchsymbol nach links zu verschieben, indem justify-content: flex-start hinzugefügt wird.
  3. header-item–logo: Diese Klasse wird verwendet, um das Logo zu zentrieren, indem flex: 1 und justify-content: center hinzugefügt werden.
  4. site-header__logo: Diese Klasse wird verwendet, um das Logo ein wenig nach rechts zu verschieben, um Platz für das Suchsymbol zu schaffen.

hey gabe ich sehe keinen code :grinning_face_with_smiling_eyes:

@Ferismateam

Mach mal einen Refresh dieser Seite. Es war noch am Laden

ja war am laden danke für deine zeit ich weis es zu schätzen jedoch hat es nichts gebracht

giphy