Eigenes CSS in Shopify Theme

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:

  1. Wählt „Code bearbeiten“ bei Eurem Template aus.
  2. erzeugt in dem Ordner / Folder „Assets“ eine eigene CSS-Datei, in unserem Test nennen wir diese z.B. hdpublish.scss
  3. In diese Datei kopiert Ihr den gewünschten CSS Code
  4. 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 }}
  5. 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)
  6. Dann alle Dateien speichern – quasi fertig.
  7. 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  -->