Skip to main content
  1. Home
  2. Webshop
  3. Referenz
  4. Begleitmaterial zum Webinar "Das Einmaleins des Shop-Designs"

Begleitmaterial zum Webinar "Das Einmaleins des Shop-Designs"

In Das Einmaleins des Shop-Designs - mit eigenem CSS zum individuellen Webshop haben wir dir gezeigt, wie man mit dem Plugin CustomCSS und einigen einfachen Handgriffen weitreichende Änderungen am Design des Ceres-Webshops erzielen kann. Da man im Eifer des Gefechts nicht immer durch ein fast einstündiges Video klicken muss, findest du hier alle Anpassungen, die wir dir im Webinar eingebaut haben.
Das notwendige kostenlose Plugin findest du hier. Wie man das Plugin dem System hinzufügt, erfährst du auf unserer Handbuchseite zu Plugins.

1. CSS-Anpassungen

1.1. Hindergrundfarbe der Top-Bar ändern

Mit dem folgenden CSS-Snippet lässt sich die Hintergrundfarbe des Header-Widgets Top-Bar ändern. Gib hierfür einen eigenen Hex-Wert für die Hintergrundfarbe an.

.top-bar {
    background-color: #008ebd;
}

1.2. Schriftart des Titelleisten-Widgets ändern

Das folgende CSS-Snippet ändert die Schriftart des ShopBuilder-Widgets Titelleiste.

.widget-title-bar {
    font-family: Comic Sans MS, Helvetica, Arial, sans-serif;
}

1.3. Schriftgröße im Titelleisten-Widgets ändern

Mit dem folgenden CSS-Snippet kannst du die Schriftgröße des Texts im Widget Titelleiste ändern. Gib dazu die Schriftgröße in px an.

.widget-title-bar h1 {
    font-size: 50px;
}

1.4. Hintergrundbild ändern

Das folgende CSS-Snippet zeigt ein Hintergrundbild in deinem plentyShop an, das du über eine URL einbindest.

.wrapper-main {
    background-image: url();
}

1.5. Transparenten Layer über Hintergrundbild legen

Mit dem folgenden CSS-Snippet kannst du einen transparenten Layer über dein Hintergrundbild legen.

.main .container-max {
    background-color: rgba(255,255,255,0.8);
}

1.6. Parallax-Effekt von Kategoriebildern entfernen

Das folgende CSS-Snippet entfernt den Parallax-Effekt des Kategoriebilds.

.parallax-img-container-inner {
    background-attachment: scroll !important;
}

1.7. Textfarbe der Artikelnamen in Artikellisten ändern

Mit dem folgenden CSS-Snippet änderst du die Farbe von Artikelnamen in Artikellisten. Gib dazu einen Hex-Wert für die Farbe des Texts an. Das Snippet beinhaltet auch die Schriftgröße.

.thumb-title {
    color: #008ebd !important;
    font-size: 18px;
    text-shadow:  1px 1px 1px lightblue;
}

1.8. Rahmen für Artikel in Artikellisten

Das folgende CSS-Snippet zeigt einen Rahmen um Artikel in Artikellisten an.

.cmp-product-thumb {
    border: 1px solid lightgray;
    border-radius: 5px;
}

1.9. Abstände der Artikellisten ändern

Mit diesem CSS-Snippet kannst du die Abstände zwischen Artikellisten anpassen.

.product-list li {
    padding-left: 5px;
    padding-right: 5px;
}

1.10. Zum Warenkorb hinzufügen-Symbol entfernen

Wenn du das Zum Warenkorb hinzufügen-Symbol auf Artikelkacheln entfernen willst, kannst du dafür das folgende CSS-Snippet verwenden.

.add-to-basket-lg-container {
    display: none;
}

1.11. Streichpreis einfärben

Dieses CSS-Snippet bestimmt die Farbe des Streichpreises.

.crossprice {
    color: red !important;
}

1.12. Den Hover-Effekt der Artikelliste auf der Artikelansicht hinzufügen

Wenn du den Hover-Effekt, also die Hervorhebung des Bilds wenn du mit der Maus darüber schwebst, auch auf der Artikeleinzelansicht einbinden willst, kannst du dafür folgendes CSS-Snippet verwenden.

.owl-lazy {
    transition: transform 0.4s;
}
.owl-lazy:hover {
    transform: scale(1.05);
}
Zum Seitenanfang