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 !

La vidéo arrive bientôt…

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

🤗 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 4 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…

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