Welcome to CodeCrew Infotech
How To Add Multiple Announcement Bar Slider In Shopify
The announcement bar helps you to display the important information about your business.
Some owner are generally used it for the discount or Shipping purposes.
In fact, you only can add a message on this bar. If you want more messages, an announcement bar with a with message slider is a solution for you.
Step 1: Go to Shopify Admin and click on Online Store->Themes.
Step 2: Click on Actions->Edit code.
Step 3: Create a new section multiple-announcementbar.liquid.
Step 4: Paste the below code into this file and save it.
|
{%- if section.blocks.size > 0 and section.settings.show_announcement_bar -%} <div class="code-announcement-bar swiper-container"> <div class="code-messages swiper-wrapper"> {%- for block in section.blocks -%} <div class="code-message swiper-slide">{{block.settings.message}}</div> {%- endfor -%} </div> <div class="code-swiper-button swiper-button-prev"></div> <div class="code-swiper-button swiper-button-next"></div> </div> <p style="display:none!important;">Powered by <a href="//www.codecrewinfotech.com" target="_blank">codecrew.Com</a></p> <script src="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" /> <script> const swiper = new Swiper('.swiper-container', { {%- if section.settings.autoplay -%} autoplay: {delay: {{section.settings.delay}} }, {%- endif -%} loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script> <style> .code-announcement-bar{ background:{{section.settings.colorBackground}}; position: relative; overflow: hidden; } .code-announcement-bar .code-message{ text-align:center; color:{{section.settings.colorText}}; padding:0 7%; } .code-announcement-bar .swiper-button-next:after, .code-announcement-bar .swiper-container-rtl .swiper-button-prev:after, .code-announcement-bar .swiper-button-prev:after, .code-announcement-bar .swiper-container-rtl .swiper-button-next:after{ font-size: 15px; color:{{section.settings.colorText}}; } {%- if section.blocks.size < 2 %} .code-announcement-bar .code-swiper-button{display:none!important;} {%- endif -%} </style> {%- endif -%} {% schema %} { "name": "Announcement Bar", "settings": [ { "type": "checkbox", "id": "show_announcement_bar", "label": "Show" }, { "type": "checkbox", "id": "autoplay", "label": "Autoplay" }, { "type": "text", "id": "delay", "label": "Delay between transitions (in ms)", "default": "5000" }, { "type": "color", "id": "colorBackground", "label": "Background color", "default": "#ffffff" }, { "type": "color", "id": "colorText", "label": "Text color", "default": "#000" } ], "blocks": [ { "type": "header", "name": "Message", "settings": [ { "id": "message", "type": "textarea", "label": "Message" } ] } ] } {% endschema %} |
Step 5: After that click on a theme.liquid file and search {% section 'announcement-bar' %} and remove that.
Step 6: And add a new section we create earliest {% section 'multiple-announcement-bar' %} and save the theme.liquid file.
Step 7: Go to customize section and add multiple announcements you want and save it.
You may also like
