Falsche Darstellung Wort "Maße"

[Anja73]

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

Anja

[Gabe · Accepted solution]

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:

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 · Accepted solution]

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 · Accepted solution]

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 · Accepted solution]

Hey Anja!  @Anja73 

Danke für die Fragen und ich bin kein Bringer der News die du vielleicht erwartest Anja:

• Der "Kontaktinformationen" Link in der Fußzeile des Checkout wurde neulich als Kästchen zu den Richtlinien in den Einstellungen und zum 1-Page Checkout hinzugefügt aufgrund DSGVO. Es ist jetzt Gesetz, dass dieser Link auf alle Checkouts angezeigt werden muss laut unserer Rechtsabteilung. Du kannst aber den Inhalt dieses Kästchen im Bereich "Richtlinien" leer lassen wenn du möchtest. Ich würde aber etwas da eingeben denn das sieht dann einfach professioneller aus und verbessert die Erfahrung aller Kunden die eine schnelle Kontaktmöglichkeit suchen falls irgendetwas im Checkout Flow für sie schief läuft.
• Die DCB Buttons wie PayPal oder Shop Pay im ersten Schritt des Checkouts sind jetzt nur entfernbar wenn du im Bereich "Einstellungen -> Zahlungen" die Digital Wallets, wie PayPal komplett deaktivierst da der neue Checkout jetzt nur mit Checkout UI Extensions und Shopify Functions bearbeitbar ist. Es kann sein dass unsere Entwickler einen "Toggle Button" zu diesen Buttons in der Zukunft hinzufügen werden, wenn eine kritische Masse der Shopinhaber das verlangen. Du kannst aber auch eine App wie Yagi Express Payment Hider verwenden um PayPal da nicht anzuzeigen. Der Axel ist scheinbar sehr hilfreich und macht das für dich wenn du ihn hier mailst: axel@yagisoftware.com .

Warum möchtest du den Button aus den Checkout entfernen? Ist weil du meinst die Kunden denken sie müssen damit zahlen und die anderen Zahlungsmethoden weiter unten sehen übersehen?

Wenn ja, dann kannst du ganz einfach diesen Text ändern um den Button da zu lassen ohne die Kunden zu verwirren:

Copy & Paste einen dieser Strings in das Kästchen in den standard Theme Texte:

• ⬇️⬇️ Es gibt mehr Zahlungsmethoden weiter unten. Weitere Anweisungen wahlweise hier... ⬇️⬇️
• ⬇️⬇️ BITTE BEACHTE: Es gibt mehr Zahlungsmethoden weiter unten! ⬇️⬇️

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

[Gabe · Accepted solution]

Hey Anja! @Anja73 

Deine Fußzeile im Shop sieht perfekt aus. Da brauchst du nicht mehr viel machen. Desweiteren, der PayPal Digital Wallet Button im Checkout kann derzeit nur durch die "Hide" App oder Zahlungs-Einstellungen im Admin entfernt werden derzeit.

• Ich handel zum Start ausschließlich in Deutschland und habe nur folgende Versandkosten: ab 49 € -- versandkostenfrei und unter 49 € --5,99 €. Besteht die Möglichkeit das bereits im Warenkorb und Checkout die Versandkosten angezeigt werden und nicht erst wenn man die Versandadresse eingegeben hat?

Hier haben wir es mit einem Problem der Logik im Kauf-Funnel zu tun - das System kann im Cart ja noch keine deiner zwei Versandtarife anzeigen da es ja noch keine Kundendaten sowie weitere notwendige Daten besitzt. Diese besitzt das System erst im 2./3. Schritt des Checkouts um den korrekten Versandtarif anzuzeigen.

Aber du kannst gerne einen Hinweis auf der PDP und der Cart Page über einen Text Block hinzufügen wie:

• Wir bieten ab einer Bestellungen mit >49 € alles versandkostenfrei und unter 49 € --5,99 €. 

Wie hört sich das an? Oder schau dir mal diese tolle Demo an, mit der du die Kundenerfahrung, deine Conversions, und den AOV so richtig erhöhen kannst:

