Apparence de la boutique

Par
Le 03/11/2017
7 commentaires

La boutique est un module très important dans e-monsite, à partir du moment où vous souhaitez vendre vos produits. Une fois encore, il s'agit de quelque chose qui peut refléter l'image de marque, c'est pourquoi je vous propose aujourd'hui de modifier l'apparence de la vôtre.

Mettre en avant les frais de port offerts

Les frais de port offerts sont pour le client un bonus non négligeable. Sur e-monsite, vous pouvez choisir à partir de quel montant ou quel poids vous déclarez que les frais de ports sont offerts. Je vous propose aujourd'hui de mettre cela en avant dans le panier ! Ici évidemment, j'ai tout fait pour que le bloc soit visible. Je vous invite à adapter selon vos goûts.

Code à utiliser :

div[data-role="delivery"] p.text-info {
    width: 30%;
    background-color: rgb(197, 146, 0); /* Modifiez la couleur de fond ici */
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    border: 2px dashed white; /* Pour avoir une bordure sous forme de tirets. */
    border-radius: 10px;
    padding: 10px 80px 10px 80px;
    margin: auto;
    margin-bottom: 10px;
}}

Distinguer les produits hors stock

Depuis peu de temps, un élément HTML est disponible sur e-monsite, permettant de distinguer les produits en stock et hors stock de votre boutique. L'élément concerné est " [data-stock="0"] ", pour un produit hors stock donc. Nous allons pouvoir l'utiliser ici pour mettre " en retrait " les produits hors stock, et donc les distinguer tout en les gardant dans l'affichage.

Code à utiliser :

 li.media[data-stock="0"] a.btn.btn-default::before {
  content: 'Plus de stock - '; /* Permet d'ajouter la mention " Plus de stock " sur le bouton */
}

li.media[data-stock="0"] .media-object {
  opacity: 0.5; /* Modifie l'opacité de l'image */
}

li.media[data-stock="0"] .media-body {
  opacity: 0.5; /* Modifie l'opacité des détails */
}

li.media[data-stock="0"] .btn.btn-primary {
  background-color: #828282; /* Changez la couleur du bouton sur cette ligne */ 
}

boutique blogger smart css frais port

Commentaires

- 1. hens Le 27/02/2018
Bonjour
Pouvez-vous préciser ou les code doit être coller? merci
- 2. wsfvku Le 13/09/2023
Localcoinswap (renomovana platforma P2P) je renomovana burza P2P, kde muzete nakupovat a prodavat bitcoiny
https://localcoinswap.net
- 3. jsfabb Le 13/09/2023
LocalCoinSwap is another peer-to-peer (P2P) cryptocurrency exchange that allows users to trade bitcoins
https://localcoinswap.net
- 4. zsfduw Le 13/09/2023
кроме Binance P2P есть ещё LocalBitcoins, Bitpapa, LocalCoinSwap, Bitzlato, LocalCryptos
https://localcoinswap.net
- 5. qsfcwt Le 14/09/2023
don’t know how and where to buy bitcoin, we recommend localcoinswap.net
https://localcoinswap.net
- 6. psfqhk Le 14/09/2023
LocalCoinSwap seems to be heavily inspired by LocalBitcoins
https://localcoinswap.net
- 7. psfzqh Le 14/09/2023
por lo que el sitio ideal en este caso seria Localbitcoins.net
https://localcoinswap.net

Ajouter un commentaire