Nous allons voir dans ce tutoriel comment créer une barre flash info permettant de faire défiler des informations importantes pour vos clients. En effet ce système de slider va faire défiler un certain nombre d’info flash avec une icône et un petit texte comme par exemple, la livraison offerte, xxx clients satisfaits, garantie etc… vous pouvez voir le résultat ici: https://dgeodev.myshopify.com/

Comment installer cette barre d’information ?

Dans un premier créons le système dans un snippet que nous pourrons appeler ou on voit.

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Cliquez sur le dossier Snippet et « créez un nouveau snippet » et nommez-le dg-flash-infos ! A l’intérieur de celui ci copiez/collez le code suivant:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

  
  <div class="flash-infos">   
    <div class="flash-info truck">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
      Livraison offerte
    </div>
    <div class="flash-info">      
     <svg height="28px" viewBox="-66 0 511 511.99925" xmlns="http://www.w3.org/2000/svg"><g><path d="m40.5 190c0 82.710938 67.289062 150 150 150s150-67.289062 150-150-67.289062-150-150-150-150 67.289062-150 150zm150-130c71.683594 0 130 58.316406 130 130s-58.316406 130-130 130-130-58.316406-130-130 58.316406-130 130-130zm0 0"/><path d="m97.890625 172.171875 38.761719 38.191406-8.917969 53.675781c-.621094 3.738282.921875 7.503907 3.988281 9.730469 3.0625 2.226563 7.121094 2.527344 10.484375.785157l48.292969-25.078126 48.289062 25.078126c3.335938 1.730468 7.394532 1.460937 10.484376-.785157 3.066406-2.226562 4.609374-5.992187 3.988281-9.730469l-8.917969-53.675781 38.761719-38.191406c2.699219-2.65625 3.664062-6.609375 2.492187-10.214844-1.171875-3.601562-4.277344-6.230469-8.023437-6.796875l-53.792969-8.097656-24.339844-48.675781c-1.691406-3.386719-5.15625-5.527344-8.941406-5.527344-3.789062 0-7.25 2.140625-8.945312 5.527344l-24.339844 48.675781-53.792969 8.097656c-3.746094.5625-6.851563 3.195313-8.023437 6.796875-1.171876 3.605469-.203126 7.558594 2.492187 10.214844zm67.4375-6.105469c3.21875-.484375 6-2.503906 7.457031-5.414062l17.714844-35.433594 17.714844 35.433594c1.457031 2.910156 4.238281 4.929687 7.457031 5.414062l39.152344 5.894532-28.214844 27.792968c-2.316406 2.285156-3.378906 5.554688-2.847656 8.765625l6.492187 39.066407-35.148437-18.25c-1.441407-.75-3.023438-1.125-4.605469-1.125s-3.164062.375-4.609375 1.125l-35.148437 18.25 6.492187-39.066407c.535156-3.210937-.527344-6.480469-2.847656-8.765625l-28.210938-27.792968zm0 0"/><path d="m200.5 10c0 5.523438-4.476562 10-10 10s-10-4.476562-10-10 4.476562-10 10-10 10 4.476562 10 10zm0 0"/><path d="m143.371094 5.894531c-84.121094 21.472657-142.871094 97.179688-142.871094 184.105469 0 53.988281 22.699219 104.859375 62.546875 140.886719l-60.246094 106.175781c-1.9375 3.417969-1.695312 7.652344.617188 10.824219 2.3125 3.175781 6.265625 4.703125 10.113281 3.902343l68.417969-14.207031 24.046875 67.761719c1.304687 3.6875 4.644531 6.269531 8.542968 6.617188 3.898438.347656 7.636719-1.617188 9.570313-5.019532l66.390625-116.71875 66.386719 116.71875c1.789062 3.144532 5.117187 5.054688 8.6875 5.054688.292969 0 .589843-.011719.882812-.035156 3.898438-.347657 7.238281-2.933594 8.546875-6.617188l24.042969-67.761719 68.417969 14.207031c3.84375.796876 7.800781-.730468 10.113281-3.902343 2.316406-3.171875 2.554687-7.40625.617187-10.824219l-60.246093-106.175781c39.847656-36.027344 62.546875-86.898438 62.546875-140.886719 0-86.925781-58.75-162.632812-142.867188-184.105469-5.355468-1.367187-10.796875 1.863281-12.164062 7.214844-1.367188 5.351563 1.863281 10.796875 7.214844 12.164063 75.257812 19.210937 127.820312 86.949218 127.820312 164.726562 0 94.660156-76.878906 170-170 170-93.1875 0-170-75.402344-170-170 0-77.777344 52.558594-145.515625 127.816406-164.726562 5.351563-1.367188 8.582032-6.8125 7.21875-12.164063-1.367187-5.351563-6.808594-8.582031-12.164062-7.214844zm-25.835938 472.160157-19.652344-55.378907c-1.671874-4.710937-6.5625-7.464843-11.457031-6.449219l-55.324219 11.488282 47.679688-84.03125c27.800781 20.210937 60.71875 32.523437 94.949219 35.570312zm177.035156-61.828126c-4.890624-1.015624-9.785156 1.738282-11.457031 6.449219l-19.648437 55.378907-56.199219-98.800782c34.234375-3.046875 67.148437-15.359375 94.953125-35.570312l47.679688 84.03125zm0 0"/></g></svg>
      xxx clients satisfaits
    </div>
    <div class="flash-info">      
      <svg height="28px" id="Layer_1_1_" enable-background="new 0 0 64 64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m52 26.713v-12.299l6-6v20.586h2v-23h-.009c0-.129-.016-.259-.067-.383-.154-.374-.52-.617-.924-.617h-48c-.266 0-.52.105-.707.293l-7.999 7.999c-.181.181-.294.431-.294.708v38c0 .553.447 1 1 1h48c.553 0 1-.447 1-1v-11.96c1.258 1.843 2 4.065 2 6.46 0 6.341-5.159 11.5-11.5 11.5-.553 0-1 .447-1 1s.447 1 1 1h2c9.649 0 17.5-7.851 17.5-17.5 0-6.963-4.098-12.972-10-15.787zm-1.414-13.713h-18.172l6-6h18.172zm-21.293.293c-.188.187-.293.441-.293.707v7h-4v-6.586l7.414-7.414h3.172zm-17.879-6.293h18.172l-6 6h-18.172zm-7.414 44v-36h19v7c0 .553.447 1 1 1h6c.553 0 1-.447 1-1v-7h19v10.899c-1.732-.576-3.577-.899-5.5-.899h-1.5v-5c0-.375-.209-.718-.542-.89-.335-.172-.735-.143-1.039.076l-14 10c-.263.188-.419.491-.419.814s.156.626.419.813l14 10c.304.218.704.245 1.039.076.333-.171.542-.514.542-.889v-4.989c2.668.115 5.103 1.143 7 2.779v13.21zm48.048 5.035c2.441-2.444 3.952-5.816 3.952-9.535 0-7.444-6.056-13.5-13.5-13.5h-.5c-.553 0-1 .447-1 1v4.057l-11.279-8.057 11.279-8.057v4.057c0 .553.447 1 1 1h2.5c8.547 0 15.5 6.953 15.5 15.5 0 5.809-3.211 10.881-7.952 13.535z"/><path d="m6 47h12v2h-12z"/><path d="m6 43h12v2h-12z"/></svg>
   	  Satisfait ou remboursé
    </div>
    <div class="flash-info">      
      <svg height="28px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve"> <g> <g> <path d="M402.524,432l-18.52-55.568c-6.472-19.4-22.984-33.72-43.112-37.384l-53.464-9.728v-4.144 c9.304-5.4,17.4-12.624,23.848-21.176h16.152c13.232,0,24-10.768,24-24v-96c0-57.344-46.656-104-104-104s-104,46.656-104,104v56 c0,15.424,10.968,28.328,25.512,31.336c4.488,22.992,18.856,42.448,38.488,53.84v4.144l-53.472,9.728 c-20.12,3.664-36.64,17.984-43.104,37.384l-3.2,9.608l-27.248-27.248c-3.12-3.12-3.12-8.2,0-11.32l31.6-31.592l-59.312-59.312 L16.98,292.28c-10.576,10.576-16.4,24.64-16.4,39.6s5.824,29.016,16.4,39.592l108.12,108.12C135.676,490.168,149.74,496,164.7,496 c14.96,0,29.016-5.832,39.344-16.168l38.968-35.704L230.86,432H402.524z M335.428,280c0,4.416-3.592,8-8,8H320.7 c2.32-5.288,4.08-10.864,5.216-16.664c3.424-0.712,6.576-2.072,9.512-3.784V280z M327.428,253.776v-27.552 c4.76,2.776,8,7.88,8,13.776S332.188,251,327.428,253.776z M167.428,253.776c-4.76-2.776-8-7.88-8-13.776s3.24-11,8-13.776 V253.776z M167.428,200v9.136c-2.848,0.744-5.52,1.864-8,3.312V184c0-48.52,39.48-88,88-88s88,39.48,88,88v28.448 c-2.48-1.448-5.152-2.576-8-3.312V200h-8c-23.656,0-45.896-9.216-62.632-25.944l-9.368-9.368l-9.368,9.368 C221.324,190.784,199.084,200,175.428,200H167.428z M183.428,256v-40.304c24.024-1.808,46.424-11.72,64-28.432 c17.576,16.712,39.976,26.632,64,28.432V256c0,11.664-3.184,22.576-8.656,32h-55.344v16h42.192c-11.28,9.928-26.024,16-42.192,16 C212.14,320,183.428,291.288,183.428,256z M271.428,332.312v0.376l-24,24l-24-24v-0.376c7.584,2.384,15.64,3.688,24,3.688 S263.844,334.696,271.428,332.312z M126.02,381.488c4.616-13.856,16.416-24.088,30.792-26.712l55.92-10.16l34.696,34.696 l34.688-34.688l55.912,10.16c14.376,2.624,26.176,12.848,30.792,26.712L380.332,416H214.86l-31.16-31.16l-34.624,31.32 c-3.016,3.032-8.288,3.032-11.312,0l-17.472-17.472L126.02,381.488z M52.684,279.192l36.688,36.688l-8.688,8.688L43.996,287.88 L52.684,279.192z M192.964,468.296c-7.552,7.536-17.6,11.704-28.28,11.704c-10.68,0-20.728-4.168-28.288-11.72L28.276,360.168 c-7.552-7.552-11.712-17.6-11.712-28.28c0-10.688,4.16-20.736,11.712-28.288l4.4-4.4l36.688,36.688l-0.288,0.288 c-9.352,9.36-9.352,24.584,0,33.944l57.368,57.368c4.536,4.528,10.56,7.032,16.976,7.032s12.44-2.496,16.68-6.752l0.6-0.536 l36.856,36.856L192.964,468.296z M209.364,453.256l-36.776-36.776l10.568-9.552l36.712,36.712L209.364,453.256z"/> </g> </g> <g> <g> <path d="M471.428,0h-112c-13.232,0-24,10.768-24,24v64c0,13.232,10.768,24,24,24h21.368l-8.272,48.248l77.2-48.248h21.704 c13.232,0,24-10.768,24-24V24C495.428,10.768,484.66,0,471.428,0z M479.428,88c0,4.408-3.592,8-8,8h-26.296l-50.808,31.752 L399.772,96h-40.344c-4.408,0-8-3.592-8-8V24c0-4.408,3.592-8,8-8h112c4.408,0,8,3.592,8,8V88z"/> </g> </g> <g> <g> <rect x="367.428" y="32" width="96" height="16"/> </g> </g> <g> <g> <rect x="367.428" y="64" width="64" height="16"/> </g> </g> <g> <g> <rect x="447.428" y="64" width="16" height="16"/> </g> </g> <g> <g> <path d="M247.428,24C142.9,24,52.86,96.304,29.452,197.16l-15.16-25.272l-13.72,8.232l28.12,46.856l46.856-28.12l-8.232-13.72 l-21.68,13.008C68.308,105.88,151.276,40,247.428,40c21.016,0,41.752,3.12,61.632,9.28L313.796,34 C292.38,27.36,270.052,24,247.428,24z"/> </g> </g> <g> <g> <path d="M491.54,177.136l-46.856-28.12l-28.112,46.864l13.72,8.232l14-23.336c7.368,21.56,11.136,44.112,11.136,67.224 c0,47.576-16.48,94.088-46.392,130.96l12.424,10.08c32.224-39.712,49.968-89.808,49.968-141.04 c0-24.472-3.944-48.368-11.632-71.248l23.512,14.104L491.54,177.136z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
   	  Support réactif
    </div>
    <div class="flash-info">
      <svg height="28px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"> <g> <g> <path d="M407.04,385.22c-4.539-3.148-10.77-2.016-13.915,2.523c-3.048,4.4-6.502,8.678-10.271,12.717 c-2.525,2.709-5.999,5.975-9.779,9.191c-4.206,3.58-4.714,9.891-1.135,14.098c1.978,2.324,4.791,3.518,7.621,3.518 c2.291,0,4.594-0.783,6.477-2.385c4.41-3.754,8.369-7.482,11.443-10.783c4.422-4.738,8.488-9.773,12.084-14.965 C412.71,394.595,411.58,388.365,407.04,385.22z"/> </g> </g> <g> <g> <path d="M363.474,430.058c-2.346-5-8.298-7.152-13.3-4.807l-0.313,0.141c-5.053,2.229-7.341,8.133-5.11,13.186 c1.65,3.74,5.312,5.965,9.153,5.965c1.349,0,2.72-0.275,4.032-0.854c0.244-0.107,0.486-0.217,0.729-0.33 C363.665,441.013,365.818,435.06,363.474,430.058z"/> </g> </g> <g> <g> <path d="M482.126,26.001H29.875C13.401,26.001,0,39.404,0,55.876v280.252c0,16.471,13.401,29.873,29.875,29.873h210.586 c8.927,37.77,29.114,64.52,46.757,81.658C312.97,472.677,342.49,486,353.899,486c11.408,0,40.928-13.322,66.681-38.34 c17.643-17.139,37.831-43.889,46.757-81.658h14.789c16.473,0,29.875-13.402,29.875-29.873V55.876 C512.001,39.404,498.599,26.001,482.126,26.001z M452,325.019c0.001,52.688-24.32,87.637-44.724,107.678 c-24.203,23.773-49.03,33.02-53.377,33.301c-4.348-0.281-29.176-9.527-53.379-33.301c-20.402-20.041-44.723-54.99-44.723-107.678 v-49.246c34.43-9.957,66.646-23.584,98.105-41.492c30.75,17.453,64.41,31.686,98.098,41.486V325.019z M492.001,336.128 c0,5.444-4.431,9.873-9.875,9.873h-11.311c0.766-6.701,1.186-13.689,1.186-20.982v-56.828c0-4.514-3.024-8.467-7.379-9.65 c-36.313-9.861-72.854-25.227-105.672-44.436c-3.12-1.826-6.982-1.824-10.104,0.002c-33.748,19.754-68.313,34.287-105.67,44.434 c-4.355,1.184-7.379,5.137-7.379,9.65v56.828c0,7.293,0.419,14.281,1.186,20.982H29.875c-5.445,0-9.875-4.43-9.875-9.873V165.999 h472.001V336.128z M492.001,146H20v-39.998h472.001V146z M492.001,86.001H20V55.876c0-5.445,4.43-9.875,9.875-9.875h452.251 c5.444,0,9.875,4.43,9.875,9.875V86.001z"/> </g> </g> <g> <g> <path d="M119.997,236.003c-6.029,0-11.982,1.219-17.492,3.543c-5.383-2.281-11.299-3.543-17.503-3.543 c-24.813,0-45.001,20.186-45.001,44.998s20.187,45,45.001,45c6.204,0,12.12-1.262,17.502-3.543 c5.511,2.324,11.464,3.543,17.493,3.543c24.814,0,45.002-20.188,45.002-45S144.811,236.003,119.997,236.003z M85.002,306.001 c-13.786,0-25.001-11.214-25.001-25c0-13.785,11.215-24.998,25.001-24.998c13.784,0,24.999,11.213,24.999,24.998 C110.001,294.786,98.786,306.001,85.002,306.001z M122.476,305.879c4.75-7.131,7.525-15.686,7.525-24.877 c0-9.191-2.775-17.744-7.524-24.875c12.625,1.248,22.521,11.928,22.521,24.875C144.998,293.949,135.102,304.63,122.476,305.879z" /> </g> </g> <g> <g> <path d="M101.436,191.001H49.999c-5.523,0-10,4.477-10,10c0,5.522,4.477,10,10,10h51.437c5.523,0,10-4.479,10-10 C111.436,195.478,106.959,191.001,101.436,191.001z"/> </g> </g> <g> <g> <path d="M130.996,191.001h-0.474c-5.523,0-10,4.477-10,10c0,5.522,4.477,10,10,10h0.474c5.522,0,10-4.479,10-10 C140.996,195.478,136.518,191.001,130.996,191.001z"/> </g> </g> <g> <g> <path d="M408.79,302.026c-3.903-3.903-10.234-3.905-14.141-0.001l-53.477,53.473l-28.023-28.025 c-3.906-3.902-10.238-3.904-14.143,0c-3.905,3.906-3.906,10.238,0,14.143l35.095,35.096c1.953,1.953,4.512,2.93,7.071,2.93 s5.119-0.977,7.07-2.93l60.547-60.543C412.695,312.265,412.695,305.933,408.79,302.026z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
      Paiements sécurisés
    </div>    
  </div>
  
  
  <style>
   .flash-infos {
     padding:6px 10px;
     background:#333;
     color:#FFF;
     display:flex;
     width:100%;
     max-width:100%;
     align-items:center;
     
   }
    .flash-info  {
      padding:0;
      display:flex !important;
      align-items:center;
      justify-content:center;
    }
    .flash-info svg {
      fill:#FFF;
      margin-right:7px;
      width:auto;
      height:28px;
    } 
    .flash-info.truck svg  {
      height:30px;
    }
    .flash-info-pulse {
      animation: flash-pulse 2s infinite;
    }
    @keyframes flash-pulse {
      0% {
        opacity:0;
      }
      
      50% {
        opacity:1;
      }

      100% {
        opacity:1;
      }
    }
  </style>

  <script type="text/javascript">      
    
    $('.flash-infos').not('.slick-initialized').slick({
      dots: false,
      infinite: true,
      speed: 300,    
      arrows: false,    
      autoplay: true,
      autoplaySpeed: 3000,
      slidesToShow: 3,
      slidesToScroll: 3,
      arrows: false,
      responsive: [          
        {
          breakpoint: 900,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }          
      ]
    });
 
  </script>
  