• Free Boost Shipping Banner - "Only €X left for free shipping Progress Bar!"

Einige Frontend Apps können auch das Theme Code ändern und damit die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation.

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

[Gabe · Accepted solution]

Hey @Anja73 

Schwer zu sagen wie diese Lücke da sich reingeschlichen hat. Probiere mal folgendes:

Hier der CSS dazu der für mich oben abgebildet gefunzt hat:

.footer__content-top,
.footer__content-bottom {
  padding-bottom: 10px; /* Anpassung des unteren Paddings */
  margin-bottom: 10px;  /* Anpassung des unteren Randes */
}

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

[Gabe · Accepted solution]

@Anja73 

Ich habe leider keinen Zugriff auf die standard Theme Texte in meinem Test-B-Yours Theme aber du findest beide Texte vielleicht in der englischen Fassung wenn nicht in der deutschen:

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

[Kai]

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?

[Anja73]

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]

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?

[Anja73]

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?

Vielen Dank und Grüße

Anja

[Gabe · Accepted solution]

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:

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.

[Anja73]

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ückt

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.

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 · Accepted solution]

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! 😉

[Anja73]

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]

Hey Anja! 

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

Poste hier jederzeit weitere Fragen sobald sie aufkommen!

VG,

[Anja73]

Hallo @Gabe ,

Theme "Be Yours" + App Translate & Adapt

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

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

Läßt sich das umsetzen?

Vielen Dank und Grüße

Anja

[Gabe]

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:

• E-Translate
• G-Translate
• Hextom
• Weglot
• Transcy
• Langshop
• Translation Lab

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

[Anja73]

Hallo Gabe, @Gabe 

ich glaube, du hast mich falsch verstanden 🙂

Ich hätte es gerne optisch so

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

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

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 · Accepted solution]

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! 😉

[Anja73]

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]

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

Ein schönes wünsche ich noch! 😉

[Anja73]

Hallo Gabe, @Gabe 

ist es ok, wenn ich Fragen zu einem neuen Thema einfach hier weiterstelle oder sollte ich besser einen neuen Beitrag öffnen?

Ich bin mit der Fußzeile angefangen...... und da es rechtlich nicht erforderlich ist möchte ich gerne das der Punkt "Kontaktinformationen" nicht angezeigt wird. Wie kann ich den entfernen ?

Vielen Dank und Grüße

Anja

[Anja73]

Hallo Gabe, @Gabe 

ich hätte gerne beim Checkout den "Express Checkout" entfernt.

Danke Dir und viele Grüße

Anja

[Gabe · Accepted solution]

Hey Anja!  @Anja73 

Danke für die Fragen und ich bin kein Bringer der News die du vielleicht erwartest Anja:

• Der "Kontaktinformationen" Link in der Fußzeile des Checkout wurde neulich als Kästchen zu den Richtlinien in den Einstellungen und zum 1-Page Checkout hinzugefügt aufgrund DSGVO. Es ist jetzt Gesetz, dass dieser Link auf alle Checkouts angezeigt werden muss laut unserer Rechtsabteilung. Du kannst aber den Inhalt dieses Kästchen im Bereich "Richtlinien" leer lassen wenn du möchtest. Ich würde aber etwas da eingeben denn das sieht dann einfach professioneller aus und verbessert die Erfahrung aller Kunden die eine schnelle Kontaktmöglichkeit suchen falls irgendetwas im Checkout Flow für sie schief läuft.
• Die DCB Buttons wie PayPal oder Shop Pay im ersten Schritt des Checkouts sind jetzt nur entfernbar wenn du im Bereich "Einstellungen -> Zahlungen" die Digital Wallets, wie PayPal komplett deaktivierst da der neue Checkout jetzt nur mit Checkout UI Extensions und Shopify Functions bearbeitbar ist. Es kann sein dass unsere Entwickler einen "Toggle Button" zu diesen Buttons in der Zukunft hinzufügen werden, wenn eine kritische Masse der Shopinhaber das verlangen. Du kannst aber auch eine App wie Yagi Express Payment Hider verwenden um PayPal da nicht anzuzeigen. Der Axel ist scheinbar sehr hilfreich und macht das für dich wenn du ihn hier mailst: axel@yagisoftware.com .

