How To Develop an Announcement Bar Slider in Shopify

Hi, Are you looking to add an announcement bar slider in your shopify store then your search ends there. This blog post consists detailed explaination on how to add text slider into your shopify website or store. I have mentioned a very quick and easy way by using any newbie can implement slider.

Let’s get started

Go To shopify dashboard then click on Online Store > Themes > Actions > Edit Code.
Click on sections folder and then click on “Add a new section”, name it “slide-bar”, Then paste the code mentioned below.


<style>
#slide-bar p{
  margin:0px;
}
    #slide-bar .slick-prev {
    left: 10px;
    }
    
    #slide-bar .slick-next {
    right: 10px;
}
</style>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javacript" src="https://kenwheeler.github.io/slick/slick/slick.js"> </script>
<div id="slide-bar" style="background:{{ section.settings.announce-ment-bg }};padding:5px 0px;">
  <div class="">
    <div class="announce-slider text-center">
      {% for block in section.blocks %}
      <a href="{{ block.settings.annoucement_link }}" style="color:{{ section.settings.announce-ment-txt }}"> {{ block.settings.annoucement_text }} </a>
      {% endfor %}
    </div>
  </div>
</div>
{% schema %}
  {
    "name": "Announcement Bar Slider",
    "settings": [

      {
  "type": "color",
  "id": "announce-ment-bg",
  "label": "Background Color",
  "default": "#000000"
},
 {
  "type": "color",
  "id": "announce-ment-txt",
  "label": "Text Color",
  "default": "#000000"
}
      
    ],
    "blocks":[
      {
        "name":"Add Slide",
        "type":"announcement-block",
        "settings":[
          {
  "type": "text",
  "id": "annoucement_text",
  "label": "Select slide text"
},
 {
  "type": "url",
  "id": "annoucement_link",
  "label": "Select slide link"
}


        ]
      }
    ]
  }
{% endschema %}


<script>
  
    $('.announce-slider').slick({
  dots: false,
  infinite: true,
      autoplay: true,
  autoplaySpeed: 2000,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

</script>

3. Click “Save” button.

4. Now click on “Layout” folder, then click on “theme.liquid” and find <body there and after body tag paste below code and click on “Save”.

{% section 'slide-bar' %}

5. Congratulation you have done. All you need to make changes from “Customize” area that is it.

Related Posts

Leave a Comment Cancel Reply