How can I modify my marquee announcement bar on the Dawn theme?

[Quincko]

Hello,

i addeda Marquee Announcement Bar in my Store and i really love it. But i would like to make 2 changes to it.

Number 1: i would like to have more than 1 message in the announcement bar.

Number 2: i would like the text to start in the middle of the screen and not on the right.

Here is a Store which got it exactly how i would like to have it. https://www.elevateclo.com/ Can somebody help me do it like that.

My Store: https://quincko.de/

Password: Keba

Btw: i am using the Dawn Theme.

Thanks and best regards

[PageFly-Victor]

Hi @Quincko 

This is Victor from PageFly - Shopify Page Builder App

Number 2 will be solve when you add more message to the margue.

Please help me to screenshot your code or paste it here, i will check a tell you how to add msg to it

Also you can try to add the msg in the theme customizer

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[Quincko]

Hi,

this is the Code:

<Style>
.announcement-bar__message {
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
-moz-animation: scroll-left 2s linear infinite;
-webkit-animation: scroll-left 2s linear infinite;
animation: scroll-left 20s linear infinite;
}
.announcement-bar {
overflow: hidden;
height: 35px;
}

@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
}
}

@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
}
}

@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@media only screen and (max-width: 800px) {
.announcement-bar__message {
font-size: 13px;
animation: scroll-left 20s linear infinite;
}
.home-page-video video {
width: 100%;
}
#shopify-section-slideshow img, .index-slideshow-section img {
height: unset !important;
/* opacity: 0.8 !important; */
}
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 400px;
}

@-moz-keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
}
100% {
-moz-transform: translateX(-150%);
}
}

@-webkit-keyframes scroll-left {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-150%);
}
}

@keyframes scroll-left {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-150%);
-webkit-transform: translateX(-150%);
transform: translateX(-150%);
}
}
}
@media only screen and (max-width: 600px) {
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 260px;
}

}
@media only screen and (max-width: 500px) {
#shopify-section-slideshow, #shopify-section-slideshow .slick-list, .index-slideshow-section, .index-slideshow-section .slick-list {
height: 240px;
}

}
</Style>

Best regards

[PageFly-Victor · Accepted solution]

Hi @Quincko 

your custom code is not good, please use mine and follow the guide

Go to annoucement-bar.liquid in theme code

Paste this code at the top of the file

          <script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>

After that paste this code below like this

<div id="node-marquee">
<span style="margin: 0 50px;"> Your message  👑   </span>
<span style="margin: 0 50px;"> Your message  👑   </span>
<span style="margin: 0 50px;"> Your message  👑   </span>
  
</div>
<script>
nodeMarquee({
    parent: '#node-marquee',
    speed: 1
});
</script>

And remove all your code.
Hope this can help you solve the issue

[Quincko]

It works.

thank you so much 🙏

[Quincko]

How can i change the colors, the font and the size of the new announcement bar? 

[PageFly-Victor]

you can go to base.css and style like this 
paste this code at the end of the file

#node-marquee > span {
font-size: 20px;
color: red;
}

[Quincko]

Unfortunately it doesn‘t work

[PageFly-Victor]

Please style inline to the node-marquee like this

replace the current one with the new one
Then you can change the size and color

<div style="font-size: 20px; color: red;" id="node-marquee"> 

[Quincko]

I am sorry but it still doesn´t work. The bar is doing what it should but i can´t seem to change anything besides the text. But i would need to change the padding to the top, the colors and also the font.

[le_X_Atelier_]

Hey,

I had done this with the code but my problem is that there is still the other announcement bar on the top and the marquee one with the text directly above and when i remove the stocked one the marquee one also will be removed 

I added a pptx file that you can see what is the problem so maybe you can help me with this. 

[komesoap]

Hi Victor, I followed your instructions and it works beautifully! I just have one question: my animated arrow link appears below the text and I want to move it to behind the rolling text. Is there a way to do that and have a unique link arrow for each of my messages?

[PageFly-Victor]

Hi @komesoap Can you share with me your store URL for me to take a look? 

Then i will give you a code to fix that.

Thank you

[komesoap]

@PageFly-Victor Thanks for responding Victor! Here's my link: d04c2c.myshopify.com

I managed to remove the arrow from below, but I'm wondering if there's a way to add it behind each message with a unique url. If it's too complicated to execute, no worries about it!

[PageFly-Victor]

Hi @komesoap In case you want to create a arrow behind each text, please follow my guide:

paste this to base.css

svg {
  line-height: 19px !important;
  width: 15px !important; 
}
.node-marquee__el span {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
}

then replace this code to your code, in annoucement bar.liquid

          <div id="node-marquee">
<span style="margin: 0 50px;"> Your message  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
    </span>
<span style="margin: 0 50px;"> Your message   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
   </span>
<span style="margin: 0 50px;"> Your message  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg>
    </span>
  
</div>
<script>
nodeMarquee({
    parent: '#node-marquee',
    speed: 1
});
</script>

[komesoap]

@PageFly-Victor Thank you so much for your help, Victor!

[wawmegastore]

Hello @PageFly-Victor

I've read your reply and i appreciate it. but i want to take it further more :

1) i want to localize : i use if (Shopify.locale=='')  to get the user selected locale. how to dynamically assign the messages ? where to add the if (Shopify.locale=='')   in the messages <div> section or  in the <script> nodeMarquee({  section ?

2) i want the marquee to appear in the same announcement line , not above . i tried to clear the static line , but this hides the announcement bar altogether.

Regards

Wawmegastore
 

[MRamzan]

Here is the updated video you can follow:

Create a new section marquee and paste below code.

You can add marquee section to any page.

<style>
  .section-{{ section.id }}.custom-marquee {
    display: flex;
    align-items: center;
    height: {{section.settings.marquee_height}}px;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .section-{{ section.id }}.custom-marquee a {
    color:{{section.settings.colorText}}; 
    text-decoration: none;
  }
  .section-{{ section.id }}.custom-marquee .track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 12s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee .content {
    margin-left: 40px;
    font-size: {{section.settings.font_size}}px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            {%- for block in section.blocks -%}
            <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
    {%- endif -%}
  </div>
{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "type": "range",
      "id": "marquee_height",
      "min": 24,
      "max": 200,
      "step": 2,
      "default": 46,
      "label": "Marquee height"
    },
    {
      "type": "range",
      "id": "font_size",
      "min": 8,
      "max": 100,
      "step": 2,
      "default": 24,
      "label": "Font size"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}