How to add announcement slider in shopify?

[beniwalanish]

How to add exactly the same slider like this in dawn theme : 

[sahilsharma9515]

Hi @beniwalanish you need to accomplish it with the help of custom code, I can provide you the base code and you need to edit the base code according to your theme files.

• Add the following code to the new section file (announcement-bar-slider.liquid)

<div class="announcement-bar-slider">
  <div class="slider">
    {% for announcement in section.settings.announcements %}
      <div class="slide">{{ announcement.text }}</div>
    {% endfor %}
  </div>
</div>

<style>
.announcement-bar-slider {
  background-color: #f8f8f8; /* Customize the background color */
  padding: 10px 0;
}
.slider {
  display: flex;
  overflow: hidden;
}
.slide {
  min-width: 100%;
  transition: transform 0.5s ease;
  text-align: center;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const slides = document.querySelectorAll('.slide');
  let currentIndex = 0;

  function showNextSlide() {
    slides[currentIndex].style.transform = 'translateX(-100%)';
    currentIndex = (currentIndex + 1) % slides.length;
    slides[currentIndex].style.transform = 'translateX(0)';
  }

  setInterval(showNextSlide, 3000); // Change slide every 3 seconds
});
</script>

{% schema %}
{
  "name": "Announcement Bar Slider",
  "settings": [
    {
      "type": "list",
      "id": "announcements",
      "label": "Announcements",
      "default": [
        {
          "text": "Free shipping on orders over $50!"
        },
        {
          "text": "New collection just launched!"
        },
        {
          "text": "Subscribe to our newsletter for special offers."
        }
      ],
      "item": {
        "type": "text",
        "id": "text",
        "label": "Announcement Text"
      }
    }
  ]
}
{% endschema %}

Note: This is the base code, you need to edit it according to your theme file.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[beniwalanish]

[sahilsharma9515]

Hi @beniwalanish As mentioned you earlier that was a base code, you need to edit it according to your theme files, just copy and pasting the same code will not work, so please update the code according to your theme code files and it will work perfectly fine.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil