Collection Description unter den Produkten anzeigen

[RS6]

Hey zusammen,

ich versuche gerade die Collection Description in der Kategorie, unter den Produkten anzeigen zu lassen.

Ich benutze das Debutify Theme, hier ist die Collection Description standardmäßig im Header, unter dem Collection Title (siehe Bild):

Um die Description unter den Produkten anzeigen zu lassen, habe ich diesen Code unter "{% endpaginate %}" eingefügt:

{% if collection.description %}
                  <p class="collection-description">{{ collection.description }}</p>
                {% endif %}

Den Code hab ich einfach aus dem oberen Code-Teil der Collection-Template.liquid genommen, er stand vorher hier:

 <div class="box">
    <div class="wrapper">

      {% if collection.handle == 'all' or collection.handle == 'frontpage' %}
        <div class="grid">
          <div class="grid__item large--eight-twelfths push--large--two-twelfths">
            <div class="section-header">
              <h1 class="page-title">{{ collection.title }}</h1>
              {% if collection.description %}
                <p class="collection-description">{{ collection.description }}</p>
              {% endif %}
            </div>
          </div>
        </div>
      {% else %}
        {% unless settings.show_hero and collection.image %}
          <div class="grid bob">
            <div class="grid__item large--eight-twelfths push--large--two-twelfths">
              <div class="section-header">
                <h1 class="page-title">{{ collection.title }}</h1>
                {% if collection.description %}
                  <p class="collection-description">{{ collection.description }}</p>
                {% endif %}
              </div>
            </div>
          </div>
        {% endunless %}
      {% endif %}

      {% if section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
        <div class="grid grid-uniform">

Aus diesem Code-Teil habe ich ihn entfernt, der Code-Teil sieht jetzt so aus:

<div class="box">
    <div class="wrapper">

      {% if collection.handle == 'all' or collection.handle == 'frontpage' %}
        <div class="grid">
          <div class="grid__item large--eight-twelfths push--large--two-twelfths">
            <div class="section-header">
              <h1 class="page-title">{{ collection.title }}</h1>
            </div>
          </div>
        </div>
      {% else %}
        {% unless settings.show_hero and collection.image %}
          <div class="grid bob">
            <div class="grid__item large--eight-twelfths push--large--two-twelfths">
              <div class="section-header">
                <h1 class="page-title">{{ collection.title }}</h1>
              </div>
            </div>
          </div>
        {% endunless %}
      {% endif %}

      {% if section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
        <div class="grid grid-uniform">

Die Collection Description wird jetzt, wie gewollt, unter den Produkten angezeigt. Allerdings auch noch im Header, unter dem Collection Title...Ich verstehe nicht warum, ich habe ja die Codeschnipsel entfernt.

Über Hinweise würde ich mich sehr freuen!

[Gabe]

Hey @RS6 

Danke für den Code und du möchtest das Collection Bild weiter nach unten und die Produkte nach oben platzieren, ist das richtig?

Da sehe ich Probleme mit {% endpaginate %} und das müsste man im theme.css einrichten. Und wichtig wäre die Frage, ob du das für Desktop oder Mobile machst. Wenn das erstere dann kann das dein Mobile UI und UX ziemlich zerschiessen. Hier wäre zu überlegen einen Experten wie @r8r, @tewe oder taskhusky.com zu engagieren.

Je nach Theme - leider kenne ich mich mit dem Debuify Theme nicht aus - müsste man im assets/theme.css sowas wie das folgende Code für Desktop einpflegen. ABER BITTE ZUERST IN EINER THEME-KOPIE:

@media only screen and (min-width: 750px){
.collection-hero__title {
font-size: calc(((var(--font-size-header) + 6) / (var(--font-size-base))) * 1em);
top: 100%;
z-index: 999;
position: initial;
margin-top: 70px;
}
}

Für Handy:

@media only screen and (max-width: 749px) {
.collection-hero__title {
position: initial;
margin-top: 70px;
}
}

Oder

@media only screen and (max-width: 749px){
.collection-hero__title { margin-top: 45px !important; }
.collection-hero { margin-bottom: 0px !important;  margin-top: -35px !important;  }
.template-collection header.collection-header h1{ font-size: 25px !important; }
}

[r8r]

@RS6 hast Du den Codeblock jetzt ganz rausgenommen? Ich find auf Deiner Nike-Collection-Seite gar kein .collection-description Element.

LG, Mario

[RS6]

Hey Mario, @r8r 

danke für deine Nachricht! Nein, die Collection Description hab ich nicht raus genommen, aktuell steht da nur nichts drin. Ich vermute dass du sie nicht finden kannst, weil sie wie ich dass verstanden habe, mit einem "if" Code eingefügt wird:

{% if collection.description %}

Ich habe meine Änderungen am Code wieder rückgängig gemacht. Trotz dem herausnehmen und unter dem {%endpaginate%} einfügen des "If" Codes, wurde die Beschreibung nämlich zusätzlich zum unteren Teil der Seite, im Header angezeigt...

Grüße, Leo

[RS6]

Hey @Gabe,

danke für deine Nachricht! Ich möchte, anders als im Bild, nur den Beschreibungstext aus dem oberen Teil der Seit entfernen. Er soll stattdessen nur am unteren Ende der Seite, unter den Produkten stehen. Das Collection-Bild soll im besten Fall so bleiben.

Danke für deinen Code, ich schaue mal, ob ich damit etwas anfangen kann!