FROM CACHE - de_header
Gelöst

Symbol für Suche nach rechts

JT25
Besucher
3 0 0

Moin,

 

ich würde in dieser Angelegenheit mal eure Hilfe benötigen. Wie bekomme ich das Symbol der Suche rechts angeordnet?

In der mobilen Version passt es soweit. Nur die Desktop-Variante möchte nicht.
Ich nutze das Dawn Theme.

JT25_0-1655139120101.png

 

 

LG

1 AKZEPTIERTE LÖSUNG

Finer
Shopify Expert
2035 426 728

Erfolg.

@JT25 dazu musst du im Code-Editor des Themes unter Assets in die base.css gehen und folgenden Abschnitt suchen (ab Zeile 2406):

 

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex; <-- diesen Wert (inline-flex) zu none ändern.
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none; <-- diesen Wert (none) zu inline-flex ändern.
  }
}

Da wo "display:inline-flex;" steht, den Wert in "none" (statt "inline-flex") setzen.

Da wo "display:none;" steht den Wert in "inline-flex" (statt "none") setzen. 

Das sieht dann folgendermaßen aus:

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: none;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: inline-flex;
  }
}

 

Dann wird das Such-Icon auf der rechten Seite angezeigt.

 

Aber Achtung!

Diese Änderung greifen aufgrund der Auswahl des Header-Layout (Logo mittig). Wenn du das Layout änderst, kann das zu Fehlern in der Ansicht führen. Daher empfehle ich vorher eine Sicherheitskopie deines Themes zu erstellen. Falls irgendwelche unerwarteten Fehler auftauchen, kannst du einfach die Sicherheitskopie verwenden.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

Lösung in ursprünglichem Beitrag anzeigen

10 ANTWORTEN 10

Finer
Shopify Expert
2035 426 728

Erfolg.

@JT25 dazu musst du im Code-Editor des Themes unter Assets in die base.css gehen und folgenden Abschnitt suchen (ab Zeile 2406):

 

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex; <-- diesen Wert (inline-flex) zu none ändern.
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none; <-- diesen Wert (none) zu inline-flex ändern.
  }
}

Da wo "display:inline-flex;" steht, den Wert in "none" (statt "inline-flex") setzen.

Da wo "display:none;" steht den Wert in "inline-flex" (statt "none") setzen. 

Das sieht dann folgendermaßen aus:

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: none;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: inline-flex;
  }
}

 

Dann wird das Such-Icon auf der rechten Seite angezeigt.

 

Aber Achtung!

Diese Änderung greifen aufgrund der Auswahl des Header-Layout (Logo mittig). Wenn du das Layout änderst, kann das zu Fehlern in der Ansicht führen. Daher empfehle ich vorher eine Sicherheitskopie deines Themes zu erstellen. Falls irgendwelche unerwarteten Fehler auftauchen, kannst du einfach die Sicherheitskopie verwenden.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
JT25
Besucher
3 0 0

Moin @Finer danke für die schnelle und ausführliche Lösung. 

EComMan1
Tourist
48 0 1

geht das auch wenn die Suche in der Mobilen version unterhalb des logos erscheinen soll?

Gabe
Shopify Staff
17313 2743 4050

Hey @EComMan1 

 

Ja, und du hast jetzt den neuen CSS Editor direkt im Theme Editor um das auf Mobile zu testen. Füge den folgenden CSS-Code da ein oder passe den bestehenden Code entsprechend an, wie folgendes Beispiel:

 

/* Mobile */
@media screen and (max-width: 989px) {
 .header__search {
   display: flex;
   width: 100%;
   justify-content: center;
   margin-top: 10px; /* Optional: Fügen Sie einen Abstand zwischen Logo und Suchsymbol hinzu */
 }
}

 

Dieser Code sollte sicherstellen, dass das Suchsymbol in der mobilen Version unterhalb des Logos angezeigt wird und zentriert ist. Der Wert max-width: 989px sollte entsprechend den Breakpoints deines Themes angepasst werden.

 

Wenn du möchtest, dass das Suchsymbol nur in der mobilen Version und nicht auf Tablets angezeigt wird, den max-width-Wert auf einen kleineren Wert ändern, der für mobile Geräte spezifisch ist, z. B. 767px:

 

/* Mobile */
@media screen and (max-width: 767px) {
  .header__search {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px; /* Optional: Fügen Sie einen Abstand zwischen Logo und Suchsymbol hinzu */
  }
}

 

Das ganze ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

EComMan1
Tourist
48 0 1

du meisnt unter header css ?

klappt bei mir leider nicht

EComMan1
Tourist
48 0 1

bekomme diesen fehler

Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden

Gabe
Shopify Staff
17313 2743 4050

Bei mir hats wunderbar geklappt:

 

image.png

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

EComMan1
Tourist
48 0 1

nein klappt leide rnicht...

Die lupe / Suche soll wie im bildmit gelb makiert unterhalb des Logos sein ( Nur mobile)

Ich habe den Code in das CSS editor im Head element platziert. Klappt aber leider nicht. Mache ich was falsche?

Screenshot 2023-04-27 163545.png

Gabe
Shopify Staff
17313 2743 4050

Das ist leider Theme abhängig. Probiere folgenden Code:

 

@media screen and (max-width: 990px){
.header__search{
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
}
.header__search > details{
   width: 100%;
   padding: 0 12px;
   display: flex;
   justify-content: center;
}
.header__search > details > .header__icon{
      width: 100%;
}
.header{
   position: relative;
   padding-bottom: 58px !important;
}
.header .header__icons .icon-search {
   color: #707070;
}
.header .header__icons span{
 justify-content: center !important;
}
.header__search summary span::after {
   content: "Nach Produkte suchen";
   padding-left: 1.2rem;
   font-size: 1.2rem;
   color: rgb(147, 147, 147);
}
.shopify-section-header-hidden{
 top: calc(-1 * var(--header-height) - 58px);
}
}

 

Wenn das nicht geht, füge das im base.css ein und stelle sicher, dass der Code innerhalb des entsprechenden CSS platziert wird.

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Gabe
Shopify Staff
17313 2743 4050

Hi @JT25 

 

Und wie @Finer sagt - die Code Snippets vom @Finer kannst du beliebig in einer Sandkästchen Themekopie testen, um zu sehen wie der erwünschte Effekt ist und das dann darauf im Live-Theme implementieren.

 

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 4 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:

2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog