Dawn Theme: Kategorieliste Titel ausblenden

[JoLiWaSch]

Hallo zusammen,

Ich nutze das DAWN-Themen und würde gerne in der Kategorie-Liste den Text unter den Bildern ausblenden, sodass nur noch das Bild klickbar ist (also den Text unter den Bildern).

  

Ich bin für jeden Tipp dankbar! 🙂

Liebe Grüße

Johanna

[Gabe]

Hey Johanna! @JoLiWaSch 

Das was du möchtest wird etwas Coding verlangen und ggf.  können wir es auf den CSS Editor beschränken, um zu vermeiden, dass Änderungen zu deinem Theme Code 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Dann wollte ich auch fragen, ob du auch andere Themes zum Shop hinzugefügt hast um sie zu testen? Das Free Dawn Theme ist super, bietet aber vielleicht nicht ganz so dasselbe Engagement und den Wow Faktor die unsere Premium Themes anbieten. Wenn du mir etwas über deine Story, deine Brand-Identity, und dein Zielpublikum erzählst, kann ich dir angepasste Theme Empfehlungen machen.

Um den Textbutton mit Pfeil unter den Sammlungsbildern im Shopify Dawn Theme auszublenden, so dass nur das Bild sichtbar und klickbar bleibt, wirst du CSS verwenden muessen, um diese spezifischen Elemente zu verbergen, aber ganz einfach wird das nicht sein denn diese Elemente sind tief in die Raster und Container der Kategorielisten-Page ge-hardcodet. 

Der zu ändernde Teil muss aber auf den Container card__information zielen, der den Titel und den Pfeil enthält. Um den Text inklusive des Pfeils unter den Bildern auszublenden habe ich diesen Code jetzt auf meiner Dawn Kategorielisten Page getestet:

.card__content .card__information {
    display: none;
}

Dieser Code bewirkt, dass der gesamte .card__information Container, der den Text und den Pfeil enthält, nicht angezeigt wird. Das Bild bleibt klickbar, wenn es umschließende Links (<a> Tags) gibt, wie im gegebenen HTML-Code der Fall ist.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.

[JoLiWaSch]

Hallo Gabe,

vielen Dank für deine schnelle Rückmeldung. Ich habe es direkt ausprobiert aber leider ist das Bild nun nicht mehr klickbar.

Was meinst du genau damit?

---

Das Bild bleibt klickbar, wenn es umschließende Links (<a> Tags) gibt, wie im gegebenen HTML-Code der Fall ist.

 Ich schätze, dass das in meinem Fall dann nicht gegeben ist oder?

Liebe Grüße

Johanna

[Gabe]

@JoLiWaSch 

Ja, mein CSS hat die Links aus den Bilder Kacheln in der Tat entfernt. Somit wird es jetzt kompliziert leider, Johanna.

Um die Links innerhalb der Bilder beizubehalten und gleichzeitig die Links und Pfeile unterhalb der Bilder zu entfernen, müssen wir den CSS-Selektor anpassen, um nur die spezifischen Elemente auszublenden, die nicht direkt mit dem Bild interagieren. Da die Links und die Pfeile sich im .card__content .card__information Container befinden, sieht es so aus, als müssten die <a> Tags innerhalb von .card__heading sowohl für die Überschriften als auch für die Bilder verwendet werden. Um sicherzustellen, dass die klickbaren Bilder erhalten bleiben, sollte man somit sicherstellen, dass der Link (<a> Tag) innerhalb des .card__media Containers nicht durch das Ausblenden von .card__information beeinträchtigt wird.

Basierend darauf, wenn jedoch die Bilder nicht klickbar sind, liegt das Problem möglicherweise woanders. Daher muessen die <a> Tags, die die Bilder umschließen, korrekt gecodet werden. Der CSS-Code, muss sicherstellen dass die <a> Tags tatsächlich um die Bildcontainer (div.card__media oder div.media--hover-effect) herum platziert sind. Wenn dies nicht der Fall ist, muss man in die Liquid Dateien gehen und den HTML-Code so anpassen, dass die <a> Tags die Bildcontainer umschließen, um sicherzustellen, dass die Bilder klickbar sind und zu den entsprechenden Kategorie-Seiten führen.

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!

[JoLiWaSch]

Also sollte wir das lieber an jemanden abgeben, der sich damit auskennt?

[Gabe]

@JoLiWaSch 

Es ist so dass du in die Liquid Dateien jetzt gehen musst, weil der CSS Editor alleine nicht mehr ausreicht, in die collection.liquid, collection-template.liquid

Suche den Teil des Codes, der für die Darstellung der Sammlungsbilder und -links verantwortlich ist. Dies könnte innerhalb einer Schleife sein, die über die Sammlungen iteriert (z.B. {% for collection in collections %}). Platziere die <a> Tags korrekt um die Bildcontainer (div.card__media oder div.media--hover-effect), wie Beispiel unten gezeigt. Stelle sicher, dass der gesamte Block, der das Bild enthält, innerhalb des Anker-(a) Tags liegt, um es klickbar zu machen.

Hier mein eigener Code und die CDN Links deinen eigenen Links anpassen:

<a href="/de/collections/alt" class="full-unstyled-link">
  <div class="card__media">
    <div class="media media--transparent media--hover-effect">
      <!-- Bildquelle hier -->
      <img src="//mind-mapper.co.uk/cdn/shop/collections/285535812_797468424516073_5061407582726710514_n.jpg" alt="Alt">
    </div>
  </div>
</a>

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Goaly29]

Hallo, ich möchte fragen, ob es für die Anforderung eine Lösung gab. Ich habe das selbe Thema im Theme TASTE. Der Vorschlag mit dem Benutzer CSS führt leider auch bei mir dazu, dass auch das Bild nicht mehr klickbar ist.

In welchem Modul befindet sich das besagte Coding für den Link-Bereich der angepasst werden muss?

Danke und Grüße,

Peter