FROM CACHE - de_header
Gelöst

Falsche Darstellung Wort "Maße"

Anja73
Entdecker
14 0 1

Hallo,

 

es geht um das Wort "Maße". Es wird in der Überschrift nicht Richtig mit "ß" geschrieben sondern mit "ss".

Ich erstelle mit dem Theme "Be Yours".

 

Vielen Dank

AnjaMaße.png

3 AKZEPTIERTE LÖSUNGEN

Gabe
Shopify Staff
17535 2773 4093

Erfolg.

Hey Anja! @Anja73 

 

Das Be Yours ist ein super Theme! Gute Wahl! Nur habe ich das jetzt in meinem Test-Be-Yours Theme getestet und es scheint, dass das Titelfeld für das Collapsible Tab tatsächlich keinen UTF-8 Zeichensatz annimmt, um Sonderzeichen wie "ß" in "Maße" korrekt darzustellen, sondern nur den ASCII Zeichensatz:

 

image.png

 

Ich habe auch die Schriftarten geändert und das hat das Problem auch nicht gelöst, beispielweise, ob die verwendete Schriftart das "ß" nicht korrekt darstellt.

 

Das einfachste wäre ein anderes Wort im Titelfeld zu verwenden, wie Abmessungen oder Dimensionen oder Umfang! Ansonsten wird das eine Programmiererei verlangen und du müsstest erwägen wie viel Zeit und energie du in diese Sache investieren möchtest um den Titel "Maße" anzuzeigen. Ggf. lohnt es sich auch die Be Yours Theme Entwickler zu kontaktieren über diese Form 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.

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

Lösung in ursprünglichem Beitrag anzeigen

Gabe
Shopify Staff
17535 2773 4093

Erfolg.

Hey Anja! 

 

Ich habe das jetzt selber im Test Theme getestet und es gibt anscheinend im Be Yours Theme in diesem Kollektionsliste Abschnitt nur die Auswahl "Bildüberlagerung anwenden - Dies kann die Sichtbarkeit des Textes verbessern".

 

Ich konnte i.d.T. keinen Weg finden die Farbe des Overlay Text zu ändern oder ihn komplett zu entfernen da er ein dynamischer Overlay zu sein scheint, sprich, er passt die Textfarbe automatisch den Bildverhältnissen an, ob ein Bild hell oder dunkel ist.

 

Aber nach einer Analyse in der Developer Console konnte ich einen CSS Code erstellen mit dem dieser Overlay Titel komplett entfernt wurde:

 

 

.card-information__text {
  display: none;
}

 

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

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

Lösung in ursprünglichem Beitrag anzeigen

Gabe
Shopify Staff
17535 2773 4093

Erfolg.

Hey @Anja73 

 

Ja, das ist so wie ich oben gezeigt habe - es geht im Grunde nur mit einer App. Haben dir die Demos gefallen?

 

Wenn du es doch DIY machen möchtest

Man könnte das zusammen mit einem Experten programmieren - das wäre Würde könnte groß aber eine grössere Operation - Kostenschätzung um die €2k-5k. Unten liste ich die Beispiele was alles gemacht werden muss, um so etwas DIY umzusetzen.

 

Um die Anzeige der Sprachen in der Header-Leiste des "Be Yours"-Themes anzupassen und die gewünschte Darstellung zu erreichen, musst du einige Änderungen am HTML- und CSS-Code vornehmen. Wenn du es selber DIY im Header Liquid 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.

Nicht vergessen - Ä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! 

 

Hier ein paar Schritte, die befolgen müsste:

  • Anpassen des HTML-Codes: Ersetze den vorhandenen HTML-Code für die Sprachauswahl durch den angepassten Code und stelle sicher, dass der Code die gewünschte Darstellung der Sprachauswahl enthält.
  • Anpassen des CSS-Codes: Füge benutzerdefiniertes CSS hinzu, um die Darstellung der Sprachauswahl zu ändern und die gewünschte Positionierung zu erreichen.

Hier ist ein Beispiel, wie man den HTML- und CSS-Code anpassen könnte (siehe auch meine kommentare im Code, um zu sehen, was der Code alles unter der Haube bewirken muss):

 

