FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Betreff: Kollektion - Titel entfernen auf mobiler Shop Version

Gelöst

Kollektion - Titel entfernen auf mobiler Shop Version

VSWildTom
Entdecker
28 1 4

Hallo Community, leider erneut ich mit einem Problem 😅

 

und zwar möchten wir gerne die Titel der Kollektionen "entfernen" bzw. zumindest ausblenden.

Mit diesem Tipp von @oscprofessional konnten wir bereits auf der Desktop Version das gewünschte Ergebnis erzielen:

VSWildTom_0-1722617014260.png

Unser Store Beispiel (wie es sein soll):

VSWildTom_1-1722617078525.png

 

 

 

Jedoch bleiben die Titel der Kollektionen auf der mobilen Version bestehen 😫

siehe Screenshots:

VSWildTom_2-1722617094076.png

 

Wir haben aktuell nur den folgenden Code unter dem base liquid eingefügt. Sonst keine Änderungen hierfür vorgenommen.

 

 

 

.card-wrapper.animate-arrow .card__heading {
	display: none;
}

 

 

 

 

Hat jemand eine Lösung? Vielen Dank!
Thomas
VS WILD

3 AKZEPTIERTE LÖSUNGEN
VIVID_24
Pfadfinder
104 8 23

Erfolg.

Hallo Thomas @VSWildTom ist wahrscheinlich irgendwie gekoppelt mit dem Bild. Aber ich habe mal ein Screenshot gemacht. Evtl. ist das eine Option für dich - die Beschreibung einfach kleiner machen ?

 

1.jpg

 

 

PS: Nachtrag man kann die Schriftgröße einfach auf 0rem stellen, dann ist die Schrift weg und das Bild ist weiterhin verlinkt. Habe es gerade probiert und geht

Lösung in ursprünglichem Beitrag anzeigen

Ben310
Astronaut
810 114 185

Erfolg.

Probiere es mal mit folgenden CSS um den Hyperlink innerhalb des Titels zu verschieben, sodass nur der Text des Titels ausgeblendet wird, aber nicht der Link selbst:

 

.card-wrapper.animate-arrow .card__heading {
    visibility: hidden;
}

@media (max-width: 767px) {
    .card__heading {
        visibility: hidden;
    }
}

 

visibility: hidden; um den Text unsichtbar zu machen, wobei Links sollten erhalten bleiben.

 

Oder den Link anders positionieren oder Text des Links transparent machen:

 

.card-wrapper.animate-arrow .card__heading a {
    color: transparent;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent;
    }
}

 

Mit Regel  !important :

 

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

 

Lösung in ursprünglichem Beitrag anzeigen

VSWildTom
Entdecker
28 1 4

Erfolg.

 

Edit://

Danke dir Ben und danke Markus @VIVID_24 - mit einer Kombination aus beiden eurer Vorschläge ist das Ergebnis nun nahezu perfekt!

 

Diesen Code als CSS von Ben:

 

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

 

 

plus die Idee von Markus mit der Schriftgröße hat es getan!

Danke euch vielmals

LG Thomas

 

Lösung in ursprünglichem Beitrag anzeigen

10 ANTWORTEN 10

Ben310
Astronaut
810 114 185

@VSWildTom 

 

Schwer zu sagen wenn du keinen Link zu einem Beispiel hier postest, oder wenigstens das Theme angibst. Das verlangsamt alles eine angepasste Lösung.

 

Das habe ich aber jetzt in meinem Dawn getestet und ihr, oder dein obiger Code vom Partner, verwendet scheinbar keine Media Queries die notwendig wären um das auch auf Mobile zu machen. Probier mal folgendes im CSS Editor deines Themes:

 

/* Standard Stil für Desktop */
.card-wrapper.animate-arrow .card__heading {
    display: none;
}

/* Stil für mobile Geräte */
@media (max-width: 767px) {
    .card__heading {
        display: none !important;
    }
}
VSWildTom
Entdecker
28 1 4

