Automatic Static sliding Announcement Bar (Dawn)

Solved

Automatic Static sliding Announcement Bar (Dawn)

KC14
Explorer
66 0 29

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!

Accepted Solution (1)
SpeedyDev
Trailblazer
199 17 39

This is an accepted solution.

@KC14 

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

banned

View solution in original post

Replies 18 (18)

SpeedyDev
Trailblazer
199 17 39

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

 

banned
KC14
Explorer
66 0 29

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
Trailblazer
199 17 39

@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

banned
KC14
Explorer
66 0 29

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:

Theme.liquid file announcement bar.jpg

Screenshot 2:

Announcement bar after new section.jpg

SpeedyDev
Trailblazer
199 17 39

@KC14 

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

banned
KC14
Explorer
66 0 29

@SpeedyDev ,

 

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

SpeedyDev
Trailblazer
199 17 39

@KC14 

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

Thank you.

banned
KC14
Explorer
66 0 29

@SpeedyDev 

 

Do you want me to give you access to the admin side on this email: ravirajsam221@gmail.com ?

SpeedyDev
Trailblazer
199 17 39

@KC14 

Not admin access just collaboration access or staff access

Yes, sure.

banned
KC14
Explorer
66 0 29

@SpeedyDev ,

 

Sure, I sent an invite for staff access! 

 

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

SpeedyDev
Trailblazer
199 17 39

This is an accepted solution.

@KC14 

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

banned
KC14
Explorer
66 0 29

@SpeedyDev ,

 

Nice it works! Thank you very much!

Louislow
Tourist
4 0 2

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
Excursionist
26 1 5

Hi @SpeedyDev , 

 

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

 

Best regareds, 

Daniel 

0URS27
Visitor
2 0 0

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
Visitor
2 0 0

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

Best Regards

@SpeedyDev @KC14 

sapiens_sapiens
Shopify Partner
19 0 2

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

oscprofessional
Shopify Partner
15958 2387 3095

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free