<localization-form class="on-header">
  <form method="post" action="/localization" id="HeaderLanguageForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data">
    <input type="hidden" name="form_type" value="localization">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="return_to" value="/?_ab=0&amp;_fd=0&amp;_sc=1">
    <div class="no-js-hidden">
      <span class="visually-hidden" id="HeaderLanguageLabel">Sprache</span>
      <div class="disclosure">
        <button type="button" class="disclosure__button localization-form__select localization-selector header__icon custom-lang-selector" aria-expanded="false" aria-controls="HeaderLanguageList" aria-describedby="HeaderLanguageLabel">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-localization" fill="none" viewBox="0 0 24 24">
            <path d="M12.904 2.04A9.993 9.993 0 0 0 2.039 12.903c.414 4.754 4.303 8.643 9.057 9.057a9.993 9.993 0 0 0 10.865-10.865c-.414-4.753-4.303-8.642-9.057-9.057Z" stroke="currentColor" vector-effect="non-scaling-stroke"></path>
          </svg>
          <span class="label">DE</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-caret" fill="none" viewBox="0 0 24 15">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 15c-.3 0-.6-.1-.8-.4l-11-13C-.2 1.2-.1.5.3.2c.4-.4 1.1-.3 1.4.1L12 12.5 22.2.4c.4-.4 1-.5 1.4-.1.4.4.5 1 .1 1.4l-11 13c-.1.2-.4.3-.7.3z" fill="currentColor"></path>
          </svg>
        </button>
        <ul id="HeaderLanguageList" role="list" class="disclosure__list list-unstyled" hidden="true">
          <li class="disclosure__item" tabindex="-1">
            <a class="disclosure__link link disclosure__link--active focus-inset" href="#" hreflang="de" lang="de" aria-current="true" data-value="de">
              DE
            </a>
          </li>
          <li class="disclosure__item" tabindex="-1">
            <a class="disclosure__link link focus-inset" href="#" hreflang="en" lang="en" data-value="en">
              EN
            </a>
          </li>
          <li class="disclosure__item" tabindex="-1">
            <a class="disclosure__link link focus-inset" href="#" hreflang="es" lang="es" data-value="es">
              ES
            </a>
          </li>
        </ul>
      </div>
      <input type="hidden" name="locale_code" value="de">
    </div>
  </form>
</localization-form>

 

CSS-Code:

 

/* Verkleinern der Sprachauswahl und Weltkugel-Symbol */
.custom-lang-selector .label {
  margin-left: 8px;
  font-size: 14px; /* Passen Sie die Schriftgröße nach Bedarf an */
}

.custom-lang-selector .icon-localization {
  width: 16px; /* Passen Sie die Größe des Symbols an */
  height: 16px; /* Passen Sie die Größe des Symbols an */
}

/* Positionierung der Sprachauswahl nach rechts */
.localization-form {
  position: absolute;
  right: 20px; /* Passen Sie die Position nach Bedarf an */
  top: 0;
}

/* Weitere Anpassungen nach Bedarf */

 

Falls erforderlich, müsste man auch das Verhalten der Sprachauswahl mit JavaScript anpassen. Zum Beispiel sicherstellen, dass das Dropdown-Menü korrekt geöffnet und geschlossen wird, wie im folgenden JS dargestellt:

 

document.addEventListener('DOMContentLoaded', function() {
  const langSelectorButton = document.querySelector('.custom-lang-selector');
  const langList = document.getElementById('HeaderLanguageList');

  langSelectorButton.addEventListener('click', function() {
    const isExpanded = langSelectorButton.getAttribute('aria-expanded') === 'true';
    langSelectorButton.setAttribute('aria-expanded', !isExpanded);
    langList.hidden = isExpanded;
  });

  document.addEventListener('click', function(event) {
    if (!langSelectorButton.contains(event.target) && !langList.contains(event.target)) {
      langSelectorButton.setAttribute('aria-expanded', 'false');
      langList.hidden = true;
    }
  });
});

 

Diese Änderungen sollten die gewünschte Darstellung und Positionierung der Sprachauswahl ermöglichen. Stellen Sie sicher, dass Sie die Anpassungen testen und gegebenenfalls anpassen, um das gewünschte Ergebnis zu erzielen.

 

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

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

Lösung in ursprünglichem Beitrag anzeigen

15 ANTWORTEN 15

Kai
Shopify Staff
2343 541 360

Hi @Anja73,

vielen Dank für deinen Post.

 

Um Wortlaut in deinem Shopify Shop zu ändern, kannst du die Spracheinstellungen deines Themes anpassen. Dies tust du folgendermaßen.

 

 

Kannst du damit die Schreibweise von Maße/Masse anpassen?

Kai | 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

Anja73
Entdecker
14 0 1

Hallo @Kai,