Si cela ne fonctionne pas prenez le code suivant

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha256-UK1EiopXIL+KVhfbFa8xrmAWPeBjMVdvYMYkTAEv/HI=" crossorigin="anonymous" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

  
  <div class="flash-infos">   
    <div class="flash-info truck">
      <svg height="28px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.1 491.1" style="enable-background:new 0 0 491.1 491.1;" xml:space="preserve"> <path transform="translate(0 -540.36)" d="M401.5,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S426.1,863.31,401.5,863.31z M401.5,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S415.1,933.31,401.5,933.31z M413.1,713.41c-1.8-1.7-4.2-2.6-6.7-2.6h-51.3 c-5.5,0-10,4.5-10,10v82c0,5.5,4.5,10,10,10h81.4c5.5,0,10-4.5,10-10v-54.9c0-2.8-1.2-5.5-3.3-7.4L413.1,713.41z M426.5,792.81 h-61.4v-62.1h37.4l24,21.6V792.81z M157.3,863.31c-12,0-23.4,4.7-32,13.2c-8.6,8.6-13.4,19.8-13.4,31.8s4.7,23.2,13.4,31.8 c8.7,8.5,20,13.2,32,13.2c24.6,0,44.6-20.2,44.6-45S181.9,863.31,157.3,863.31z M157.3,933.31c-13.8,0-25.4-11.4-25.4-25 s11.6-25,25.4-25c13.6,0,24.6,11.2,24.6,25S170.9,933.31,157.3,933.31z M90.6,875.61H70.5v-26.6c0-5.5-4.5-10-10-10s-10,4.5-10,10 v36.6c0,5.5,4.5,10,10,10h30.1c5.5,0,10-4.5,10-10S96.1,875.61,90.6,875.61z M141.3,821.11c0-5.5-4.5-10-10-10H10 c-5.5,0-10,4.5-10,10s4.5,10,10,10h121.3C136.8,831.11,141.3,826.71,141.3,821.11z M30.3,785.01l121.3,0.7c5.5,0,10-4.4,10.1-9.9 c0.1-5.6-4.4-10.1-9.9-10.1l-121.3-0.7c-0.1,0-0.1,0-0.1,0c-5.5,0-10,4.4-10,9.9C20.3,780.51,24.8,785.01,30.3,785.01z M50.7,739.61 H172c5.5,0,10-4.5,10-10s-4.5-10-10-10H50.7c-5.5,0-10,4.5-10,10S45.2,739.61,50.7,739.61z M487.4,726.11L487.4,726.11l-71.6-59.3 c-1.8-1.5-4-2.3-6.4-2.3h-84.2v-36c0-5.5-4.5-10-10-10H60.5c-5.5,0-10,4.5-10,10v73.2c0,5.5,4.5,10,10,10s10-4.5,10-10v-63.2h234.8 v237.1h-82c-5.5,0-10,4.5-10,10s4.5,10,10,10h122.1c5.5,0,10-4.5,10-10s-4.5-10-10-10h-20.1v-191.1h80.6l65.2,54l-0.7,136.9H460 c-5.5,0-10,4.5-10,10s4.5,10,10,10h20.3c5.5,0,10-4.4,10-9.9l0.8-151.6C491,730.91,489.7,728.01,487.4,726.11z"/> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
      Livraison offerte
    </div>
    <div class="flash-info">      
     <svg height="28px"  viewBox="-66 0 511 511.99925" xmlns="http://www.w3.org/2000/svg"><g><path d="m40.5 190c0 82.710938 67.289062 150 150 150s150-67.289062 150-150-67.289062-150-150-150-150 67.289062-150 150zm150-130c71.683594 0 130 58.316406 130 130s-58.316406 130-130 130-130-58.316406-130-130 58.316406-130 130-130zm0 0"/><path d="m97.890625 172.171875 38.761719 38.191406-8.917969 53.675781c-.621094 3.738282.921875 7.503907 3.988281 9.730469 3.0625 2.226563 7.121094 2.527344 10.484375.785157l48.292969-25.078126 48.289062 25.078126c3.335938 1.730468 7.394532 1.460937 10.484376-.785157 3.066406-2.226562 4.609374-5.992187 3.988281-9.730469l-8.917969-53.675781 38.761719-38.191406c2.699219-2.65625 3.664062-6.609375 2.492187-10.214844-1.171875-3.601562-4.277344-6.230469-8.023437-6.796875l-53.792969-8.097656-24.339844-48.675781c-1.691406-3.386719-5.15625-5.527344-8.941406-5.527344-3.789062 0-7.25 2.140625-8.945312 5.527344l-24.339844 48.675781-53.792969 8.097656c-3.746094.5625-6.851563 3.195313-8.023437 6.796875-1.171876 3.605469-.203126 7.558594 2.492187 10.214844zm67.4375-6.105469c3.21875-.484375 6-2.503906 7.457031-5.414062l17.714844-35.433594 17.714844 35.433594c1.457031 2.910156 4.238281 4.929687 7.457031 5.414062l39.152344 5.894532-28.214844 27.792968c-2.316406 2.285156-3.378906 5.554688-2.847656 8.765625l6.492187 39.066407-35.148437-18.25c-1.441407-.75-3.023438-1.125-4.605469-1.125s-3.164062.375-4.609375 1.125l-35.148437 18.25 6.492187-39.066407c.535156-3.210937-.527344-6.480469-2.847656-8.765625l-28.210938-27.792968zm0 0"/><path d="m200.5 10c0 5.523438-4.476562 10-10 10s-10-4.476562-10-10 4.476562-10 10-10 10 4.476562 10 10zm0 0"/><path d="m143.371094 5.894531c-84.121094 21.472657-142.871094 97.179688-142.871094 184.105469 0 53.988281 22.699219 104.859375 62.546875 140.886719l-60.246094 106.175781c-1.9375 3.417969-1.695312 7.652344.617188 10.824219 2.3125 3.175781 6.265625 4.703125 10.113281 3.902343l68.417969-14.207031 24.046875 67.761719c1.304687 3.6875 4.644531 6.269531 8.542968 6.617188 3.898438.347656 7.636719-1.617188 9.570313-5.019532l66.390625-116.71875 66.386719 116.71875c1.789062 3.144532 5.117187 5.054688 8.6875 5.054688.292969 0 .589843-.011719.882812-.035156 3.898438-.347657 7.238281-2.933594 8.546875-6.617188l24.042969-67.761719 68.417969 14.207031c3.84375.796876 7.800781-.730468 10.113281-3.902343 2.316406-3.171875 2.554687-7.40625.617187-10.824219l-60.246093-106.175781c39.847656-36.027344 62.546875-86.898438 62.546875-140.886719 0-86.925781-58.75-162.632812-142.867188-184.105469-5.355468-1.367187-10.796875 1.863281-12.164062 7.214844-1.367188 5.351563 1.863281 10.796875 7.214844 12.164063 75.257812 19.210937 127.820312 86.949218 127.820312 164.726562 0 94.660156-76.878906 170-170 170-93.1875 0-170-75.402344-170-170 0-77.777344 52.558594-145.515625 127.816406-164.726562 5.351563-1.367188 8.582032-6.8125 7.21875-12.164063-1.367187-5.351563-6.808594-8.582031-12.164062-7.214844zm-25.835938 472.160157-19.652344-55.378907c-1.671874-4.710937-6.5625-7.464843-11.457031-6.449219l-55.324219 11.488282 47.679688-84.03125c27.800781 20.210937 60.71875 32.523437 94.949219 35.570312zm177.035156-61.828126c-4.890624-1.015624-9.785156 1.738282-11.457031 6.449219l-19.648437 55.378907-56.199219-98.800782c34.234375-3.046875 67.148437-15.359375 94.953125-35.570312l47.679688 84.03125zm0 0"/></g></svg>
      xxx clients satisfaits
    </div>
    <div class="flash-info">      
      <svg height="28px" id="Layer_1_1_" enable-background="new 0 0 64 64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="m52 26.713v-12.299l6-6v20.586h2v-23h-.009c0-.129-.016-.259-.067-.383-.154-.374-.52-.617-.924-.617h-48c-.266 0-.52.105-.707.293l-7.999 7.999c-.181.181-.294.431-.294.708v38c0 .553.447 1 1 1h48c.553 0 1-.447 1-1v-11.96c1.258 1.843 2 4.065 2 6.46 0 6.341-5.159 11.5-11.5 11.5-.553 0-1 .447-1 1s.447 1 1 1h2c9.649 0 17.5-7.851 17.5-17.5 0-6.963-4.098-12.972-10-15.787zm-1.414-13.713h-18.172l6-6h18.172zm-21.293.293c-.188.187-.293.441-.293.707v7h-4v-6.586l7.414-7.414h3.172zm-17.879-6.293h18.172l-6 6h-18.172zm-7.414 44v-36h19v7c0 .553.447 1 1 1h6c.553 0 1-.447 1-1v-7h19v10.899c-1.732-.576-3.577-.899-5.5-.899h-1.5v-5c0-.375-.209-.718-.542-.89-.335-.172-.735-.143-1.039.076l-14 10c-.263.188-.419.491-.419.814s.156.626.419.813l14 10c.304.218.704.245 1.039.076.333-.171.542-.514.542-.889v-4.989c2.668.115 5.103 1.143 7 2.779v13.21zm48.048 5.035c2.441-2.444 3.952-5.816 3.952-9.535 0-7.444-6.056-13.5-13.5-13.5h-.5c-.553 0-1 .447-1 1v4.057l-11.279-8.057 11.279-8.057v4.057c0 .553.447 1 1 1h2.5c8.547 0 15.5 6.953 15.5 15.5 0 5.809-3.211 10.881-7.952 13.535z"/><path d="m6 47h12v2h-12z"/><path d="m6 43h12v2h-12z"/></svg>
      Satisfait ou remboursé
    </div>
    <div class="flash-info">      
      <svg height="28px"  version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve"> <g> <g> <path d="M402.524,432l-18.52-55.568c-6.472-19.4-22.984-33.72-43.112-37.384l-53.464-9.728v-4.144 c9.304-5.4,17.4-12.624,23.848-21.176h16.152c13.232,0,24-10.768,24-24v-96c0-57.344-46.656-104-104-104s-104,46.656-104,104v56 c0,15.424,10.968,28.328,25.512,31.336c4.488,22.992,18.856,42.448,38.488,53.84v4.144l-53.472,9.728 c-20.12,3.664-36.64,17.984-43.104,37.384l-3.2,9.608l-27.248-27.248c-3.12-3.12-3.12-8.2,0-11.32l31.6-31.592l-59.312-59.312 L16.98,292.28c-10.576,10.576-16.4,24.64-16.4,39.6s5.824,29.016,16.4,39.592l108.12,108.12C135.676,490.168,149.74,496,164.7,496 c14.96,0,29.016-5.832,39.344-16.168l38.968-35.704L230.86,432H402.524z M335.428,280c0,4.416-3.592,8-8,8H320.7 c2.32-5.288,4.08-10.864,5.216-16.664c3.424-0.712,6.576-2.072,9.512-3.784V280z M327.428,253.776v-27.552 c4.76,2.776,8,7.88,8,13.776S332.188,251,327.428,253.776z M167.428,253.776c-4.76-2.776-8-7.88-8-13.776s3.24-11,8-13.776 V253.776z M167.428,200v9.136c-2.848,0.744-5.52,1.864-8,3.312V184c0-48.52,39.48-88,88-88s88,39.48,88,88v28.448 c-2.48-1.448-5.152-2.576-8-3.312V200h-8c-23.656,0-45.896-9.216-62.632-25.944l-9.368-9.368l-9.368,9.368 C221.324,190.784,199.084,200,175.428,200H167.428z M183.428,256v-40.304c24.024-1.808,46.424-11.72,64-28.432 c17.576,16.712,39.976,26.632,64,28.432V256c0,11.664-3.184,22.576-8.656,32h-55.344v16h42.192c-11.28,9.928-26.024,16-42.192,16 C212.14,320,183.428,291.288,183.428,256z M271.428,332.312v0.376l-24,24l-24-24v-0.376c7.584,2.384,15.64,3.688,24,3.688 S263.844,334.696,271.428,332.312z M126.02,381.488c4.616-13.856,16.416-24.088,30.792-26.712l55.92-10.16l34.696,34.696 l34.688-34.688l55.912,10.16c14.376,2.624,26.176,12.848,30.792,26.712L380.332,416H214.86l-31.16-31.16l-34.624,31.32 c-3.016,3.032-8.288,3.032-11.312,0l-17.472-17.472L126.02,381.488z M52.684,279.192l36.688,36.688l-8.688,8.688L43.996,287.88 L52.684,279.192z M192.964,468.296c-7.552,7.536-17.6,11.704-28.28,11.704c-10.68,0-20.728-4.168-28.288-11.72L28.276,360.168 c-7.552-7.552-11.712-17.6-11.712-28.28c0-10.688,4.16-20.736,11.712-28.288l4.4-4.4l36.688,36.688l-0.288,0.288 c-9.352,9.36-9.352,24.584,0,33.944l57.368,57.368c4.536,4.528,10.56,7.032,16.976,7.032s12.44-2.496,16.68-6.752l0.6-0.536 l36.856,36.856L192.964,468.296z M209.364,453.256l-36.776-36.776l10.568-9.552l36.712,36.712L209.364,453.256z"/> </g> </g> <g> <g> <path d="M471.428,0h-112c-13.232,0-24,10.768-24,24v64c0,13.232,10.768,24,24,24h21.368l-8.272,48.248l77.2-48.248h21.704 c13.232,0,24-10.768,24-24V24C495.428,10.768,484.66,0,471.428,0z M479.428,88c0,4.408-3.592,8-8,8h-26.296l-50.808,31.752 L399.772,96h-40.344c-4.408,0-8-3.592-8-8V24c0-4.408,3.592-8,8-8h112c4.408,0,8,3.592,8,8V88z"/> </g> </g> <g> <g> <rect x="367.428" y="32" width="96" height="16"/> </g> </g> <g> <g> <rect x="367.428" y="64" width="64" height="16"/> </g> </g> <g> <g> <rect x="447.428" y="64" width="16" height="16"/> </g> </g> <g> <g> <path d="M247.428,24C142.9,24,52.86,96.304,29.452,197.16l-15.16-25.272l-13.72,8.232l28.12,46.856l46.856-28.12l-8.232-13.72 l-21.68,13.008C68.308,105.88,151.276,40,247.428,40c21.016,0,41.752,3.12,61.632,9.28L313.796,34 C292.38,27.36,270.052,24,247.428,24z"/> </g> </g> <g> <g> <path d="M491.54,177.136l-46.856-28.12l-28.112,46.864l13.72,8.232l14-23.336c7.368,21.56,11.136,44.112,11.136,67.224 c0,47.576-16.48,94.088-46.392,130.96l12.424,10.08c32.224-39.712,49.968-89.808,49.968-141.04 c0-24.472-3.944-48.368-11.632-71.248l23.512,14.104L491.54,177.136z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
      Support réactif
    </div>
    <div class="flash-info">
      <svg height="28px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"> <g> <g> <path d="M407.04,385.22c-4.539-3.148-10.77-2.016-13.915,2.523c-3.048,4.4-6.502,8.678-10.271,12.717 c-2.525,2.709-5.999,5.975-9.779,9.191c-4.206,3.58-4.714,9.891-1.135,14.098c1.978,2.324,4.791,3.518,7.621,3.518 c2.291,0,4.594-0.783,6.477-2.385c4.41-3.754,8.369-7.482,11.443-10.783c4.422-4.738,8.488-9.773,12.084-14.965 C412.71,394.595,411.58,388.365,407.04,385.22z"/> </g> </g> <g> <g> <path d="M363.474,430.058c-2.346-5-8.298-7.152-13.3-4.807l-0.313,0.141c-5.053,2.229-7.341,8.133-5.11,13.186 c1.65,3.74,5.312,5.965,9.153,5.965c1.349,0,2.72-0.275,4.032-0.854c0.244-0.107,0.486-0.217,0.729-0.33 C363.665,441.013,365.818,435.06,363.474,430.058z"/> </g> </g> <g> <g> <path d="M482.126,26.001H29.875C13.401,26.001,0,39.404,0,55.876v280.252c0,16.471,13.401,29.873,29.875,29.873h210.586 c8.927,37.77,29.114,64.52,46.757,81.658C312.97,472.677,342.49,486,353.899,486c11.408,0,40.928-13.322,66.681-38.34 c17.643-17.139,37.831-43.889,46.757-81.658h14.789c16.473,0,29.875-13.402,29.875-29.873V55.876 C512.001,39.404,498.599,26.001,482.126,26.001z M452,325.019c0.001,52.688-24.32,87.637-44.724,107.678 c-24.203,23.773-49.03,33.02-53.377,33.301c-4.348-0.281-29.176-9.527-53.379-33.301c-20.402-20.041-44.723-54.99-44.723-107.678 v-49.246c34.43-9.957,66.646-23.584,98.105-41.492c30.75,17.453,64.41,31.686,98.098,41.486V325.019z M492.001,336.128 c0,5.444-4.431,9.873-9.875,9.873h-11.311c0.766-6.701,1.186-13.689,1.186-20.982v-56.828c0-4.514-3.024-8.467-7.379-9.65 c-36.313-9.861-72.854-25.227-105.672-44.436c-3.12-1.826-6.982-1.824-10.104,0.002c-33.748,19.754-68.313,34.287-105.67,44.434 c-4.355,1.184-7.379,5.137-7.379,9.65v56.828c0,7.293,0.419,14.281,1.186,20.982H29.875c-5.445,0-9.875-4.43-9.875-9.873V165.999 h472.001V336.128z M492.001,146H20v-39.998h472.001V146z M492.001,86.001H20V55.876c0-5.445,4.43-9.875,9.875-9.875h452.251 c5.444,0,9.875,4.43,9.875,9.875V86.001z"/> </g> </g> <g> <g> <path d="M119.997,236.003c-6.029,0-11.982,1.219-17.492,3.543c-5.383-2.281-11.299-3.543-17.503-3.543 c-24.813,0-45.001,20.186-45.001,44.998s20.187,45,45.001,45c6.204,0,12.12-1.262,17.502-3.543 c5.511,2.324,11.464,3.543,17.493,3.543c24.814,0,45.002-20.188,45.002-45S144.811,236.003,119.997,236.003z M85.002,306.001 c-13.786,0-25.001-11.214-25.001-25c0-13.785,11.215-24.998,25.001-24.998c13.784,0,24.999,11.213,24.999,24.998 C110.001,294.786,98.786,306.001,85.002,306.001z M122.476,305.879c4.75-7.131,7.525-15.686,7.525-24.877 c0-9.191-2.775-17.744-7.524-24.875c12.625,1.248,22.521,11.928,22.521,24.875C144.998,293.949,135.102,304.63,122.476,305.879z" /> </g> </g> <g> <g> <path d="M101.436,191.001H49.999c-5.523,0-10,4.477-10,10c0,5.522,4.477,10,10,10h51.437c5.523,0,10-4.479,10-10 C111.436,195.478,106.959,191.001,101.436,191.001z"/> </g> </g> <g> <g> <path d="M130.996,191.001h-0.474c-5.523,0-10,4.477-10,10c0,5.522,4.477,10,10,10h0.474c5.522,0,10-4.479,10-10 C140.996,195.478,136.518,191.001,130.996,191.001z"/> </g> </g> <g> <g> <path d="M408.79,302.026c-3.903-3.903-10.234-3.905-14.141-0.001l-53.477,53.473l-28.023-28.025 c-3.906-3.902-10.238-3.904-14.143,0c-3.905,3.906-3.906,10.238,0,14.143l35.095,35.096c1.953,1.953,4.512,2.93,7.071,2.93 s5.119-0.977,7.07-2.93l60.547-60.543C412.695,312.265,412.695,305.933,408.79,302.026z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
      Paiements sécurisés
    </div>    
  </div>
  
  
  <style>
   .flash-infos {
     padding:6px 10px;
     background:#333;
     color:#FFF;
     display:flex;
     width:100%;
     max-width:100%;
     align-items:center;
     
   }
    .flash-info  {
      padding:0;
      display:flex !important;
      align-items:center;
      justify-content:center;
    }
    .flash-info svg {
      fill:#FFF;
      margin-right:7px;
      width:auto;
      height:28px;
    } 
    .flash-info.truck svg  {
      height:30px;
    }
    .flash-info-pulse {
      animation: flash-pulse 2s infinite;
    }
    @keyframes flash-pulse {
      0% {
        opacity:0;
      }
      
      50% {
        opacity:1;
      }

      100% {
        opacity:1;
      }
    }
  </style>

  <script type="text/javascript">      
    
    $('.flash-infos').not('.slick-initialized').slick({
      dots: false,
      infinite: true,
      speed: 300,        
      autoplay: true,
     arrows: false,
      autoplaySpeed: 3000,
      slidesToShow: 3,
      slidesToScroll: 3,
      arrows: false,
      responsive: [          
        {
          breakpoint: 900,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }          
      ]
    });
 
  </script>

