Comment Faire un Effet de Vague sur Shopify

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

  1. VERVLOET

    3 Sep 2021 Répondre

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

    1. Dgeo Dev

      4 Sep 2021 Répondre

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

  2. KADRI

    15 Sep 2021 Répondre

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

      15 Sep 2021 Répondre

      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. Orlanne

    30 Sep 2021 Répondre

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

      1 Oct 2021 Répondre

      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. Orlanne

        1 Oct 2021 Répondre

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

          1 Oct 2021 Répondre

          Tout en bas 🙂

          1. Orlanne

            4 Oct 2021

            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
×
×

Panier