FROM CACHE - de_header

Collection Description unter den Produkten anzeigen

RS6
Forscher
60 2 13

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):

 

Nike_Collection.JPG

 

 

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!

4 ANTWORTEN 4
Gabe
Shopify Staff
Shopify Staff
7506 1202 1950

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; }
}

 

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

r8r
Shopify Expert
2350 305 834

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

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
RS6
Forscher
60 2 13

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!

RS6
Forscher
60 2 13

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