{"id":8334,"date":"2021-05-02T11:19:48","date_gmt":"2021-05-02T11:19:48","guid":{"rendered":"https:\/\/www.bay20.com\/?p=8334"},"modified":"2025-05-21T16:36:31","modified_gmt":"2025-05-21T10:51:31","slug":"so-fugen-sie-css-und-javascript-dateien-in-shopware-5-hinzu","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/so-fugen-sie-css-und-javascript-dateien-in-shopware-5-hinzu\/","title":{"rendered":"Wie kann ich CSS- und JavaScript-Dateien in Shopware 5 hinzuf\u00fcgen?"},"content":{"rendered":"\n<p>Bitte befolgen Sie die folgenden Schritte, um Javascript und CSS-Dateien in den Shopware 5-Themen hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p><strong>F\u00fcr CSS<\/strong> <\/p>\n\n\n\n<p><strong>Dateistruktur<\/strong><\/p>\n\n\n\n<p><strong> themes&gt;Frontend&gt;Custom&gt;frontend&gt;_public&gt;src&gt;css.<\/strong><\/p>\n\n\n\n<p><strong>Schritt 1:<\/strong> Erstellen Sie eine neue Datei namens <strong>style.css<\/strong> im Ordner <strong>css.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_1-9.png\" alt=\"\" class=\"wp-image-8335\" width=\"458\" height=\"544\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_1-9.png 289w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_1-9-253x300.png 253w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 2:<\/strong> Klicken Sie auf die Datei <strong>style.css<\/strong> und f\u00fcgen Sie einige Css-Dateien hinzu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_2-9.png\" alt=\"\" class=\"wp-image-8336\" width=\"698\" height=\"355\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_2-9.png 592w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_2-9-300x153.png 300w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 3:<\/strong> Gehen Sie nun in die Datei <strong>Theme.php<\/strong>, um die Dateipfade in die Variable <strong>$css<\/strong> einzuf\u00fcgen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_4-12-980x477.png\" alt=\"\" class=\"wp-image-8338\" width=\"693\" height=\"337\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_4-12-980x477.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_4-12-300x146.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_4-12-800x389.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_4-12-768x374.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_4-12-1000x486.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_4-12.png 1069w\" sizes=\"auto, (max-width: 693px) 100vw, 693px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 4: <\/strong>Nach dem Speichern der Datei. Gehen Sie zur Store-Front, um sicherzustellen, dass die Hintergrundfarbe ge\u00e4ndert wird.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_3-12-980x451.png\" alt=\"\" class=\"wp-image-8339\" width=\"707\" height=\"324\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_3-12-980x451.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_3-12-300x138.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_3-12-800x368.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_3-12-768x353.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_3-12-1000x460.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_3-12.png 1365w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/figure>\n\n\n\n<p><strong>F\u00fcr JavaScript<\/strong><\/p>\n\n\n\n<p><strong>Dateistruktur<\/strong><\/p>\n\n\n\n<p><strong>themes&gt;Frontend&gt;Custom&gt;frontend&gt;_public&gt;src&gt;style.js<\/strong><\/p>\n\n\n\n<p><strong>Schritt 5:<\/strong> Erstellen Sie eine neue Datei namens <strong>style.js<\/strong> im Ordner <strong>js.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_5-11.png\" alt=\"\" class=\"wp-image-8340\" width=\"477\" height=\"632\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_5-11.png 283w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_5-11-226x300.png 226w\" sizes=\"auto, (max-width: 477px) 100vw, 477px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 5:<\/strong> Klicken Sie auf die Datei <strong>style.js<\/strong> und f\u00fcgen Sie einige js hinzu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_6-12.png\" alt=\"\" class=\"wp-image-8341\" width=\"551\" height=\"269\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_6-12.png 359w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_6-12-300x146.png 300w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 6:<\/strong> Gehen Sie nun in die Datei <strong>Theme.php<\/strong>, um die Dateipfade in die Variable <strong>$js<\/strong> einzuf\u00fcgen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_7-9-980x313.png\" alt=\"\" class=\"wp-image-8342\" width=\"670\" height=\"214\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_7-9-980x313.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_7-9-300x96.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_7-9-800x255.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_7-9-768x245.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_7-9-1000x319.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_7-9.png 1146w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/figure>\n\n\n\n<p><strong>Schritt 7:<\/strong> Nach dem Speichern der Datei. Gehen Sie zur Store-Front, um sicherzustellen, dass es funktioniert.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2021\/04\/Screenshot_8-12-980x476.png\" alt=\"\" class=\"wp-image-8343\" width=\"770\" height=\"374\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_8-12-980x476.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_8-12-300x146.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_8-12-800x389.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_8-12-768x373.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_8-12-1000x486.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2021\/04\/Screenshot_8-12.png 1365w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/figure>\n\n\n\n<p><strong>Bitte kontaktieren Sie uns unter <strong><a href=\"mailto:manish@bay20.com\">manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter <strong><a href=\"https:\/\/api.whatsapp.com\/send?phone=+918800519180&amp;text=Hi,%20I%20contacted%20you%20through%20your%20website.\" target=\"_blank\" rel=\"noreferrer noopener\">+91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung f\u00fcr Shopware 5 ben\u00f6tigen. Sie k\u00f6nnen auch die <strong><a href=\"https:\/\/www.bay20.com\/de\/shopware-entwicklungsunternehmen\/\">Shopware 5 <strong>Entwicklungsseite<\/strong><\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bitte befolgen Sie die folgenden Schritte, um Javascript und CSS-Dateien in den Shopware 5-Themen hinzuzuf\u00fcgen. F\u00fcr CSS Dateistruktur themes&gt;Frontend&gt;Custom&gt;frontend&gt;_public&gt;src&gt;css. Schritt 1: Erstellen Sie eine neue Datei namens style.css im Ordner css. Schritt 2: Klicken Sie auf die Datei style.css und f\u00fcgen Sie einige Css-Dateien hinzu. Schritt 3: Gehen Sie nun in die Datei Theme.php, um [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":8348,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78,116],"tags":[],"class_list":["post-8334","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware","category-shopware-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=8334"}],"version-history":[{"count":8,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8334\/revisions"}],"predecessor-version":[{"id":17299,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/8334\/revisions\/17299"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/8348"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=8334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=8334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=8334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}