Comment faire des ombres sur Shopify

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]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 7 commentaires

  1. Max Harder'Z

    27 Avr 2020 Répondre

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

    1. Dgeo Dev

      27 Avr 2020 Répondre

      Celui la il était pour toi 😀

      1. Max Harder'Z

        27 Avr 2020 Répondre

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

  2. Jordan

    2 Mai 2020 Répondre

    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. Dgeo Dev

      3 Mai 2020 Répondre

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

  3. Lomania

    5 Juin 2020 Répondre

    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. Dgeo Dev

      6 Juin 2020 Répondre

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

Laisser un commentaire

Fermer le menu
×
×

Panier