How to add announcement slider in shopify?

beniwalanish
Tourist
8 0 2

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

Screenshot 2024-05-15 at 15.03.36.png

Replies 3 (3)

sahilsharma9515
Shopify Partner
994 124 189

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


beniwalanish
Tourist
8 0 2

Screenshot 2024-05-16 at 12.52.56.png

sahilsharma9515
Shopify Partner
994 124 189

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️