Automatic Static sliding Announcement Bar (Dawn)

[KC14]

Hello everyone,

I would like to have an Automatic Static Sliding Announcement Bar just like Gymshark:

https://www.gymshark.com/ 

I am using Dawn Theme by the way.

Help would be appreciated 🙂

Thank you!

[SpeedyDev]

@KC14 

Hi,

Welcome to Shopify community,

Kindly follow this step,

Create a Section 'announcement-bar-slider.liquid' file,

{%- if  section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="zwk-announcement-bar swiper-container">
  <div class="zwk-messages swiper-wrapper">
    {%- for block in section.blocks -%}
    <div class="zwk-message swiper-slide">{{block.settings.message}}</div>
    {%- endfor -%}
  </div>
  <div class="zwk-swiper-button swiper-button-prev"></div>
  <div class="zwk-swiper-button swiper-button-next"></div>
</div>
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/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>
  .zwk-announcement-bar{
    background:{{section.settings.colorBackground}};
    position: relative;
    overflow: hidden;
  }
  div#shopify-section-Announcement-slider {
    text-align: center;
  }
  .zwk-announcement-bar .zwk-message{
    text-align:center;
    color:{{section.settings.colorText}};
    font-size:{{section.settings.font_size}}px;
    text-transform:{{section.settings.mobile_thumbnails1}};
    
  }
  .zwk-announcement-bar .swiper-button-next:after, .zwk-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
  .zwk-announcement-bar .swiper-button-prev:after, .zwk-announcement-bar .swiper-container-rtl .swiper-button-next:after{
    font-size: 15px;
    color:{{section.settings.colorText}};
  }
  {%- if  section.blocks.size < 2 %}
  .zwk-announcement-bar .zwk-swiper-button{display:block!important;}
  {%- endif -%}
</style>
{%- endif -%}

{% schema %}
  {
    "name": "Announcement slider 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"
      },
   {
      "type": "range",
      "id": "font_size",
      "min": 14,
      "max": 50,
      "step": 4,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
 {
      "type": "select",
      "id": "mobile_thumbnails1",
     "label": "Text transform",
      "options": [
        {
          "value": "uppercase",
          "label": "Upper case"
        },
        {
          "value": "lowercase",
          "label": "Lower case"
        },
       {
          "value": "Capitalize",
          "label": "Capitalize"
        }
      ]
    }
],
"blocks": [
      {
        "type": "header",
        "name": "Message",
        "settings": [
          {
              "id": "message",
              "type": "text",
             "label": "Enter your text"
            }
        ]
      }
]
  }
{% endschema %}

and paste this code.

Now Go to theme.liquid file and find put this {% section 'announcement-bar-slider ' %}

Below the announcement bar,

thank you,

Let me know, if you want to know more.

[KC14]

Hi @SpeedyDev ,

What do I exactly need to find in theme.liquid file?

You lost me when you said: "Now Go to theme.liquid file and find put this {% section 'announcement-bar-slider ' %} Below the announcement bar"

Thank you for your help

[SpeedyDev]

@KC14 

Why you lost?

their a simple on the top of the section you will find theme.liquid file.

yes, you have to add it on the theme.liquid file

[KC14]

Hi @SpeedyDev ,

Thank you, yes I know where to find the theme.liquid file.

But if I paste {% section 'announcement-bar-slider ' %} below the announcement bar in the theme.liquid file (screenshot 1) then I get a liquid error below my announcement bar (screenshot 2)

Screenshot 1:

Screenshot 2:

 

[SpeedyDev]

@KC14 

Have you Added the code on the Section?, or you created the Section.
named announcement-bar-slider.

[KC14]

@SpeedyDev ,

Yes I created the section named "announcement-bar-slider.liquid" and added the long code, just like you said to me right?

[SpeedyDev]

@KC14 

Let us, meet if you are having issue to add this.

Thank you.

[KC14]

@SpeedyDev 

Do you want me to give you access to the admin side on this email: [email protected] ?

[SpeedyDev]

@KC14 

Not admin access just collaboration access or staff access

Yes, sure.

[KC14]

@SpeedyDev ,

Sure, I sent an invite for staff access! 

Thank you, let me know if you can fix it or need anything else 🙂

[SpeedyDev · Accepted solution]

@KC14 

You can check it. Let me know, if you need any more help.

[KC14]

@SpeedyDev ,

Nice it works! Thank you very much!

[Louislow]

Hi @SpeedyDev  

I'm trying your code too and I get the same liquid error too. May I know what did you change to make it work for @KC14

[myKidsLounge]

Hi @SpeedyDev , 

I also dont get it to work, would you mind sharing how you did it for @KC14 ? 

Best regareds, 

Daniel 

[0URS27]

Do you still have the issue?  I found the issue and now its working for me, thank you speedy for the code, very gratefull

original: {% section 'announcement-bar-slider ' %}

change to: {% section 'announcement-bar-slider' %}

@Louislow @myKidsLounge @SpeedyDev @KC14 

[0URS27]

Hello Speedy I am having the same problem can you please share with me too.

Best Regards

@SpeedyDev @KC14 

[sapiens_sapiens]

Hello @SpeedyDev , what about the Dawn theme 9.0? Where should the call of the slider go?
Thank u in advance

[oscprofessional]

@KC14 ,

Hi You can refer this app.

https://apps.shopify.com/announcement-bar-with-slider

Or you can create custom app in your Shopify theme, If you are having good knowledge of code.