ich habe diese Funktion nicht. Kann es daran liegen, dass ich das Theme "Be Yours" noch nicht gekauft habe. Es ist noch die Testphase bei mir.

Ich möchte das Theme erst kaufen, wenn ich sicher bin, dass es keine Probleme (wie das mit dem "ß") damit gibt.

 

Kai
Shopify Staff
2343 541 360

Hi @Anja73,

 

vielen Dank für die Erläuterung.

 

Die Spracheinstellungen eines Themes können wie du schon vermutest erst nach dem Erwerb eines Themes angepasst werden.

 

Hier habe ich zum Testen einmal Be Yours heruntergeladen und sehe folgende Optionen:

 

 

Während ich bei einem kostenlosen Shopify Theme dies hier sehe:

 

 

Was gefällt dir an Be Yours besonders gut?

Kai | 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

Anja73
Entdecker
14 0 1

Hallo,

inzwischen habe ich mir das Theme Be Yours gekauft. Leider finde ich nicht den Ort wo ich das Wort "Maße" in die richtige Schreibweise bringen kann. Wie muss ich da vorgehen?

Screenshot 2024-05-18 065619.png

 

Vielen Dank und Grüße

Anja

Gabe
Shopify Staff
17535 2773 4093

Erfolg.

Hey Anja! @Anja73 

 

Das Be Yours ist ein super Theme! Gute Wahl! Nur habe ich das jetzt in meinem Test-Be-Yours Theme getestet und es scheint, dass das Titelfeld für das Collapsible Tab tatsächlich keinen UTF-8 Zeichensatz annimmt, um Sonderzeichen wie "ß" in "Maße" korrekt darzustellen, sondern nur den ASCII Zeichensatz:

 

image.png

 

Ich habe auch die Schriftarten geändert und das hat das Problem auch nicht gelöst, beispielweise, ob die verwendete Schriftart das "ß" nicht korrekt darstellt.

 

Das einfachste wäre ein anderes Wort im Titelfeld zu verwenden, wie Abmessungen oder Dimensionen oder Umfang! Ansonsten wird das eine Programmiererei verlangen und du müsstest erwägen wie viel Zeit und energie du in diese Sache investieren möchtest um den Titel "Maße" anzuzeigen. Ggf. lohnt es sich auch die Be Yours Theme Entwickler zu kontaktieren über diese Form 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.

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

Anja73
Entdecker
14 0 1

Hallo @Gabe,

herzlichen Dank! Du bist eine super Hilfe!!! Ich habe die Entwickler angeschrieben. Der Begriff "Abmessungen" wäre die 2. Wahl.

 

Ich habe noch ein weiteres Problem.

Ich habe den Abschnitt "Kollektion list" eingefügt, dann mit einigen Kollektionen bestückt1.png

Ich habe ein Problem mit der Anzeige. Meine Fotos sind alle mit einem weißen Hintergrund. Möchte ich auch nicht ändern. Ich möchte auch die Funktion Bildüberlagerung nicht nutzen. Sieht optisch nicht so gut aus.

Das System legt automatisch den Namen der Kollektion auf das Foto. Dieser wird in weiß angezeigt und ist auf einer festen Position. Überall in diesem Theme "Be Yours" kann mal so vieles einstellen, nur hier nicht 🙄

Ich finde keine Möglichkeit die Schriftfarbe, Größe und die Postion von dem Kollektionsnamen auf dem Bild zu ändern.

2.png

Es wäre alternativ auch schon hilfreich, wenn die Kategorienbezeichnung "nur hier" nicht automatisch angezeigt wird. Ich könnte diese dann auf das Foto legen und hätte so den Namen sichtbar.

 

Vielen Dank und Grüße

Anja

Gabe
Shopify Staff
17535 2773 4093

Erfolg.

Hey Anja! 

 

Ich habe das jetzt selber im Test Theme getestet und es gibt anscheinend im Be Yours Theme in diesem Kollektionsliste Abschnitt nur die Auswahl "Bildüberlagerung anwenden - Dies kann die Sichtbarkeit des Textes verbessern".

 

Ich konnte i.d.T. keinen Weg finden die Farbe des Overlay Text zu ändern oder ihn komplett zu entfernen da er ein dynamischer Overlay zu sein scheint, sprich, er passt die Textfarbe automatisch den Bildverhältnissen an, ob ein Bild hell oder dunkel ist.

 

Aber nach einer Analyse in der Developer Console konnte ich einen CSS Code erstellen mit dem dieser Overlay Titel komplett entfernt wurde:

 

 

