Nous allons voir dans ce tutoriel comment créer des ombres sur vos textes et éléments sur Shopify. Que ce soit pour un confort visuel ou tout simplement ajouter un design épuré et moderne ce type d’effet donnera un peu de relief à votre boutique Shopify !

Comment mettre une ombre sur un texte

Pratique si vous avez un carrousel d’images avec des images claires et foncées. En effet si votre texte est blanc il ne se verra que très peu sur une image claire et pour garder une bonne visibilité vous pouvez mettre un léger ombrage sur votre texte afin qu’il ressorte correctement.

.votre-classe { text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }

Comment mettre une ombre sur une zone

Souvent utilisé pour mettre en avant des offres ce type d’effet rend vraiment très bien à partir du moment ou c’est utilisé avec modération en évitant les fautes de gouts comme par exemple mettre une ombre rouge de 200px 😀

.votre-classe { box-shadow: 0px 0px 15px rgba(0,0,0,0.4); }

Il est préférable pour ce type de tutoriel de regarder la version vidéo qui est juste en dessous 😉

Les effets présentés dans la vidéo

Le code pour la zone image et texte pour le thème Debut

.feature-row .feature-row { box-shadow: 0px 0px 15px rgba(0,0,0,0.4); }
.feature-row__image-wrapper { margin-bottom:0; }
@media only screen and (max-width: 749px) {
	.feature-row__text {
	    order: 2;
	    padding-bottom: 0;
	    padding: 15px;
	}
}

Le code pour mettre la zone du footer

#gd-pre-footer .col-item { padding:25px !important; }
@media screen and (min-width: 768px) {
#gd-pre-footer .col-item {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
  width:23% !important;
  margin:15px 1% !important;   
  }
}

Ce tutoriel existe aussi en vidéo

Vous pouvez également consulter le tutoriel de footer avec badges de confiance présenté dans cette vidéo ici : Faire le footer d’exemple de la vidéo

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

Cet article a 7 commentaires

  1. Super Tuto 😀 installé sur mes 2 boutiques. J’adore le résultat 😀 Merci bien encore une fois 😉

    1. Celui la il était pour toi 😀

      1. Merci bien 🙂 c’est vraiment sympa 🙂 Depuis que je voulais savoir faire ça 😀

  2. Bonjour Dgeo, Merci pour tes Tutos ! C’est énorme

    J’ai petit problème pour l’ombre sur un bloc ! j’utilise le thème début comme dans la vidéo

    il n’y a aucun problème lorsque l’image est à gauche et le texte à droit. En revanche quand le texte est à gauche, il est croqué par l’effet du bloc. Je dois surement changer les px du Padding ?

    Merci 🙂

    1. Hello, oui rajouter du margin sur ce bloc ou du padding sur le bloc conteneur.

  3. Super, merci pour ce tuto.

    J’utilise le thème Minimal , et j’ai aussi une marge que je voudrais supprimer. Le code que tu donnes ne semble pas fonctionner , y a t il une solution ?

    Merci beaucoup !

    1. Hello, ca dépend du thème, faudra demander au support de celui ci 😉

Laisser un commentaire

Fermer le menu

meilleure chaine youtube dropshipping shopify

Envie de tout savoir sur le Dropshipping & Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine