Einfügen von Custom CSS Code

[Felix62]

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

[Gabe]

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! 😉

---
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.

[Felix62]

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!

[Gabe]

Gern geschehen! 😉