.card-information__text {
  display: none;
}

 

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

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

Anja73
Entdecker
14 0 1

Hallo Gabe,

ich bin total begeistert. 🙂

Du bringst mich auf meinen Weg zum eigenen Shop (welcher natürlich aus meiner Sicht perfekt sein soll) wieder ein Stück weiter.

Herzlichen Dank.

Anja

Gabe
Shopify Staff
17535 2773 4093

Hey Anja! 

 

Es freut mich sehr immer helfen zu können! 😉

 

Poste hier jederzeit weitere Fragen sobald sie aufkommen!

 

VG,

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

Anja73
Entdecker
14 0 1

Hallo @Gabe ,

 

Theme "Be Yours" + App Translate & Adapt

Screenshot 2024-05-23 154829.png

Mir gefällt die Anzeige der Sprachen nicht.....

Das Symbol dieser Weltkugel finde ich nicht gut (oftmals wird eine andere Art der Weltkugel gezeigt) und das das Land voll ausgeschrieben ist gefällt mir auch nicht. Das finde ich zu lang, mir würden zwei Buchstaben reichen.

Hier ein Beispiel

Anja73_0-1716472867361.png

Anja73_1-1716472915490.png

 

...... und dann auf der rechten Seite.

Läßt sich das umsetzen?

Vielen Dank und Grüße

Anja

Gabe
Shopify Staff
17535 2773 4093

Hey Anja! @Anja73 

 

Aber klar doch. Welche dieser Demos gefallen dir am besten? Da sieht man, dass der UX Trend zu einem Floating Widget geht um die Sprache immer auswählen zu können und die Kundenerfahrung zu verbessern:

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

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

Anja73
Entdecker
14 0 1

Hallo Gabe, @Gabe 

ich glaube, du hast mich falsch verstanden 🙂

Ich hätte es gerne optisch so

Anja73_0-1716479558994.png

 

oder fast so ähnlich. Also diesen Kugel mit dem DE dahinten und wenn man darauf klickt dann öffent sich ein Fenster mit der Auswahl weiterer Sprachen so wie hier

Anja73_1-1716479661556.png

und das dann nicht wie es jetzt ist auf der linken Seite, sondern auf der rechten Seite von meinem Logo.

Anja73_2-1716479964070.png

 

Gibt es eine Möglichkeit das bei "Be Yours" zu ändern? Bis jetzt habe ich nur etwas gefunden zu "Sprachauswahl aktivieren" oder nicht.

Danke dir!

Gabe
Shopify Staff
17535 2773 4093

Erfolg.

Hey @Anja73 

 

Ja, das ist so wie ich oben gezeigt habe - es geht im Grunde nur mit einer App. Haben dir die Demos gefallen?

 

Wenn du es doch DIY machen möchtest

Man könnte das zusammen mit einem Experten programmieren - das wäre Würde könnte groß aber eine grössere Operation - Kostenschätzung um die €2k-5k. Unten liste ich die Beispiele was alles gemacht werden muss, um so etwas DIY umzusetzen.

 

Um die Anzeige der Sprachen in der Header-Leiste des "Be Yours"-Themes anzupassen und die gewünschte Darstellung zu erreichen, musst du einige Änderungen am HTML- und CSS-Code vornehmen. Wenn du es selber DIY im Header Liquid 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.

Nicht vergessen - Ä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! 

 

Hier ein paar Schritte, die befolgen müsste:

  • Anpassen des HTML-Codes: Ersetze den vorhandenen HTML-Code für die Sprachauswahl durch den angepassten Code und stelle sicher, dass der Code die gewünschte Darstellung der Sprachauswahl enthält.
  • Anpassen des CSS-Codes: Füge benutzerdefiniertes CSS hinzu, um die Darstellung der Sprachauswahl zu ändern und die gewünschte Positionierung zu erreichen.

Hier ist ein Beispiel, wie man den HTML- und CSS-Code anpassen könnte (siehe auch meine kommentare im Code, um zu sehen, was der Code alles unter der Haube bewirken muss):

 

