Produktnamen in Produkteübersicht (in Kategorie) kleingeschrieben, nicht wie definiert (Veena)

[DavidCommerce24]

Guten Tag alle zusammen,

unsere Produktnamen werden in der Produkteübersicht (innerhalb einer Kategorie; also dort, wo man Produkte suchen und filtern kann) nicht wie vorher in Shopify bzw. der App "Multivendor Marketplace", die wir derzeit verwenden, angezeigt. Auf der Einzelproduktseite wird der Name allerdings wieder richtig angezeigt!

Genauer gesagt wird in der Produkteübersicht der Produktname mit Großbuchstaben am Anfang und der Rest vollständig kleingeschrieben. Die Produktnamen enthalten innerhalb der App (und auch in Shopify) allerdings mehrere Wörter mit Groß- und Kleinschreibung - manche Wörter in klein, manche mit groß/klein, etc., also ein einfaches "capitalize" würde das Problem leider noch nicht lösen.

Ein Überblick für ein besseres Verständnis:

(Produktenamen in Produkteübersicht)

(Produktname in Shopify, inkl. Groß-/Kleinschreibung)

(Produktname in App, inkl. Groß-/Kleinschreibung)

 

(Richtiger Produktname in Einzelansicht)

Ich habe bereits im Code des Themes nacheinander Anpassungen in der base.css versucht - bei .card / .link / .full-unstyled-link. Dort habe ich jeweils ein "text-transform: none;" ausprobiert.

Sieht bspw. so aus:

.full-unstyled-link {
    text-decoration: none;
    /* color: currentColor; */
    display: block;
    text-transform:none;
}

Leider ohne Veränderung. Es scheint, als würde der Produktname falsch gezogen werden oder aber die Text-Anpassung geschieht an einer anderen Stelle des Codes. Laut App-Anbieter liegt es wahrscheinlich nicht an der App.

Unser Theme heißt übrigens VEENA.

Hat jemand von euch Erfahrungen damit oder kann generell helfen?

Liebe Grüße und danke im Vorraus!

[Gabe · Accepted solution]

Hey @DavidCommerce24 

Das ganze ist schwer von hier aus zu sagen und verlangt einen Deep Dive in euer Theme Code eines Experten. Habt ihr mit den Theme Entwickler sprechen können?

Wie du sagst, ein text-transform-Eigenschaft wird in eurem Veena Theme verwendet und ihr müsst sicherstellen, dass sie auf none gesetzt ist. Finde die spezifische Klasse oder ID, die für die Produktnamen in der Kategorieübersicht verwendet wird. Wenn du dir nicht sicher bist, welche Klasse oder ID verwendet wird, kannst du das Inspektor-Tool deines Browsers verwenden, um die genaue Struktur zu identifizieren und einen CSS wie den folgenden hinzufügen:

.product-card-title, .product-title, .card__name, .card__title, .collection__title {
    text-transform: none !important;
}

Es könnte sein, dass die Texttransformation direkt im HTML oder durch ein JavaScript-Skript angewendet wird. Überprüfe die relevanten Liquid-Dateien (z.B. collection.liquid, product-card.liquid, product-grid.liquid) auf direkte Texttransformationen. Entferne oder passe alle text-transform-Eigenschaften in diesen Dateien an:

<!-- Beispiel: product-card.liquid -->
<a href="{{ product.url }}" class="product-card-title">
    {{ product.title }}
</a>

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.

[DavidCommerce24]

Vielen vielen lieben Dank!

Deine Antwort war eine große Hilfe und hat mich auf die richtige Fährte gebracht.

Das Inspektor-Tool hatte ich bereits genutzt, aber konnte lediglich die Hälfte von den Infos im Code auch wieder ausfindig machen.

Letztendlich hat sich sich ein ungewolltes "capitalize" in der "card-product.liquid" versteckt:

Der Code sieht jetzt so aus:

<h3 class="cardhide_toggle card__heading{% if card_product.featured_media or card_style == 'standard' %} h5{% endif %}" {% if card_product.featured_media or card_style == 'card' %} id="title-{{ section_id }}-{{ card_product.id }}" {% endif %}>
<a href="{{ card_product.url | default: '#' }}" id="CardLink-{{ section_id }}-{{ card_product.id }}" class="full-unstyled-link" aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}" >
{{ card_product.title | escape }}</a>
</h3>

Vielen Dank!

[Gabe]

Hey @DavidCommerce24 

Klasse, freut mich! Wie hat der Hannibal vom A-Team es so schön gesagt:

In deinem Beispielbild war es also ein ungewolltes capitalize  dass du dann entfernt hast oder die Texttransformation auf none gesetzt:

{{ card_product.title | escape }}

Anstatt:

{{ card_product.title | escape | capitalize }}

Teu teu teu mit deinem Shop! 😉