Automatic Sliding Announcement Bar in SHOPIFY Dawn

[artrug]

Hello,

I found this solution about how to edit the announcement bar to make it static and sliding but they don't say where to include  {% section 'announcement-bar-slider ' %} in the theme.liquid.

can someone help me please, I'm using the old version of Dawn theme.

[Hey_Jak]

Edit code -> search for ( theme liquid) 
inside the them.liquid search for {% sections 'header' %} / {% sections 'header-group' %}
You need to put the code before the header.

The header section may vary based on your theme version.

[artrug]

Thank you for your reply,

I followed the same steps as the ones in this thread:

https://community.shopify.com/c/shopify-design/automatic-static-sliding-announcement-bar-dawn/m-p/16...

I did but I get an error.

[Hey_Jak]

What error are you getting? Could you mention? It could be liquid error. Need to troubleshoot what you have done. It's hard to tell without seeing the backend.

[artrug]

this is what I get when I include the line {% section 'announcement-bar-slider ' %}  below announcement bar and top of header lines

[Hey_Jak]

Put this below code end of the animated.liquid file
{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}

Make sure change the name to animated... ( your section name )

[artrug]

Thank you for the support,

just to make sure as I'm not good at editing.

Change section name from "announcement-bar-slider." to "animated.liquid"

Copy this code in the theme.liquid section

{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}

change the "section name" to "animated.liquid" inside the code you send me

is that right?

[Hey_Jak]

Sorry for the confusion. But you don't have to change the section name. 
Let's say my section name is 'announcement-bar-slider'
1. create a section name it - announcement-bar-slider.liquid
   - inside the section paste this code

{% schema %}
  {
    "name": "announcement-bar-slider",
    "settings": []
  }
{% endschema %}

2. Assign the section in theme.liquid like this: {% section 'announcement-bar-slider ' %}

Clear the cache if needed. windows - ctrl+R

[artrug]

Thanks for your patience!

I already have a section that I created named "announcement-bar-slider.liquid"

{%- 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 %}

I delete this coding and replace it with yours?

or just add your code to the existing one.