Kategorie-Seite im Craft Template anpassen

[vdNL]

Hallo zusammen,

ich nutze das Craft Template und habe verschiedene Kategorie-Seiten erstellt. Nachdem ich mich nun in das Thema SEO eingearbeitet habe, möchte ich nach und nach die Texte für die Kategorie-Seiten anpassen. Da die Texte etwas länger werden, wenn die Keywords sinnvoll verarbeitet werden sollen, wird leider das Bild verzerrt dargestellt. Der Shopify Support konnte mir hier nicht weiterhelfen. Ich kann zwar das Bild ausblenden, dann erscheint aber auf der rechten Seite ein leerer Platzhalter für ein Bild. Muss ich hier den Code anpassen (lassen)? Gibt es andere Möglichkeiten, im Craft Thema das Bild auf einer vernünftigen Größe zu belassen, wenn der Text länger wird. Hier ist ein Beispiel: https://niksen-lifestyle.com/collections/taschen. Das Bild hat ein 16:9 Format.

Danke für eure Hilfe!

[Gabe]

Hey @vdNL 

Die Themes sind so gebaut dass ein Eingriff in den Code vermeiden werden kann und soll. Ä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. 

Unsere Free Themes sind aber diesbzgl. etwas limitiert was die Bilder Dimensionen angeht auf verschiedenen Bildschirmgrößen und auch mit versch. Formaten und Dimensionen. Das können unsere Premium Themes einfach besser. Hast du welche testen können?

Wenn du es doch selber DIY auf deiner Seite 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. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Das Ziel ist, das Bild im richtigen Seitenverhältnis darzustellen, unabhängig von der Textlänge. Eine einfache Lösung ist die Verwendung von object-fit, um sicherzustellen, dass das Bild nicht verzerrt wird:

.collection-hero__image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

Du kannst auch Flexbox verwenden, um sicherzustellen, dass das Layout flexibel bleibt und Bild und Text nebeneinander in einem ausgewogenen Verhältnis angezeigt werden:

.collection-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.collection-hero__text-wrapper {
    flex: 1 1 50%;
    padding: 20px;
}

.collection-hero__image-container {
    flex: 1 1 50%;
}

Um sicherzustellen, dass das Layout auch auf mobilen Geräten gut funktioniert, kannst du eine media query hinzufügen, um das Verhalten des Bildes auf kleineren Bildschirmen zu steuern:

@media (max-width: 768px) {
    .collection-hero__inner {
        flex-direction: column;
    }

    .collection-hero__image-container {
        width: 100%;
    }

    .collection-hero__text-wrapper {
        width: 100%;
        padding: 10px;
    }
}

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.