Einfügen von Custom CSS Code

Deutsch Diskussion Technische Fragen & Antworten

Topic summary

Ein Nutzer versucht, eine Hover-Animation mit CSS-Code in seinen Shopify-Shop einzufügen, jedoch wird der Code nicht übernommen.

Vorgeschlagene Lösungsansätze:

  • Den Code direkt in die base.css-Datei ganz unten einfügen
  • Testen des CSS-Codes über Browser-Entwicklertools (F12), um zu prüfen, ob die Animation grundsätzlich funktioniert
  • Überprüfung im “Elements”-Tab und “Styles”-Bereich der Entwicklertools
  • Möglicherweise handelt es sich um nicht-unterstützten CSS im Online-Editor

Aktueller Stand:
Der Code funktioniert zwar, lässt sich aber weder über den CSS-Editor noch in die base.css hochladen. Das Problem bleibt ungelöst, weitere Hilfestellung wurde angeboten.

Hinweis: Der ursprüngliche Code-Snippet enthält teilweise gespiegelten/umgekehrten Text, was auf ein Formatierungsproblem hindeutet.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hallo, letztens wollte ich probieren die Hover animation besser zu gestalten jedoch übernimmt shopify diese leider nicht…

Das ist der Code:

a {
position: relative;
}
a::before {
content: “”;
position: absolute;
width: 40%;
height: 3px;
border-radius: 4px;
background-color: #18272f;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}

Wenn ich es speicher möchte, kommt nur “Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden”

Dan

2

Hey @Felix62

An welcher genauen Stelle möchtest du diesen Animation CSS mit transition: transform 0.3s ease-in-out; implementieren und in welchem Theme?

Wenn du den CSS Editor dafür verwendest, dann liegt das ggf. daran, dass es sich um einen nicht-unterstützen CSS handelt. Du kannst auch versuchen den Code direkt in das base.css einzufügen ganz unten.

Um zu sehen, ob der transition: transform 0.3s ease-in-out; Code überhaupt funktioniert, kannst du den CSS-Code direkt im Browser über die Entwicklertools (F12 in Chrome/Firefox) einfügen und sehen, ob die Animation wie erwartet funktioniert (siehe ein Blogartikel zu diesem Thema hier). Wenn du den Effekt auf einen bestimmten Link anwenden möchtest, klicke im "Elements"-Tab auf den Link in deiner Webseite, den du bearbeiten möchtest. Dadurch wird der entsprechende HTML-Code in der Konsole hervorgehoben.

CSS bearbeiten:

  • Im rechten Bereich der Entwicklertools findest du den "Styles"-Tab, in dem das CSS für das ausgewählte Element angezeigt wird.
  • Scroll nach unten und füge dort deinen CSS-Code ein. Alternativ kannst du im "Styles"-Tab nach einem leeren Bereich suchen und dort deinen Code hinzufügen.

Apropos, vielleicht interessiert dir unser fresh-off-the-press CSS Blogartikel hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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.

3

Hallo, leider funktioniert der code jedoch kann ich ihn nicht hochladen. Egal ob ich ihn in die base.css oder den css editor einfüge.

Danke für die schnelle Rückmeldung!

4

Gern geschehen! :wink: