Automatic Sliding Announcement Bar in SHOPIFY Dawn

artrug
New Member
8 0 0

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.

Replies 8 (8)

Hey_Jak
Shopify Partner
96 6 14

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.

Jak | Top Rated Shopify Dev @ Upwork
- Shopify Blog
- Check my youtube: Hey Jak
Was your question answered? Mark it as an Accepted Solution.
artrug
New Member
8 0 0

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...

 

Theme.liquid file announcement bar.jpg

 

I did but I get an error.

Hey_Jak
Shopify Partner
96 6 14

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.

Jak | Top Rated Shopify Dev @ Upwork
- Shopify Blog
- Check my youtube: Hey Jak
Was your question answered? Mark it as an Accepted Solution.
artrug
New Member
8 0 0

Capture d’écran 2023-09-28 164715t.jpg

 

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

Hey_Jak
Shopify Partner
96 6 14

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 )

Jak | Top Rated Shopify Dev @ Upwork
- Shopify Blog
- Check my youtube: Hey Jak
Was your question answered? Mark it as an Accepted Solution.
artrug
New Member
8 0 0

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
Shopify Partner
96 6 14

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

Jak | Top Rated Shopify Dev @ Upwork
- Shopify Blog
- Check my youtube: Hey Jak
Was your question answered? Mark it as an Accepted Solution.
artrug
New Member
8 0 0

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.