Automatic Static sliding Announcement Bar (Dawn)

Store Design
1

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 :slightly_smiling_face:

Thank you!

1 Like
2

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

  

    {%- for block in section.blocks -%}
    
{{block.settings.message}}

    {%- endfor -%}
  

  

  

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

3

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

4

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

1 Like
5

@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

6

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
Theme.liquid file announcement bar.jpg992×850 101 KB

Screenshot 2:

Announcement bar after new section.jpg

1 Like
7

@KC14

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

8

@SpeedyDev ,

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

1 Like
9

@KC14

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

Thank you.

10

@SpeedyDev

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

1 Like
11

@KC14

Not admin access just collaboration access or staff access

Yes, sure.

12

@SpeedyDev ,

Sure, I sent an invite for staff access!

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

1 Like
13

@KC14

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

1 Like
14

@SpeedyDev ,

Nice it works! Thank you very much!

15

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

2 Likes
16

Hi @SpeedyDev ,

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

Best regareds,

Daniel

1 Like
17

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

Best Regards

@SpeedyDev @KC14

18

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

19

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