Codes CSS pour votre boutique en ligne

Nous avons préparé des solutions CSS prêtes à l'emploi qui peuvent vous aider à modifier le design de votre boutique MyCOMMERCE. Les codes CSS sont développés pour le nouveau design de la liste des produits

Astuce: Avant de commencer, familiarisez-vous avec l'ajout de codes CSS au thème de votre boutique.

Dans cet article:

Placer les boutons «Acheter maintenant» au même niveau

Ajouter l'option «Trier par»

Placer les icônes «Suivi des commandes», «Favoris», «Panier», «Connexion» en haut de l’affichage de votre boutique

Désactiver l'effet de zoom pour les vignettes de catégories et de produits

Désactiver l'effet de survol pour les titres de catégories

Centrer les produits dans les catégories

Le même nombre de catégories par ligne

Adapter les photos de la galerie de produits à la taille de l'écran du téléphone portable

Ouvrir la section «Afficher plus» sur les pages de produits

«Produits connexes» en haut d'une page

Placer les boutons «Acheter maintenant» au même niveau

Par défaut, les boutons «Acheter maintenant» ne sont pas présentés sur la vitrine de l’affichage de la boutique. Cela se produit lorsque les titres des produits n'ont pas la même longueur. Si vous voulez aligner les boutons «Acheter maintenant» (en vue grille), vous pouvez utiliser le code CSS ci-dessous:

.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;
}

Ajouter l'option «Trier par»

Utilisez le code CSS ci-dessous pour ajouter l'option «Trier par» à l’affichage de votre boutique et aux pages des catégories afin que les visiteurs de votre boutique puissent trier les produits:

.ec-size .ec-store.ec-store__category-page--0 .grid__sort {
    display: block;
}

Placer les icônes «Suivi des commandes», «Favoris», «Panier», «Connexion» en haut de l’affichage de votre boutique

Les boutons «Suivi des commandes», «Favoris», «Panier» et «Connexion» se trouvent par défaut en bas de la vitrine de la boutique. Si vous voulez les déplacer vers le haut de la page, vous pouvez utiliser le code CSS ci-dessous:

.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;
}

Désactiver l'effet de zoom pour les vignettes de catégories et de produits

Lorsque vous déplacez le pointeur de la souris sur une catégorie ou une vignette de produit, vous voyez l'effet de zoom. Cette fonction est activée par défaut pour toutes les boutiques MyCOMMERCE. Si vous voulez la désactiver pour votre boutique en ligne, vous pouvez utiliser les codes CSS suivants:

Pour les vignettes de catégorie:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
    transform: none;
}

Pour les vignettes de produit:

.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
    transform: none;
}

Désactiver l'effet de survol pour les titres de catégories

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
    transform: none;
}

Centrer les produits dans les catégories

Utilisez le code CSS ci-dessous pour centrer les produits sur les pages des catégories:

.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;
            }
        }
    }
}

Le même nombre de catégories par ligne

Utilisez le code CSS suivant pour afficher le même nombre de catégories par ligne:

@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;
}

Adapter les photos de la galerie de produits à la taille de l'écran du téléphone portable

.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
    width: 100vw;
    background-size: contain;
}

Ouvrir la section «Afficher plus» sur les pages de produits

Par défaut, l'option «Afficher plus» est activée pour toutes les succursales avec le nouveau design de la liste des produits. Cela permet une vue d'ensemble compacte des pages de produits, même avec de longues descriptions de produits. Vous pouvez également désactiver cela en utilisant le code CSS ci-dessous:

.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;
}

«Produits connexes» en haut d'une page

Les produits associés sont affichés par défaut au bas des pages des produits. Si vous voulez les déplacer vers le haut des pages des produits, vous pouvez utiliser le code CSS ci-dessous:

.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;
}