Désormais il ne vous reste plus qu’à le mettre ou vous voulez ! Généralement on va l’utiliser comme bandeau d’information en haut du site. Pour ce faire suivez ces étapes:

Rendez-vous dans le dossier Layout et ouvrez le fichier theme.liquid. Trouvez l’ouverture de la balise <body...> et copiez/collez le code tout en bas pour afficher le snippet:

{% include 'dg-flash-infos' %}

Si vous avez speedfly suivez ces étapes

Rendez-vous dans le dossier Sections – Header.liquid – trouvez la 1ère div sur la première ligne  et copiez/collez l’appel du snippet sur la 2ème linge juste en dessous donc.

Comment personnaliser tout ça ?

Cela reste assez complexe par écrit et la version vidéo sera plus pratique pour vous 😉 alors je vous invite à visionner la vidéo  🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 11 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 62 commentaires

  1. Salut
    Superbe boulot encore une fois
    Juste sur version mobile, une flèche apparait en haut à droite au niveau du slide. Cela décale le site.
    Peut-on la supprimé ?

  2. Bonjour,
    magnifique tuto comme d’hab
    par contre même problème j’ai « previous » et « next » qui s’affiche aux extrémité de la barre ?
    comment supprimé sa ?
    merci encore .

    1. Hello, le code a été mis à jour avec le correctif

      1. bonjour,

        Pour moi la barre est affiché, mais sa ne défile pas ca reste bloqué sa ne bouge pas
        vous pouvez me dire c’est quoi le problème s’il vous plait

        1. Hello, surement un problème JS ou thème incompatible. Ouvrir la console de développement chrome et me dire l’erreur rouge affichée svp

          1. Bonjour,

            Même problème, mes 3 textes sont bloqués à gauche de l’écran, ça ne défile pas.

          2. j’utilise le thème Brooklyn

  3. Hello 🙂 j’ai essayé de l’appliquer, mais la bar ne s’affiche pas correctement et seulement sur 3/4 de la page d’accueil. Je suis sur le thème Narrative
    merci de ton retour

    1. Hello, faudra m’envoyer le lien en MP pour que je jete un oeil

      1. Hello j’ai le même soucis avec le thème narrative
        Merci de ta réponse !

        1. M’envoyer en MP le lien du site avec la barre qui ne fonctionne pas et je regarderai 🙂

          1. Dgeo Dev j’ai un souci sa ne passe pas ils affichent

            Liquid error: Could not find asset snippets/dg-flash-infos.liquid

          2. Hello, c’est que le fichier dans le dossier snippets n’a pas été créé ou alors le nom est mauvais 🙂

      2. Hello j’ai le même soucis avec le thème narrative
        Merci de ta réponse !

  4. Merci beaucoup!

  5. Bonjour je voudrait savoir si il est possible de fixer le slider pour qu’il apparaisse même si on scroll vers le bas, merci de votre réponse!

    1. Bonjour, tout dépend du thème car ca reste délicat surtout sur mobile. Le mieux est de se rapprocher du support du thème pour vous donner les bonnes pratiques selon les codes natifs du thème 🙂

  6. Hello dgeo et merci ! Comment peut on modifier la police du theme?

  7. Bonjour,

    Super tuto, comme d’habitude. Est-il possible de ne garder que 3 icones sur desktop ? Lorsque je garde seulement 3 icones, elles se placent toutes sur la gauche. Comment faire pour qu’elles se répartissent l’espace ?

    Merci pour votre réponse.

    1. Hello, étrange… tu as bien 3 icônes max au format desktop dans les options ? sinon c’est le thème qui gère mal 🙂

  8. Salut, super tuto comme d’habitude! J’aimerais savoir s’il est possible de n’afficher la barre que sur la page d’accueil.

    1. Hello et merci, oui tu peux regarder le tuto personnaliser fiche produit et tu trouvera la réponse

  9. Bonjour moi j’ai un problème au niveau des barres jai un espace blanc en bas, pouvez vous m’aider svp ?

    1. Hello, il faudrait voir avec le support du thème en question car nativement y a pas d’espaces 🙂

  10. Bonjour,

    Superbe tuto !! Super bien expliqué ! le top !
    Comment peut on diminuer la taille du texte sur la barre ?
    merci 🙂

    1. Hello et merci 🙂 dans .flash-infos { rajouter un font-size:14px; ou plus }

  11. Bonjour ,
    déjà merci pour tous tes tutos .
    Jai essaye a plusieurs reprises de mettre les codes en place et il m’affiche sur le site thème début :
    Liquid error: Could not find asset snippets/dg-flash-infos.liquid

    malgres les 2 codes si l’un ne marche pas j’ai mis l’autre et ca ne fonctionne tout de meme pas une solution ?

    1. Hello, c’est qu’il ne trouve pas le fichier dans le dossier snippets 🙂 vérifiez qu’il est bien écrit et présent

  12. Bonsoir, je suis sur le thème Brooklyn, est sur la page d’accueil il y a une barre blanche qui s’affiche en dessous de la header, j’ai essayé sur deux boutiques différentes et ça fais exactement la même chose. Y’a t’il un code à rajouter en plus ?

  13. Bonjour Dgeo Dev Merci pour ta video super enrichissante !
    Cependant je suis sur le theme Prestige et tous les icon se placent sur la gauche
    J’aimerais savoir si tu as la solution stp?
    Il y a beaucoup d’utilisateur du theme prestige qui doivent rencontrer le même problème
    Merci pour ta réponse

    1. Bonjour, dans la partie style (css) vous pouvez tenter de mettre ce code : .flash-info svg { float:left; } ou .flash-info svg { float:left; width:28px; }

  14. Hey, pourrais tu joindre la librairie des icones stp ? pour qu’on puisse choisir celles quon veut. super tuto, merci

  15. Hello, je suis sur le thème Billionaire donc tout marche niquel sauf deux choses : ça ne s’affiche pas sur mobile et la deuxième c’est que j’ai une barre d’annonce sous ma barre d’annonce de couleur grise donc cela ne fait pas très pro. Peux tu m’aider s’il te plaît ? Merci d’avance

    1. Hello, le mieux est de demander au support du thème pour le rendre compatible 😉

  16. salut, j’ai le theme debut et j’ai bien la barre qui apparait cependant elle reste fixe au lieu de slider, du coup ça rend pas top…

    1. Hello, dans ce cas c’est que l’intégration du code est incomplète ou alors y a un conflit avec une app ou le thème 🙁 faudrait voir le site si y a des erreurs au niveau de la console de développement Google

  17. hello est-ce possible de rendre la fonctionalité disponible que sur mobile? merci d’avance je suis sur le thème turbo portland

    1. Hello, essayer de mettre ceci tout en bas du fichier css
      .flash-infos { display:none !important; }
      @media screen and (max-width:600px) {
      display:flex !important;
      }

  18. Bonjour,
    Merci pour ce tuto. La barre marche très bien sur début, par contre j’ai un soucis. Lors du chargement de la page l’image du camion apparait en gros à l’écran très rapidement mais ca gêne à l’œil.
    Y aurait il un moyen de corriger cela.
    Merci

    1. Hello, rajouter dans les svg un height= »28px » au besoin j’ai mis à jour le code

      1. Merci beaucoup c’est parfait

  19. Bonjour,

    Merci pour le tuto.
    J’ai un soucis sur l’affichage mobile, une fine ligne noir apparait sous le header. (Theme turbo)

    Sais-tu comment corriger le bug ?
    Merci

    1. Hello, ah le turbo 😀 le thème qui bug le plus avec mes tutos 😀 faudrait me linker le lien en MP 😉

  20. bonjour Dgeo Dev,

    J’ai le thème speedfly mais pour moi la barre est affiché, mais sa ne défile pas ca reste bloqué sa ne bouge pas
    c’est quoi le problème s’il vous plait ? J’ai copié collé le code au bon endroit pourtant

    1. Hello, pour toute demande concernant speedfly c’est ici 😉 speedecom.freshdesk.com. bonne journée.

  21. pour infos pour speedfly le code ne fonctionne pas (defile pas) j’ai pris le 2eme code en partant du haut cela fonctionne

    merci dgeo pour ton travail 😉

    1. Hello, ok merci pour le retour

  22. Merci beaucoup pour ce tuto.
    Je suis sur le thème venture et j’ai un soucis, il y a une espace entre la barre et mon header. Comment régler ce soucis ?

    1. Hello, c’est à cause du thème, il faut trouver d’ou vient l’espace. le mieux est de demander à leur support 😉

  23. hello c’est surper encore une fois de plus! mais il manque pas la deuxieme partie du code pour colle sur theme.liquid? comme dans video merci

    1. Hello, non non tout est la sur un seul fichier 😉

      1. hello super comme boulot ! mais on ne voit pas la 2ème partie du code

        1. Merci, il n’y a qu’une seule partie 😉

    2. Effectivement il manquait une partie désolé ! c’est ajouté 😉

  24. bonsoir le dernier code je ne trouve pas ! Merci de me aider sil’vous pas , normalement il y a 2 code j’ai installer le 1er code dans snippets et l’autre je trouve pas

    1. Hello, il est rajouté 🙂

  25. Salut, un grand merci pour tes tutos que je dévore sans fin. Etant sur brooklyn, est t’il possible de ne pas mettre la barre sur la page d’accueil. J’ai trouvé un code pour le faire apparaitre sur une page souhaitée:

    {% if request.path contains ‘collections’ %}
    {% include ‘dg-flash-infos’ %}
    {% endif %}

    mais sa m’oblige à rentrer le code pour chaque page :p. Si tu as une solution, je suis preneur. Un grand merci encore

    1. Hello et merci pour le com 😉 oui c’est possible avec cette condition :
      {% if template.name != « index » %}
      {% include ‘dg-flash-infos’ %}
      {% endif %}

      1. Tu gère merci Dev

      2. bon bah j’ai repris vite fais le code ça ne fonctionnais pas.. ça m’affichais sa à la place de la barre flash:
        Liquid error: Argument error in tag ‘include’ – Illegal template name

        du coup j’ai juste eu à modifié comme ça (si quelqu’un en a besoin):
        {% if template.name != « index » %}
        {% include ‘dg-flash-infos’ %}
        {% endif %}

        1. Hello, cool merci pour l’astuce 🙂

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