Hi Ben und danke für die Antwort!

 

Beispielscreenshots habe ich doch beigefügt; Kategoriebild ohne Titel - siehe Desktop Version:

VSWildTom_0-1722683034735.png

 


Die Infos zum Theme habe ich tatsächlich vergessen anzugeben. die Shop URL lautet https://vswild.store und wir nutzen das Spotlight Theme V. 15.0.1

 

Mit deinem vorgeschlagenen CSS ist zwar der Titel auf beiden devices nicht mehr zu sehen, jedoch ist der hyperlink zu der jeweiligen Kollektion dann weg und es bleibt nur noch die Grafik als solche über 😕

VIVID_24
Pfadfinder
104 8 23

Hey @VSWildTom da musst Du folgendes eingeben:

 

.card--standard>.card__content .card__information {
    display: none;
}
 
Gruß Markus
 
PS: Bin mir aber nicht sicher ob dann auch die Verlinkung weg ist
VSWildTom
Entdecker
28 1 4

Hi Markus und danke auch dir - leider hast du richtig angenommen und die Verlinkung ist dann auch hinüber

 

LG Thomas

VIVID_24
Pfadfinder
104 8 23

Erfolg.

Hallo Thomas @VSWildTom ist wahrscheinlich irgendwie gekoppelt mit dem Bild. Aber ich habe mal ein Screenshot gemacht. Evtl. ist das eine Option für dich - die Beschreibung einfach kleiner machen ?

 

1.jpg

 

 

PS: Nachtrag man kann die Schriftgröße einfach auf 0rem stellen, dann ist die Schrift weg und das Bild ist weiterhin verlinkt. Habe es gerade probiert und geht

VSWildTom
Entdecker
28 1 4

Hi Markus,

 

eine Laienfrage sorry: wie genau hast du spezifisch nur die Kategorie Titel/Beschreibung kleiner gemacht? Wenn ich im Theme die Typografie ändere, wirkt sich das auf alle Texte im Theme aus 🤔

 

Aber die Option klingt toll!

Ben310
Astronaut
810 114 185

Erfolg.

Probiere es mal mit folgenden CSS um den Hyperlink innerhalb des Titels zu verschieben, sodass nur der Text des Titels ausgeblendet wird, aber nicht der Link selbst:

 

.card-wrapper.animate-arrow .card__heading {
    visibility: hidden;
}

@media (max-width: 767px) {
    .card__heading {
        visibility: hidden;
    }
}

 

visibility: hidden; um den Text unsichtbar zu machen, wobei Links sollten erhalten bleiben.

 

Oder den Link anders positionieren oder Text des Links transparent machen:

 

.card-wrapper.animate-arrow .card__heading a {
    color: transparent;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent;
    }
}

 

Mit Regel  !important :

 

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

 

VSWildTom
Entdecker
28 1 4

Erfolg.

 

Edit://

Danke dir Ben und danke Markus @VIVID_24 - mit einer Kombination aus beiden eurer Vorschläge ist das Ergebnis nun nahezu perfekt!

 

Diesen Code als CSS von Ben:

 

.card-wrapper.animate-arrow .card__heading a {
    color: transparent !important;
}

@media (max-width: 767px) {
    .card__heading a {
        color: transparent !important;
    }
}

 

 

plus die Idee von Markus mit der Schriftgröße hat es getan!

Danke euch vielmals

LG Thomas

 

VIVID_24
Pfadfinder
104 8 23

Hallo Tomas @VSWildTom passt es dir so wie es jetzt ist ? Oder kann man noch helfen ?

 

Gruß Markus

VSWildTom
Entdecker
28 1 4

Hi Markus, sorry die Benachrichtigung zu deiner Antwortfrage ging unter.


Ist vollkommen in Ordnung so! Sieht gut aus, danke dir nochmal für die Hilfe 

 


LG Thomas