Warum möchtest du den Button aus den Checkout entfernen? Ist weil du meinst die Kunden denken sie müssen damit zahlen und die anderen Zahlungsmethoden weiter unten sehen übersehen?

Wenn ja, dann kannst du ganz einfach diesen Text ändern um den Button da zu lassen ohne die Kunden zu verwirren:

Copy & Paste einen dieser Strings in das Kästchen in den standard Theme Texte:

• ⬇️⬇️ Es gibt mehr Zahlungsmethoden weiter unten. Weitere Anweisungen wahlweise hier... ⬇️⬇️
• ⬇️⬇️ BITTE BEACHTE: Es gibt mehr Zahlungsmethoden weiter unten! ⬇️⬇️

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

[Anja73]

Hallo Gabe, @Gabe 

erstmal vielen Dank.

Nochmals zum Thema "Kontaktinformationen" unter dem Rechlichen in der Fußzeile. Ich habe mir jetzt gedacht, dass ich das Rechtliche wie unten gezeigt in die Fußzeile als Spalte einfüge, da ich diesen Bereich sonst frei hätte und es sah sehr leer aus. Daher habe ich jetzt die Spalten Rechtliches und Wichtiges eingefügt. Wenn ich dich richtig verstanden habe dann müsste ich da jetzt noch den Punkt "Kontaktinformation" zufügen, da es eine neue rechtliche Auflage ist? Für mich stellt sich noch die Frage, da ich diesen Punkt bisher nirgends gesehen habe..... was trägt man dort ein? Reicht es wenn ich dort nur meine Mailadresse angeben oder was ist im allgemeinen üblich? Schreibt man noch etwas anderes dazu?

So würde meine Fußzeile aussehen. Hast du Anmerkungen/Verbesserungen dazu?

Vielen Dank und Grüße

Anja

[Anja73]

Hallo @Gabe,

den Button möchte ich daraus haben weil ich ihn dominant und aufdringlich finde. Bin ich als Käufer in Onlineshops unterwegs finde ich es äußerst störend wenn ich beim Checkout als erstes auf diesen großen Express Button stoße. Er nimmt Platz weg und ich muss noch mehr nach unten scrollen um zu meiner Auswahl zu kommen.

Ich habe jetzt deine vorgeschlagene Variante mit dem Infosatz gewählt. Danke dir. Dieses konnte ich schnell alleine umsetzen,

Viele Grüße

Anja

[Anja73]

Hallo Gabe, @Gabe 

ich handel zum Start ausschließlich in Deutschland und habe nur folgende Versandkosten: ab 49 € -- versandkostenfrei und unter 49 € --5,99 €.

Besteht die Möglichkeit das bereits im Warenkorb und Checkout die Versandkosten angezeigt werden und nicht erst wenn man die Versandadresse eingegeben hat?

Dann noch eine Frage.....

Welche App zum Thema Cookie Banner würdest du empfehlen?

Viele Grüße und großen Dank

Anja

[Gabe · Accepted solution]

Hey Anja! @Anja73 

Deine Fußzeile im Shop sieht perfekt aus. Da brauchst du nicht mehr viel machen. Desweiteren, der PayPal Digital Wallet Button im Checkout kann derzeit nur durch die "Hide" App oder Zahlungs-Einstellungen im Admin entfernt werden derzeit.

• Ich handel zum Start ausschließlich in Deutschland und habe nur folgende Versandkosten: ab 49 € -- versandkostenfrei und unter 49 € --5,99 €. Besteht die Möglichkeit das bereits im Warenkorb und Checkout die Versandkosten angezeigt werden und nicht erst wenn man die Versandadresse eingegeben hat?

