How can I get a continuous scrolling marquee for my announcement bar?

Store Design
, ,
1

Hi,

Ive been trying to get a marquee code for my announcement bar. I also want more than 1 pieces of text on it, and i want it to be scrolling continuously, without any pauses or flickers. Can someone help?

Thanks

2

Hey @monetstudios

Here you are https://codepen.io/vahidseo/pen/vYKWQj

Thanks

3

Hello @monetstudios ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677555292095.png
GemPages_0-1677555292095.png400×193 29.2 KB

  1. Open your “announcement-bar” or “announcement” file, and add code like this

GemPages_1-1677555391418.png
GemPages_1-1677555391418.png1842×880 60.3 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Hi Roman how do i put this code into my website, im having a bit of trouble with it

thanks

5

Hi Roman Could you show me how to install this

Thankyou

6

No need to install anything… Just follow the above instructions and you are done with it.

If you still can not fix it …

do let me know i will fix it for you for free through user access.

7

hi i want to use this https://codepen.io/vahidseo/pen/vYKWQj but i dont know where to place this code, can you attach some screenshots of how to do it

8

You can try this code it will help:

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