Angenommen Ihr habt ein Shopify Theme / Template gefunden, welches Euch gefällt und Ihr wollt nur einige Kleinigkeiten per CSS optimieren / korrigieren / anpassen, dann könntet Ihr zwar das theme.scss.css file um die gewünschten Zeilen ganz unten ergänzen, aber nach einen Theme-Update wäre die Anpassungen weg. Besser wäre es…
a) eine eigene CSS-Datei zu erzeugen
und
b) diese nach der theme.scss.css Datei zu laden
Hierbei geht Ihr wie folgt vor:
- Wählt „Code bearbeiten“ bei Eurem Template aus.
- erzeugt in dem Ordner / Folder „Assets“ eine eigene CSS-Datei, in unserem Test nennen wir diese z.B. hdpublish.scss
- In diese Datei kopiert Ihr den gewünschten CSS Code
- Durchsucht in dem Ordner „Layout“ die Datei -> theme.liquid (das sind die theme-Grundeinstellungen) nach der folgenden Zeile:
{{ ‚theme.scss.css‘ | asset_url | stylesheet_tag }} - Nach dieser Zeile fügen wir unsere CSS Datei ein, das sieht dann wie folgt aus:
{{ ‚theme.scss.css‘ | asset_url | stylesheet_tag }}
{{ ‚hdpublish.scss‘ | asset_url | stylesheet_tag }}
Natürlich könnt Ihr das auch kommentieren / einem Beautifying unterziehen (siehe Screenshot und/oder unten den Code-Schnipsel) - Dann alle Dateien speichern – quasi fertig.
- Wichtig: nach einem Theme-Update seitens Shopify und/oder des Theme-Herstellers, werden Eure Dateien/Änderungen überschrieben, deshalb macht Euch UNBEDINGT eine Kopie von den Anpassungen der theme.liquid-Datei, sowie Euer CSS-Datei! – Nun aber: fertig – fertig!
Code zum kopieren für die theme.liquid Datei, passt ggf. Euren CSS-Name an ;)
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
<!-- START Custom CSS -->
{{ 'hdpublish.scss' | asset_url | stylesheet_tag }}
<!-- END Custom CSS -->