Hier haben wir es mit einem Problem der Logik im Kauf-Funnel zu tun - das System kann im Cart ja noch keine deiner zwei Versandtarife anzeigen da es ja noch keine Kundendaten sowie weitere notwendige Daten besitzt. Diese besitzt das System erst im 2./3. Schritt des Checkouts um den korrekten Versandtarif anzuzeigen.

Aber du kannst gerne einen Hinweis auf der PDP und der Cart Page über einen Text Block hinzufügen wie:

• Wir bieten ab einer Bestellungen mit >49 € alles versandkostenfrei und unter 49 € --5,99 €. 

Wie hört sich das an? Oder schau dir mal diese tolle Demo an, mit der du die Kundenerfahrung, deine Conversions, und den AOV so richtig erhöhen kannst:

• Free Boost Shipping Banner - "Only €X left for free shipping Progress Bar!"

Einige Frontend Apps können auch das Theme Code ändern und damit die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation.

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

[Anja73]

Hallo Gabe, @ Gabe

vielen Dank für die Infos. Da ich mit dem Theme "Be Yours" arbeite habe ich die Info zum kostenlosen Versand bereits integriert.

Noch eine Frage zu meiner Fußzeile.

Mir gefällt der größere Leerraum (habe ich in rot markiert) nicht. Kann man die Zahlungsarten und meinen Firmennamen weiter nach oben schieben, so das dieser große Leerraum geringer wird?

Viele Grüße

Anja

[Gabe · Accepted solution]

Hey @Anja73 

Schwer zu sagen wie diese Lücke da sich reingeschlichen hat. Probiere mal folgendes:

Hier der CSS dazu der für mich oben abgebildet gefunzt hat:

.footer__content-top,
.footer__content-bottom {
  padding-bottom: 10px; /* Anpassung des unteren Paddings */
  margin-bottom: 10px;  /* Anpassung des unteren Randes */
}

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

[Anja73]

Hallo Gabe, @Gabe 

zur Erinnerung...... Theme Be Youras und Kontaktformular  🙂

Der rot umrandete Text ist dort vorgegeben und der passt nicht. Der müsste bitte entfernt werden und ich würde gerne dafür folgendes eintragen mit der Verlinkung meiner Datenschutzerklärung.

» Bitte beachten Sie unsere Datenschutzerklärung.

Vielen Dank und Grüße

Anja

[Anja73]

Hallo Gabe, @ Gabe

den einen Satz (mit der Sie-Form) habe ich sofort gefunden, dank deiner Hilfe gefunden, aber den Absatz mit dem reCAPTCHA und die Verlinkung zu Google  (siehe oben) da fehlt mir noch eine Lösung. Hast du noch eine Idee?

Viele Grüße

Anja

[Gabe · Accepted solution]

Hey Anja! @Anja73 

Das habe ich gerade in der B-Yours Doku angeschaut und dieser reCAPTCHA Text ist im Liquid fest-codiert, und du wie folgt finden solltest:

Bitte alle weiteren Fragen diesbzgl. an die Theme Entwickler weiterleiten, danke!

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

[Anja73]

Hallo Gabe, @Gabe 

sorry...... habe schon wieder ein Problem.

Ich bin aktuell dabei das Kontaktformular schick zu machen 🙂

Ich müsste den roten Text ändern (ich verwende die Du-Form in meinem Shop). Leider finde ich nicht den Ort wo ich es ändern kann,

Danke Dir.

Viele Grüße

Anja

[Gabe · Accepted solution]

@Anja73 

Ich habe leider keinen Zugriff auf die standard Theme Texte in meinem Test-B-Yours Theme aber du findest beide Texte vielleicht in der englischen Fassung wenn nicht in der deutschen:

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

[Gabe]

Apropos @Anja73 

Erstelle doch eine schönere Kontaktform mit unserer Forms App - mehr dazu hier.

[Anja73]

@Gabe

Habe ich mir angeschaut und....... steht bei den Bewertungen nicht besonders gut da und ich befürchte, dass ich damit dann überfordert bin, wenn es nicht rund läuft.