Hey @Yannick1510
Danke für die Fragen und das Schreiben von vielem Blog Inhalt ist eine tolle Sache für deine Kunden. Das Einbinden einer Kategorie oder von Produkten mit bestimmten Tags direkt in einen Blogartikel in Shopify erfordert dennoch etwas fortgeschrittene Bearbeitung von deine Theme Liquid.
Zunächst müsstest du die Produkte mit dem gewünschten Tag mit einer IF-Statement oder FOR-Loop durchsuchen und dann in einer Grid-Struktur (wie das Kategorie-Raster im Dawn-Theme) darstellen, sowohl auf Desktop als auch auf Mobile in einer Weise das auch gut für die Barrierefreiheiten ist, was das ganze noch viel kompliziert macht.
Ein Liquid-Code wie den folgenden könnte das im Blog Liquid Code ggf. machen an der Stelle, wo du die Produkte anzeigen möchtest, aber das kann ich nicht bestätigen und alle Theme arbeiten im Code ja anders:
{% assign tag_name = 'Kirschholz' %}
<div class="product-grid">
{% for product in collections.all.products %}
{% if product.tags contains tag_name %}
<div class="product-item">
<a href="{{ product.url }}">
<img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
<p>{{ product.title }}</p>
<p>{{ product.price | money_with_currency }}</p>
</a>
</div>
{% endif %}
{% endfor %}
</div>
Möglicherweise musst du das auch mit. etwas CSS anpassen, um das Product Grid so zu gestalten, dass es dem Dawn-Theme ähnelt, sowohl auf Desktop als auch auf Handy. Hier nur ein einfaches CSS Beispiel und muss ggf. angepasst werden:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.product-item {
text-align: center;
border: 1px solid #eee;
padding: 10px;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-item p {
margin: 10px 0;
}
Der obige CSS-Code ist ein einfaches Grundgerüst, das sowohl auf Desktop- als auch auf Mobilgeräten funktionieren sollte. Das Grid-Layout mit grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); wird versuchen, so viele Elemente wie möglich nebeneinander zu platzieren, solange sie mindestens 200 Pixel breit sind, und sie sonst untereinander anordnen.
Allerdings könnten je nach dem genauen Design und den Anforderungen deines Themes weitere Optimierungen und Anpassungen für Mobilgeräte nötig sein. Zum Beispiel könntest du Media Queries verwenden, um spezifische Styles für verschiedene Bildschirmgrößen festzulegen.
Hier ist ein erweiterter CSS, der speziellere Anpassungen für mobile Geräte vornimmt:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.product-item {
text-align: center;
border: 1px solid #eee;
padding: 10px;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-item p {
margin: 10px 0;
}
/* Mobile-Anpassungen */
@media (max-width: 767px) {
.product-grid {
grid-template-columns: 1fr; /* Produkte nehmen auf mobilen Geräten die volle Breite ein */
gap: 10px; /* Reduzierter Abstand zwischen den Produkten */
}
.product-item {
padding: 5px; /* Reduzierter Padding für Produkte */
}
}
Mit dieser Erweiterung nimmt jedes Produkt auf Mobilgeräten (mit einer Breite von bis zu 767 Pixel) die volle Breite ein, und es gibt einige kleinere Anpassungen, um das Layout enger und besser für kleinere Bildschirme zu gestalten.
Aber wie immer ist es wichtig, den Code in deinem speziellen Shop und auf verschiedenen Geräten zu testen, um sicherzustellen, dass er wie gewünscht funktioniert.
Wenn du es selber 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.
Ä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 obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen! 😉
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