<localization-form class="on-header">
  <form method="post" action="/localization" id="HeaderLanguageForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data">
    <input type="hidden" name="form_type" value="localization">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="return_to" value="/?_ab=0&amp;_fd=0&amp;_sc=1">
    <div class="no-js-hidden">
      <span class="visually-hidden" id="HeaderLanguageLabel">Sprache</span>
      <div class="disclosure">
        <button type="button" class="disclosure__button localization-form__select localization-selector header__icon custom-lang-selector" aria-expanded="false" aria-controls="HeaderLanguageList" aria-describedby="HeaderLanguageLabel">
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-localization" fill="none" viewBox="0 0 24 24">
            <path d="M12.904 2.04A9.993 9.993 0 0 0 2.039 12.903c.414 4.754 4.303 8.643 9.057 9.057a9.993 9.993 0 0 0 10.865-10.865c-.414-4.753-4.303-8.642-9.057-9.057Z" stroke="currentColor" vector-effect="non-scaling-stroke"></path>
          </svg>
          <span class="label">DE</span>
          <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-caret" fill="none" viewBox="0 0 24 15">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 15c-.3 0-.6-.1-.8-.4l-11-13C-.2 1.2-.1.5.3.2c.4-.4 1.1-.3 1.4.1L12 12.5 22.2.4c.4-.4 1-.5 1.4-.1.4.4.5 1 .1 1.4l-11 13c-.1.2-.4.3-.7.3z" fill="currentColor"></path>
          </svg>
        </button>
        <ul id="HeaderLanguageList" role="list" class="disclosure__list list-unstyled" hidden="true">
          <li class="disclosure__item" tabindex="-1">
            <a class="disclosure__link link disclosure__link--active focus-inset" href="#" hreflang="de" lang="de" aria-current="true" data-value="de">
              DE
            </a>
          </li>
          <li class="disclosure__item" tabindex="-1">
            <a class="disclosure__link link focus-inset" href="#" hreflang="en" lang="en" data-value="en">
              EN
            </a>
          </li>
          <li class="disclosure__item" tabindex="-1">
            <a class="disclosure__link link focus-inset" href="#" hreflang="es" lang="es" data-value="es">
              ES
            </a>
          </li>
        </ul>
      </div>
      <input type="hidden" name="locale_code" value="de">
    </div>
  </form>
</localization-form>

 

CSS-Code:

 

/* Verkleinern der Sprachauswahl und Weltkugel-Symbol */
.custom-lang-selector .label {
  margin-left: 8px;
  font-size: 14px; /* Passen Sie die Schriftgröße nach Bedarf an */
}

.custom-lang-selector .icon-localization {
  width: 16px; /* Passen Sie die Größe des Symbols an */
  height: 16px; /* Passen Sie die Größe des Symbols an */
}

/* Positionierung der Sprachauswahl nach rechts */
.localization-form {
  position: absolute;
  right: 20px; /* Passen Sie die Position nach Bedarf an */
  top: 0;
}

/* Weitere Anpassungen nach Bedarf */

 

Falls erforderlich, müsste man auch das Verhalten der Sprachauswahl mit JavaScript anpassen. Zum Beispiel sicherstellen, dass das Dropdown-Menü korrekt geöffnet und geschlossen wird, wie im folgenden JS dargestellt:

 

document.addEventListener('DOMContentLoaded', function() {
  const langSelectorButton = document.querySelector('.custom-lang-selector');
  const langList = document.getElementById('HeaderLanguageList');

  langSelectorButton.addEventListener('click', function() {
    const isExpanded = langSelectorButton.getAttribute('aria-expanded') === 'true';
    langSelectorButton.setAttribute('aria-expanded', !isExpanded);
    langList.hidden = isExpanded;
  });

  document.addEventListener('click', function(event) {
    if (!langSelectorButton.contains(event.target) && !langList.contains(event.target)) {
      langSelectorButton.setAttribute('aria-expanded', 'false');
      langList.hidden = true;
    }
  });
});

 

Diese Änderungen sollten die gewünschte Darstellung und Positionierung der Sprachauswahl ermöglichen. Stellen Sie sicher, dass Sie die Anpassungen testen und gegebenenfalls anpassen, um das gewünschte Ergebnis zu erzielen.

 

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

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

Anja73
Entdecker
14 0 1

Hallo Gabe, @Gabe

 

vielen Dank. Du hast dir mal wieder viel Arbeit gemacht.

Mein Ergebnis ist ..... es bleibt so wie es ist. Die Demos haben mir alle nicht gefallen. Ich wollte es eher fein und dezent. Codes ändern kommt nicht in Frage....

Das Ganze hat aber kein so hohen Stellenwert und ich kann mit der jetzigen Variante zum Start auch gut leben.

Danke Dir!

Gabe
Shopify Staff
17535 2773 4093

Super und gerne können wir die Themen nächste Woche wieder weiter besprechen! 

 

Ein schönes wünsche ich noch! 😉

 

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