Ich würde gerne Metaobjekte in meinem Shop auf der Startseite anzeigen, beispielsweise ein Angebot mit Bild, Überschrift, Text und Button. Das Metaobjekt mit den passenden Feldern habe ich angelegt.
Jetzt habe ich nur noch Probleme, dieses auch auf der Startseite anzuzeigen, da ich ja ein Metafeld erstellen muss, welches auf diesen Metaobjekteintrag hinweist.
Beim Hinzufügen einer neuen Section auf meiner Startseite ist mir aufgefallen, dass nur Markt-Metafelder/Metaobjekte für diese Section ausgewählt werden können, also habe ich ein Markt-Metafeld angelegt und auf mein Metaobjekt verwiesen.
In der Section kann ich es nun zwar als dynamische Quelle verbinden, aber ohne Ergebnisse. Es erscheint mir hier auch nicht logisch, wo ich festlege, welcher Eintrag der Metaobjektdefinition dargestellt werden soll.
Die Section bleibt also komplett leer, wo liegt hier mein Denkfehler?
Ich hatte gehofft, so flexibler Angebote einzustellen oder sogar einen gesamten Adventskalender zu erstellen, indem ich dann den Eintrag täglich ändere und vorher schon die Bilder und Beschreibungen für das jeweilige Türchen angelegt hatte.
Alternativ wäre hier bestimmt auch möglich, das liquid zu coden, welches dann jeden Tag einen anderen Eintrag darstellt. Idealerweise würde es aber mit den dynamischen Quellen funktionieren, da ich nicht so viel Expertise in dem Thema habe. Ich nutze das Dawn Theme.
Habe das Ganze dank KI so als benutzerdefiniertes Liquid umsetzen können:
/* Desktop Styling */
.advent-calendar {
display: flex;
gap: 2%; /* Flexibler Abstand zwischen Bild und Text */
align-items: center;
justify-content: space-between;
padding-left: 5%; /* Abstand links für Desktop */
padding-right: 5%; /* Abstand rechts für Desktop */
}
.advent-calendar__image {
flex: 1;
max-width: 100%; /* Bild wird skalierbar, aber nicht zu groß */
padding-left: 5vw; /* Abstand links auf Desktop (relativ zur Bildschirmbreite) */
}
.advent-calendar__image img {
width: 100%; /* Bild nimmt nun 100% der Breite des Containers ein */
max-width: none; /* Keine Begrenzung der maximalen Breite auf größeren Bildschirmen */
height: auto;
object-fit: contain; /* Bild wird angepasst, ohne es zu verzerren */
}
.advent-calendar__content {
flex: 1;
padding-left: 2%; /* Abstand links für Text auf Desktop */
padding-right: 2%; /* Abstand rechts für Text auf Desktop */
}
/* Mobile Styling */
@media (max-width: 767px) {
.advent-calendar {
display: block;
padding-left: 5%; /* Flexibler Abstand links auf mobilen Geräten */
padding-right: 5%; /* Flexibler Abstand rechts auf mobilen Geräten */
}
.advent-calendar__image {
width: 100%; /* Bild nimmt nun die gesamte Breite ein */
margin-bottom: 5vw; /* Abstand zwischen Bild und Text auf mobilen Geräten (relativ zur Breite) */
padding-left: 0; /* Kein Abstand nach links */
}
.advent-calendar__image img {
width: 100%; /* Bild auf volle Breite setzen */
height: auto; /* Verhältnismäßige Skalierung */
object-fit: cover; /* Bildfüllung beibehalten, ohne es zu verzerren */
}
.advent-calendar__content {
padding-left: 5%; /* Dynamischer Abstand links für Text auf mobilen Geräten */
padding-right: 5%; /* Dynamischer Abstand rechts für Text auf mobilen Geräten */
}
}