Nachdem du das Shopauskunft-Widget generiert hast, wird es folgendermaßen eingebaut:
-
Wechsele auf deinen FTP-Server.
-
Erstelle folgende Verzeichnisstruktur, falls diese noch nicht vorhanden ist:
-
/themes/Frontend/<IHR-TEMPLATE>/frontend/index
-
-
Lege im Ordner “index” die Datei “index.tpl” an, falls diese noch nicht vorhanden ist
-
Füge nachfolgenden Code in die Datei “index.tpl” ein und füge den generierten Code des Shopauskunft-Widgets an die gekennzeichnete Stelle:
{extends file="parent:frontend/index/index.tpl"}
{block name="frontend_index_footer"}
{$smarty.block.parent}
{block name='frontend_index_footer_container_shopauskunft'}
<!-- FÜGEN SIE HIER DEN GENERIERTEN CODE EIN -->
{/block}
{/block}
-
Anschließend muss der Cache geleert werden, um das Resultat zu sehen
-
Dazu wechsele ins Backend und klicke auf Einstellungen → Caches / Performance → Shop cache leeren
-
-
Nun sollte das Shopauskunft-Widget in deinem Shop erscheinen.
Gestaltung mit CSS
Nachdem du das Widget in deinen Shop eingebaut hast, geht es jetzt um das Thema Gestaltung.
-
Wechsele auf deinen FTP-Server.
-
Erstelle folgende Verzeichnisstruktur:
-
themes/Frontend/<IHR-TEMPLATE>/frontend/_public
-
-
Erstelle im “_public”-Ordner die Datei “shopauskunft.css”.
-
Füge nachfolgenden Code in die “shopauskunft.css”-Datei:
@media only screen and (min-width: 768px) {
div#shopauskunft_widget {
display: block;
position: absolute;
right: 10px;
bottom: 10px;
}
}
-
Der Code kann nach deinen eigenen Bedürfnissen angepasst werden und dient hier als Vorlage.
-
Anschließend wechsele ins Backend, um die css-Anpassungen zu übernehmen.
-
Klicke “Einstellungen → Theme Manager”.
-
Klicke auf dein aktuelles Theme (gekennzeichnet mit ‘Aktiv’).
-
Klicke anschließend auf Theme konfigurieren.
-
Wechsele zum Reiter “Konfiguration”.
-
Scrolle bis ganz nach unten.
-
Unter “Weitere CSS-Dateien:” füge folgendes ein:
/frontend/_public/src/css/shopauskunft.css
-
Danach klicke auf “Speichern”.
-
Klicke auf “Themes kompilieren”, damit die Änderung übernommen wird.
-
Leere anschließend nochmal den Cache.
-
Einstellungen → Caches / Performance → Shop cache leeren
-
-
Fertig
Hinweis: Sobald du Änderungen an der “shopauskunft.css” vornimmst, musst du das Theme neu kompilieren.
Hier findest du eine weitere Anleitung:
Hast du noch weitere Fragen? Wir stehen bereit zu helfen.