FROM CACHE - de_header
Gelöst

Shopify | Spotlight Theme – Inhalt in der Card von "Featured Product Section" zentrieren

nantan
Neues Mitglied
4 0 0

Liebe Community

Ich bin noch neu bei Shopify und möchte gerne den Text in der Card von "Featured Product Section" unt erhalb des Bildes horizontal mittig zentrieren. Ich habe dazu keine Lösung gefunden, die hilft. Ich habe eine Printscreen angehängt: 

Bildschirmfoto 2024-02-02 um 12.59.24.png

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18047 2853 4197

Erfolg.

Hey @nantan 

 

Du scheinst auf dem richtigen Weg zu sein!

 

Die Verwendung von text-align: center; in der CSS-Class .card ist eine übliche Methode, um Inhalt innerhalb eines Blockelements zu zentrieren. Die Variable --text-alignment, die du in der ursprünglichen CSS-Class .card erwähnst, scheint ein CSS Custom Property (CSS Variable) zu sein. Diese Variablen werden üblicherweise genutzt, um Werte wiederverwendbar zu machen und sie an einer Stelle im Stylesheet zu definieren, sodass Änderungen an dieser Stelle sich durch das gesamte Stylesheet hindurch auswirken können. Sie wird wahrscheinlich irgendwo in deinem CSS definiert und um den Wert dieser Variable zu finden und zu ändern, musst du nach einer Regel suchen, die wie folgt aussieht:

 

:root {
  --text-alignment: left; /* Oder ein anderer Wert */
}

 

Oder sie könnte innerhalb eines spezifischen Selektors definiert sein, um nur bestimmte Elemente zu beeinflussen:

 

.selector {
  --text-alignment: left; /* Oder ein anderer Wert */
}

 

Du könntest auch die Developer Console deines Browsers nutzen, um herauszufinden, wo die Variable definiert ist, indem du nach --text-alignment suchst.

 

In Bezug auf die CSS Class .card-information > .price hast du ebenfalls die richtige Entscheidung getroffen, indem du text-align: center; hinzugefügt hast. Das direkte Zentrieren des Preises innerhalb seiner Containerklasse ist eine saubere Lösung, wenn es um die spezifische Anpassung von Stilelementen geht.

 

Es ist gut, dass du das Ergebnis überprüft hast und es optisch stimmig ist. Das ist häufig das Wichtigste bei Front-End-Anpassungen. Es ist jedoch auch wichtig, den Code sauber und wartbar zu halten. Hier sind ein paar Tipps, wie du sicherstellen kannst, dass deine Lösung nicht nur funktioniert, sondern auch gut wartbar ist:

  1. Vermeide globale Änderungen: Wenn du eine Variable wie --text-alignment änderst, die an mehreren Stellen verwendet wird, könntest du unbeabsichtigt andere Elemente beeinflussen. Es ist oft sicherer, Änderungen so lokal wie möglich vorzunehmen.

  2. Kommentare hinterlassen: Wenn du eine Änderung vornimmst, hinterlasse einen Kommentar im Code, warum diese Änderung vorgenommen wurde. Dies ist hilfreich, wenn du oder jemand anderes später den Code überprüft.

  3. Konsistenz bewahren: Achte darauf, dass die Stile konsistent über die gesamte Webseite angewendet werden. Wenn überall sonst text-align: center; verwendet wird, ist es gut, dabei zu bleiben.

  4. Responsive Design: Stelle sicher, dass deine Änderungen auch auf verschiedenen Bildschirmgrößen und Geräten gut aussehen.

  5. Testen: Teste die Änderungen in verschiedenen Browsern, um sicherzustellen, dass sie überall wie erwartet funktionieren.

Wenn du diese Punkte beachtest, kannst du sicherstellen, dass deine Lösungen nicht nur funktionieren, sondern auch langfristig gut zu warten sind.

 

Das hast du etwas zu tun übers Wochenende. Wir sind am Montag wieder hier! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

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

4 ANTWORTEN 4

Kai
Shopify Staff
2359 543 363

Hi @nantan ,

vielen Dank für deinen Post.

 

Kennst du die Chrome DevTools? Mit denen kann man ohne Auswirkungen auf den eigentlichen Code des Shops Anpassungen daran ausprobieren. 

 

Wenn du mit die URL zu deinem Shopify Shop nennst, kann ich gerne einmal schauen, wie man mit einer Codeänderung in deinem Shopify Shop die Zentrierung der Produkttitel in der Featured Products Section zentrieren kann.

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

