How to marquee effect on my custom liquid announcementbar?

Store Design
, ,
1

Hi, I really hope someone can help with my request because I felt I have tried everything. I know that it is possible to use effect but by announcementbar looks very wierd and doesn’t slide correctly when trying to fill into my custom liquid.

My coding looks like this in my custom liquid:

Left Icon
Fri Fragt på alle ordre over 499,-
Middle Icon
Interiør, design og håndplukket vintage til hjemmet
Hurtig levering 1-3 dage
Right Icon
.announcement-bar { display: flex; align-items: center; background-color: white; padding: 10px; background: #F6DCDF; } .announcement-section { flex: 1; display: flex; align-items: center; justify-content: center; } .icon-image { width: 24px; height: 24px; margin-right: 8px; margin-left: 8px; } .announcement-text { text-align: center; } {% comment %} Mobile-specific CSS and JavaScript {% endcomment %} @media (max-width: 600px) { .announcement-section:not(:first-child) { display: none; } .announcement-section.active { display: flex; } .announcement-section { animation: switchText 3s infinite; } @keyframes switchText { 0%, 100% { display: none; } 10%, 100% { display: flex; } } }

Where should I place to get the announcementbar move correctly?

Kind regards
Kathrine

2

@Dadelfri3007 you can add like this, add css according to your design, comment default one
https://prnt.sc/l8_DRyj0Umg_

3

Hello @Dadelfri3007 Try This

Left Icon
Fri Fragt på alle ordre over 499,-
Middle Icon
Interiør, design og håndplukket vintage til hjemmet
Hurtig levering 1-3 dage
Right Icon
/* Existing CSS for announcement bar */ .announcement-bar { display: flex; align-items: center; background-color: white; padding: 10px; background: #F6DCDF; } .announcement-section { flex: 1; display: flex; align-items: center; justify-content: center; } .icon-image { width: 24px; height: 24px; margin-right: 8px; margin-left: 8px; } .announcement-text { text-align: center; } /* Additional styles for element */ .marquee-wrapper { width: 100%; /* Ensure the marquee spans the entire width */ overflow: hidden; /* Hide any content that overflows the container */ } .marquee-content { display: inline-block; /* Ensure the marquee content doesn't break */ } /* Adjust the speed and behavior of the marquee */ /* You can experiment with these values to achieve the desired effect */ marquee { behavior: scroll; /* Make the content scroll */ direction: left; /* Scroll from right to left */ animation: marquee-slide 10s linear infinite; /* Customize the animation */ }
4

Thanks for the quick reply! I have tried but sadly it doesn’t work. Do you have any other suggestions? Can I do it directly under edit theme, in my custom liquid section?

Kind regards

5

Okay, now it almost work. My only problem now is that my background color on my announcementbar also moves along with the text and images. Instead of being static.

Anyone knows how to fix it? When I place the in front of the div class=“announcement-section” it doesn’t move along with the text and images but then my text and images clutter into the middle in one big bundle.

6

@Dadelfri3007 Add new class and apply background-color css, it works for me
https://prnt.sc/lwO1khdfWfG4

Rajvi__patel_0-1709121358908.png
Rajvi__patel_0-1709121358908.png1801×841 280 KB

7

Hi, thanks for the reply. It also almost work but this time the three text phrases end up on top of each other in the middle of the announcementbar in stead of being in a pretty line. It did fix the problem with the background color moving along with everything though

Any suggestions - I would prefer to just edit the code in my costum liquid section dicrectly when editing my theme

Kind regards

8

Maybe i’m doing something wrong when coding in my custom liquid. Still the same problem - Thanks for your answers and help!

9

@Rajvi_patel_1 It works now! Thanks! I might have missed a little thing but it works now. Thank you so much :slightly_smiling_face:

10

Follow this new video:

Create a new section marquee and paste below code.

You can add marquee section to any page.


  
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {%- for block in section.blocks -%}
            {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
    {%- endif -%}
  

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

Hi @MRamzan I followed the video and it seems to be working great, there is only one thing that doesn’t work and that’s the pipe lines that are supposed to separate the messages. When I insert the pipe lines there is only little to no space between the messages.

Any chance you could please give me a hand?
https://glowbe.store

Thank you!

12

Hello Lucy.

I will have to adjust the code according to your requirement. Can you add me staff or I can send you collaborator request. Thanks.

13

Hi @MRamzan , thanks a lot for your quick reply, I have figured it out already! I first watched your old video, but now with the updated one it works perfectly.

Thanks a lot again, you’re a big help :slightly_smiling_face:
Lucy

14

Amazing. Let me know if you face any issues. Or you have to add any new feature to your store.

15

Hi MRamzan,

Why is it that the image track resets once the first image comes back on screen and is not in an infinite loop? This does not occur in the text marquee, which is in an infinite loop, yet the style .track{} code is the same.

Best,

Peter Nunes

FinThink Inc.