How to add a dynamic flash bar on the header of your Shopify store

In this tutorial we will see how you can easily create a dynamic flash bar that will scroll through important information for your customers.

Indeed this slider system will scroll a certain number of information with an icon and a small text like free shipping, xxx satisfied customers, warranty, etc…

You can see the result on this demo store : https://speed-ecom-tutorials.myshopify.com/

Password : Speedecom

How to install this header bar?

Let’s start by creating the system in a snippet.

Go to Online Store – Actions – Edit code – Click on the Snippet folder and “Add a new snippet” and then name it dg-flash-infos! Copy/paste the following code inside the new snippet:

<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>
      Free shipping
    </div>
    <div class="flash-info">      
     <svg 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 satisfied clients
    </div>
    <div class="flash-info">      
      <svg 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>
   	  Satisfaction guaranteed
    </div>
    <div class="flash-info">      
      <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 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>
   	  Fast client support
    </div>
    <div class="flash-info">
      <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 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>
      Secure payments
    </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').slick({
      dots: false,
      infinite: true,
      speed: 300,        
      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>

If the code doesn’t work on your theme, try the following one:

<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 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>
      Free shipping
    </div>
    <div class="flash-info">      
     <svg 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 satisfied clients
    </div>
    <div class="flash-info">      
      <svg 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>
   	  Satisfaction guaranteed
    </div>
    <div class="flash-info">      
      <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 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>
   	  Fast client support
    </div>
    <div class="flash-info">
      <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 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>
      Secure payments
    </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').slick({
      dots: false,
      infinite: true,
      speed: 300,        
      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>

Now all you have to do is place the bar wherever you want! Usually we’ll use it as an information bar at the top of the site/header. To do this follow these steps:

Go to the Layout folder and open the theme.liquid file. Find the opening of the <body…> tag and copy/paste the code below:

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

If you have speedfly you will need to change the last step:

Go to the Sections folder and find the header1.liquid (for classic header models) or header2.liquid (for file the minimalist header models) files.

Then add the code at the top of one of the files depending on the header you use.

How to customize the bar?

It is quite hard to explain in writing, the video version will be more convenient for you 😉

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *