Codici CSS per il suo shop online
Abbiamo preparato alcune soluzioni CSS pronte all’uso per aiutarla a modificare il design del suo shop MyCOMMERCE. I codici CSS vengono sviluppati per conferire all’elenco dei prodotti un nuovo design.
Consiglio: prima di iniziare, prenda dimestichezza con l’aggiunta dei codici CSS al tema del suo store.
In questo articolo:
Posizionamento dei pulsanti «Acquista ora» sullo stesso livello
Aggiunta dell’opzione «Ordina in base a»
Posizionamento dei simboli «Traccia ordini», «Preferiti», «Carrello», «Registrazione» in alto nella pagina del suo shop
Disattivazione dell’effetto zoom per le anteprime di categorie e prodotti
Disattivazione dell’effetto hover per i titoli delle categorie
Posizionamento centrato dei prodotti nelle categorie
Stesso numero di categorie per riga
Adattamento delle immagini della galleria prodotti alla dimensione dello schermo del cellulare
Apra la sezione «Mostra di più» nelle pagine dei prodotti
«Prodotti affini» in alto nella pagina
Posizionamento dei pulsanti «Acquista ora» sullo stesso livello
I pulsanti «Acquista ora» di default non si trovano nella pagina principale dello shop. Ciò accade quando i titoli dei prodotti non hanno la stessa lunghezza. Se desidera allineare i pulsanti «Acquista ora» (in una visualizzazione a griglia) può utilizzare il seguente codice CSS:
.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;
}
Aggiunta dell’opzione «Ordina in base a»
Utilizzi il codice CSS sotto riportato per aggiungere al suo shop e alle pagine delle categorie l’opzione «Ordina in base a». In questo modo i clienti potranno ordinare i prodotti in base a vari criteri:
.ec-size .ec-store.ec-store__category-page--0 .grid__sort {
display: block;
}Collochi i simboli «Traccia ordini», «Preferiti», «Carrello» e «Registrazione» in alto nella pagina del suo shop
I pulsanti «Traccia ordini», «Preferiti», «Carrello» e «Registrazione» sono collocati di default nel margine inferiore della pagina iniziale dello shop. Se desidera spostarli all’inizio della pagina, può utilizzare il seguente codice CSS:
.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;
}Disattivazione dell’effetto zoom per le anteprime di categorie e prodotti
Muovendo il puntatore del mouse su una categoria o sull’anteprima di un prodotto, visualizza l’effetto zoom. Questa funzione è attiva di default per tutti gli shop MyCOMMERCE. Se desidera disattivarla dal suo shop, può utilizzare il codice CSS sotto riportato:
Per anteprime di categoria:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
transform: none;
}Per anteprime di prodotto:
.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
transform: none;
}Disattivazione dell’effetto hover per i titoli delle categorie
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
transform: none;
}Posizionamento centrato dei prodotti nelle categorie
Utilizzi il seguente codice CSS per centrare i prodotti nelle pagine delle categorie:
.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;
}
}
}
}Stesso numero di categorie per riga
Utilizzi il seguente codice CSS per visualizzare lo stesso numero di categorie per riga:
@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;
}Adattamento delle immagini della galleria prodotti alla dimensione dello schermo del cellulare
.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
width: 100vw;
background-size: contain;
}Apra la sezione «Mostra di più» nelle pagine dei prodotti
L’opzione «Mostra di più» è attivata di default per tutte le filiali con il nuovo design dell’elenco prodotti. Permette di visualizzare una panoramica compatta delle pagine dei prodotti anche in presenza di prodotti con lunghe descrizioni. Se lo desidera, può disattivarla utilizzando il seguente codice CSS:
.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;
}«Prodotti affini» in alto nella pagina
I prodotti correlati vengono visualizzati di default in basso nelle pagine dei prodotti. Se desidera spostarli all’inizio delle pagine, può utilizzare il seguente codice CSS:
.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;
}