CSS-Codes für Ihren Online Shop
Wir haben einige fertige CSS-Lösungen vorbereitet, die Ihnen helfen können, das Design Ihres MyCOMMERCE Shops zu ändern. Die CSS-Codes werden für das neue Design der Produktliste entwickelt.
Tipp: Bevor Sie beginnen, machen Sie sich mit dem Hinzufügen der CSS-Codes zu Ihrem Store Theme vertraut.
In diesem Artikel:
Platzieren Sie die Buttons "Jetzt kaufen" auf der gleichen Ebene
Fügen Sie die Option "Sortieren nach" hinzu
Platzieren Sie die Symbole "Bestellungen verfolgen", "Favoriten", "Warenkorb", "Anmelden" oben auf Ihrer Shopansicht
Zoomeffekt für Kategorie- und Produkt-Miniaturansichten deaktivieren
Hover-Effekt für Kategorietitel deaktivieren
Zentrieren Sie Produkte in Kategorien
Die gleiche Anzahl von Kategorien pro Zeile
Anpassen der Bilder der Produktgalerie an die Bildschirmgrösse auf dem Handy
Öffnen Sie den Abschnitt "Mehr anzeigen" auf den Produktseiten
"Verwandte Produkte" oben auf einer Seite
Platzieren Sie die Buttons "Jetzt kaufen" auf der gleichen Ebene
Standardmässig sind die Schaltflächen "Jetzt kaufen" nicht auf der Frontseite der Shopansicht angeordnet. Dies geschieht, wenn die Produkttitel nicht gleich lang sind. Wenn Sie die Schaltflächen "Jetzt kaufen" (in einer Gitteransicht) ausrichten möchten, können Sie dafür den untenstehenden CSS-Code verwenden:
.grid-product__wrap {
display: flex;
}
.grid-product__price {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
Fügen Sie die Option "Sortieren nach" hinzu
Verwenden Sie den untenstehenden CSS-Code, um die Option Sortieren nach auf Ihrer Shopansicht und Ihren Kategorieseiten hinzuzufügen, damit Ihre Shop-Besucher die Produkte sortieren können:
.ec-size .ec-store.ec-store__category-page--0 .grid__sort {
display: block;
}Platzieren Sie die Symbole "Bestellungen verfolgen", "Favoriten", "Einkaufstasche", "Anmelden" oben auf Ihrer Shopansicht
Die Schaltflächen "Bestellungen verfolgen", "Favoriten", "Einkaufstasche" und "Anmelden" befinden sich standardmässig am unteren Rand der Shop-Vorderseite. Wenn Sie sie an den Anfang der Seite verschieben möchten, können Sie den untenstehenden CSS-Code verwenden:
.ec-size .ec-store__category-page .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-grid {
order: 2;
}
.ec-size .ec-store__category-page .ec-pager {
order: 3;
}
.ec-size .ec-store__category-page .ec-footer {
order: 1;
}Zoomeffekt für Kategorie- und Produkt-Miniaturansichten deaktivieren
Wenn Sie einen Mauszeiger auf eine Kategorie oder ein Produkt-Miniaturbild bewegen, sehen Sie den Zoomeffekt. Diese Funktion ist standardmässig für alle MyCOMMERCE Shops aktiviert. Wenn Sie es für Ihren Online Shop deaktivieren möchten, können Sie die folgenden CSS-Codes verwenden:
Für Kategorie-Miniaturansichten:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
transform: none;
}Für Produkt-Miniaturansichten:
.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
transform: none;
}Hover-Effekt für Kategorietitel deaktivieren
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
transform: none;
}Zentrieren Sie Produkte in Kategorien
Verwenden Sie den untenstehenden CSS-Code, um die Produkte auf Kategorieseiten zu zentrieren:
.ec-size .ec-store .grid__products {
@for $i from 2 through 10 {
$k: $i - 1;
@for $j from 1 through $k {
&[data-cols="#{$i}"][data-items="#{$j}"] {
justify-content: center;
}
}
}
}Die gleiche Anzahl von Kategorien pro Zeile
Verwenden Sie den folgenden CSS-Code, um die gleiche Anzahl von Kategorien pro Zeile anzuzeigen:
@mixin grid-category-settings($count-per-row-list, $max-count-per-row: false) {
$i: 1;
@each $count-per-row in $count-per-row-list {
&:nth-child(n+#{$i}) {
width: 100% / $count-per-row;
@if ($max-count-per-row) {
$scale: $max-count-per-row / $count-per-row;
$w: min(100%, 100% / $scale * 1.2);
.grid-category__spacer {
$d: 16px * ($scale - 1) / $scale;
width: calc(#{$w} - #{$d});
}
.grid-category__image-spacer {
$d: 16px * ($scale - 1) / $scale;
width: calc(#{$w} - #{$d});
}
}
}
$i: $i + $count-per-row;
}
}
.ec-size .ec-store .ec-grid .grid__categories {
&[data-cols="1"] {
.grid-category {
@include grid-category-settings(2, 2);
}
}
@for $i from 2 through 10 {
&[data-cols="#{$i}"] .grid-category {
@include grid-category-settings($i, $i);
}
}
&.grid__categories--large-items {
&[data-cols="1"] {
justify-content: center;
.grid-category {
max-width: 480px;
@include grid-category-settings(1, 1);
}
}
}
}
.ec-size .ec-store .ec-grid .grid__categories {
justify-content: left;
}Anpassen der Bilder der Produktgalerie an die Bildschirmgrösse auf dem Handy
.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
width: 100vw;
background-size: contain;
}Öffnen Sie den Abschnitt "Mehr anzeigen" auf den Produktseiten
Standardmässig ist die Option "Mehr anzeigen" für alle Filialen mit dem neuen Produktlistendesign aktiviert. Es ermöglicht eine kompakte Übersicht über die Produktseiten auch bei langen Produktbeschreibungen. Sie können es aber auch mit Hilfe des untenstehenden CSS-Codes deaktivieren:
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--xl .ec-store .product-details__product-description::after {
display: none;
}
.ec-size--s.ec-size.ec-size--xl .ec-store .product-details-module__content--collapsed ~ .product-details-module__btn-more {
display: none;
}"Verwandte Produkte" oben auf einer Seite
Die zugehörigen Produkte werden standardmässig unten auf den Produktseiten angezeigt. Wenn Sie sie an den Anfang der Produktseiten verschieben möchten, können Sie den untenstehenden CSS-Code verwenden:
.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .product-details {
order: 2;
}
.ec-size .ec-store__content-wrapper .ec-footer {
order: 3;
}
.ec-store__content-wrapper .related_products {
order: 1;
}