Nous allons voir dans ce tutoriel comment créer des effets de vagues sur des sections dans une Boutique Shopify. Ce type d’effet est assez à la mode et souvent utilisé sur les Builders WordPress comme Divi et également sur Systeme.io.

Comment Utiliser un générateur de Vague en ligne ?

Dans un premier temps nous allons nous rendre sur ce site afin de créer le svg en forme de vague !

https://getwaves.io/

Une fois la forme choisie cliquez sur l’icône avec la flèche vers le bas pour télécharger les codes des svg et mémorisez les quelques part (un éditeur de texte ou autre…) On va en avoir besoin pour les placer dans une zone sur Shopify !

Intégration du code sur Shopify

Ce type d’effet est souvent utilisé au niveau des section sur la page d’accueil ! on va donc axer ce tutoriel sur cette façon de faire.

Rendez-vous dans Boutique en ligne – Action – Modifier le code – Ouvrir le dossier Sections et Cliquez sur Créer une nouvelle section et nommez-la « dg-section-wave ». Il ne vous reste plus qu’à copier/coller le  code suivant dans le fichier:

<section class="dg-wave">
  {{ section.settings.html_wave1 }}
  {%- if section.settings.html_wave1 == blank -%}
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1" d="M0,192L34.3,186.7C68.6,181,137,171,206,186.7C274.3,203,343,245,411,234.7C480,224,549,160,617,144C685.7,128,754,160,823,165.3C891.4,171,960,149,1029,165.3C1097.1,181,1166,235,1234,245.3C1302.9,256,1371,224,1406,208L1440,192L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"></path>
  </svg>
  {%- endif -%}  
  <div class="dg-wave__content">
  {{ section.settings.html_content }}
  </div>
  {{ section.settings.html_wave1 }}
  {%- if section.settings.html_wave1 == blank -%}
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1" d="M0,192L34.3,186.7C68.6,181,137,171,206,186.7C274.3,203,343,245,411,234.7C480,224,549,160,617,144C685.7,128,754,160,823,165.3C891.4,171,960,149,1029,165.3C1097.1,181,1166,235,1234,245.3C1302.9,256,1371,224,1406,208L1440,192L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,69,0,34,0L0,0Z"></path>
  </svg>
  {%- endif -%}
</section>

<style>
  .dg-wave svg {
    display:flex; 
  }
  .dg-wave__content {
    background:#0099ff;
    color:#FFF;
    margin:-1px 0;
    padding:25px;
    text-align:center;
  }
  .dg-wave__content p {
   
    color:#FFF;
    
  }
</style>

{% schema %}
{
  "name": "Section avec Vagues ",
  "class": "section-dg-waves",	
  "settings": [
    {
      "type": "html",
      "id": "html_wave1",
      "label": "Vague SVG Haut"      
    
    },
    {
      "type": "html",
      "id": "html_content",
      "label": "Zone HTML",  
      "default": "<h2>Titre de la section</h2><p>Contenu de la section</p>"
    },
    {
      "type": "html",
      "id": "html_wave2",
      "label": "Vague SVG Bas"
    }
  ],
  "presets": [
    {
      "name": "Section avec vagues",
      "category": "Dgeo dev - Tutoriels"
    }
  ]
}
{% endschema %}

Maintenant allez dans la Personnalisation de votre thème et ajoutez une section.à votre page d’accueil – Vous verrez dans la zone DG Tutotiels une Section Vague ! ajoutez la et voyons ce qu’elle nous propose comme options !

Les options

Vous avez 3 champs:

  • Une zone pour la vague 1,
  • Une zone de contenu HTML,
  • Une zone pour la vague sur bas.

Par défaut des vagues sont présentes mais dés que vous allez mettre des codes à l’intérieur des zones les vagues d’exemples disparaitront afin de prendre en compte les vôtres 😉

Ce code est un exemple d’une section avec une vague au dessus et en dessous du contenu avec une couleur uniforme. C’est généralement comme ça que ce type de section est construite.

Vous souhaitez personnaliser un peu plus ?

Dans ce cas je vous invite à visionner la vidéo ci-dessous !

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

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 9 commentaires

  1. Simple à comprendre, efficace et fonctionnel comme d’habitude !
    Merci pour ce tuto, effet vraiment sympa.

    1. Merci pour le com c’est sympa et ravi que ca vous plaise 😉

  2. Bonjour, comment modifier l’épaisseur ? car elles prennent beaucoup de place sur ma page de garder ?

    Merci pour le travail et merci d’avance pour la réponse 🙂

    1. Hello, malheureusement on ne peut pas sauf en bidouillant un peu au niveau du générateur mais pour le modifier en code c’est ultra complexe…

  3. Bonjour, merci pour ce super tuto! J’ai juste un souci au niveau de l’affiche mobile, où une barre blanche apparaît en haut de ma vague… Pourtant, quand je prévisualise sur la version mobile du thème le problème n’est pas là…
    Merci!

    1. Bonjour, c’est à cause de votre carrousel qui prend trop de place en hauteur et crée un vide… voici un hack à mettre dans theme.scss.liquid ou votre fichier .css
      .hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {
      height: auto;
      }

      1. Super merci pour votre réactivité! Dernière petite question, cette ligne de code je l’insère n’importe où dans le fichier thème? Merci!

        1. Tout en bas 🙂

          1. Merci! J’ai bien ajouté le code tout en bas de mon theme.scss.liquid, mais ça n’a pas changé l’aspect sur la version mobile où la barre blanche apparaît toujours…

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème 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