Custom CSS (Studio Theme und generell)

[fivemoons]

Hallo liebe Community,

ich bin neu hier im Forum und habe bei der Suche leider keine Antwort auf mein Probleme gefunden.

1. Problem: Trennung von Updates durch Code-Editieren

Ich habe mein Studio Theme blank installiert, bearbeitet und trotz separat gehaltener CSS und Custom Font als jeweilige Snippets wurde wohl die "Verbindung" zum ursprünglichen Theme getrennt und ich konnte keine Updates durchführen. Der Support teilte mir mit, ich hätte den Code editiert und somit sei das Theme nicht mehr Updatefähig. Leider konnte ich noch nicht genau herausfinden, welche Änderungen genau die Trennung verursachen und es wurden im Backend scheinbar viel mehr Dateien als editiert angezeigt, als ich das selbst händisch (bewusst?) getan habe. Ich habe leider keine Liquid erfahrung und wollte mir für meine zunächst einfachen Zwecke mit reinem Editieren von CSS bzw. hinzufügen eigener Styles behelfen.

2. Problem: CSS copy paste in neues Theme funktionert nicht

Ich habe mir das Studio Theme komplett neu und upgedatet installiert und habe mir lediglich zwei Dateien hinzugefügt:

"custom-fonts.liquid" in "Snippets"

"customized-styles.css" in "Assets".

Andere Code-Dateien habe ich nichmal geöffnet 😄

Der Inhalt der beiden Dateien ist exakt derselbe, den ich in dem Ursprungs Theme (mit der Updatetrennung) hatte. Font styles, Farben etc. Habe lediglich copy & paste gemacht, die Styles sind definitiv in sich korrekt und geprüft, sie funktionieren im "kaputten" ersten Theme perfekt. Es ist also kein Fehler im Code. Leider werden die Styles nicht angezeigt. Die Dateien werden einfach nicht ins Theme mit übernommen.

Hat jemand eine Idee, woran das liegen könnte und was ein best-practice Weg ist, das Studio Theme zu individualisieren, wenn ich an der Liquid Architektur überhaupt nichts verändern will? Ich will lediglich meinen Boxes, die ich im Editor positioniere verschiedene Styles zuweisen.. das ist eigentlich kein Hexenwerk. Bin daher gerade etwas ratlos.

Besten Dank schoneinmal für jeden Tipp!

fivemoons

[Finer]

@fivemoons, wie hast du denn die Stylesheets in das neue Theme geladen/verlinkt?
Fonts kannst du ebenfalls unter Assets hochladen, um diese in der CSS Datei zu verlinken. Gibt es einen Grund, weshalb du diese in eine Liquid-Datei gepackt hast?

[fivemoons]

Danke, @Finer ! lch habe mich das danach auch gefragt 😉 Ich habe eine Anleitung (ergoogelt, nicht von Shopify selbst) für customized fonts ohne Add-Ons befolgt, da war dies so empfohlen. Aber du hast Recht, man könnte es einfach direkt in die Stylesheets packen.

Ich hatte wohl die Dateien doch schon selbst im theme.liquid verlinkt, nachdem ich dies beim anderen Theme auch vorgenommen habe, funktionieren die Stylesheets!

Thema Updates – meine eigene Lösung (falls dies noch jemandem hilft):

Ich habe mittlerweile einen praktikablen Weg für mich gefunden, was die Updates angeht. Es löst zwar das Grundproblem nicht, dass man keinen einfachen Weg hat, einen eigenen Style einfach separat vom Update zu halten, z.B. mit einer fest zugewiesenen, im Theme dafür eingeplanten Datei, in der man eigenes CSS einfügen kann. Das würde ich mir grundsätzlich wünschen. -> feature request.

Aber ich habe nun verstanden, dass jede App, die ich verwende, die Updatability zerschießen kann, auch wenn ich die einzelnen Dateien nicht persönlich editiere und dass anscheinend auch reine CSS Änderungen schon diese Trennung vom Update hervorrufen. Da habe ich dann zum einen keine bösen Überraschungen weil ich mich darauf einstelle.

Zum anderen wurde mir vom Support mitgeteilt, dass es viele erfolgreiche Shops gibt, die so gut wie nie Updaten weil sie editierte Themes nutzen und das auch kein Drama ist 🙂 Ich hoffe also, dass ich erstmal eine Weile mit meiner neuesten Version des Themes gut klarkomme und bis zum nächsten von mir gewünschten Update habe ich hoffentlich Programmierunterstützung inkl. Git.

Wenn ich doch mal konventionell update mache ich es so:

- dupliziertes blank Theme updaten

- in dieses meine CSS und Font-Snippets laden

- 'settings_data.json' abgleichen

-> gegebenenfalls (leider) Layout im Editor neu vornehmen weil "settings_schema.json" nicht zwangsläufig mit jedem Update kompatibel ist

Der letzte Punkt ist das, was dann natürlich den meisten Aufwand verursacht, daher werden für die ersten Schritte Updates erstmal ausgelassen.

Grüße,

fivemoons