nantan
Neues Mitglied
4 0 0

Hi Kai, vielen Dank für deinen Tipp. Ich habe die 2 css Klassen mit dem Dev. Tool gefunden und diese in der entsprechenden Datei geändert. Ich glaube aber nicht, dass ich das wirklich sauber lösen konnte:

 

vorher:

.card {
text-decoration: none;
text-align: var(--text-alignment);

}

 

nachher:

.card {
text-decoration: none;
text-align: center
}

 

Muss ich es so anpassen oder muss ich die Variable anpassen? Wo wäre dieser var Wert gespeichert?

 

Ausserdem musste ich noch bei einer 2. Klasse einen die Zeile text-align: center anfügen:

.card-information>.price {
color: rgb(var(--color-foreground));
text-align: center;
}

 

Das Ergebnis stimmt optisch, aber ist es auch eine gute Lösung?

 

Viele Grüsse

Nantan

Gabe
Shopify Staff
18047 2853 4197

Erfolg.

Hey @nantan 

 

Du scheinst auf dem richtigen Weg zu sein!

 

Die Verwendung von text-align: center; in der CSS-Class .card ist eine übliche Methode, um Inhalt innerhalb eines Blockelements zu zentrieren. Die Variable --text-alignment, die du in der ursprünglichen CSS-Class .card erwähnst, scheint ein CSS Custom Property (CSS Variable) zu sein. Diese Variablen werden üblicherweise genutzt, um Werte wiederverwendbar zu machen und sie an einer Stelle im Stylesheet zu definieren, sodass Änderungen an dieser Stelle sich durch das gesamte Stylesheet hindurch auswirken können. Sie wird wahrscheinlich irgendwo in deinem CSS definiert und um den Wert dieser Variable zu finden und zu ändern, musst du nach einer Regel suchen, die wie folgt aussieht:

 

:root {
  --text-alignment: left; /* Oder ein anderer Wert */
}

 

Oder sie könnte innerhalb eines spezifischen Selektors definiert sein, um nur bestimmte Elemente zu beeinflussen:

 

.selector {
  --text-alignment: left; /* Oder ein anderer Wert */
}

 

Du könntest auch die Developer Console deines Browsers nutzen, um herauszufinden, wo die Variable definiert ist, indem du nach --text-alignment suchst.

 

In Bezug auf die CSS Class .card-information > .price hast du ebenfalls die richtige Entscheidung getroffen, indem du text-align: center; hinzugefügt hast. Das direkte Zentrieren des Preises innerhalb seiner Containerklasse ist eine saubere Lösung, wenn es um die spezifische Anpassung von Stilelementen geht.

 

Es ist gut, dass du das Ergebnis überprüft hast und es optisch stimmig ist. Das ist häufig das Wichtigste bei Front-End-Anpassungen. Es ist jedoch auch wichtig, den Code sauber und wartbar zu halten. Hier sind ein paar Tipps, wie du sicherstellen kannst, dass deine Lösung nicht nur funktioniert, sondern auch gut wartbar ist:

  1. Vermeide globale Änderungen: Wenn du eine Variable wie --text-alignment änderst, die an mehreren Stellen verwendet wird, könntest du unbeabsichtigt andere Elemente beeinflussen. Es ist oft sicherer, Änderungen so lokal wie möglich vorzunehmen.

  2. Kommentare hinterlassen: Wenn du eine Änderung vornimmst, hinterlasse einen Kommentar im Code, warum diese Änderung vorgenommen wurde. Dies ist hilfreich, wenn du oder jemand anderes später den Code überprüft.

  3. Konsistenz bewahren: Achte darauf, dass die Stile konsistent über die gesamte Webseite angewendet werden. Wenn überall sonst text-align: center; verwendet wird, ist es gut, dabei zu bleiben.

  4. Responsive Design: Stelle sicher, dass deine Änderungen auch auf verschiedenen Bildschirmgrößen und Geräten gut aussehen.

  5. Testen: Teste die Änderungen in verschiedenen Browsern, um sicherzustellen, dass sie überall wie erwartet funktionieren.

Wenn du diese Punkte beachtest, kannst du sicherstellen, dass deine Lösungen nicht nur funktionieren, sondern auch langfristig gut zu warten sind.

 

Das hast du etwas zu tun übers Wochenende. Wir sind am Montag wieder hier! 😉

---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!

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

nantan
Neues Mitglied
4 0 0

Vielen Dank für die schnelle und kompetente Unterstützung 🙂