Marquee sliding announcement bar Dawn theme in mobile version

Store Design
,
1

I want to create an sliding/scrolling announcement bar(Marquee) only for mobile version with Dawn theme, with the text scrolling continuously, but not too fast. Anyonr any suggestions? I have tried some customisation with announcement-bar.liquid but the scrolling effect was not as I desired.

Website name: ciaobellastore.nl

2

Hello @CBellaS ,

Go to online store > Themes > Edit code > find header.liquid file

Add to the given code just below the header tag

{% if template contains 'index' %}
  
{% endif %}

save changes.

Now Find the base.css file (for styling the announcement bar)

Add the given code at the bottom of the base.css file

@media only screen and (max-width: 767px) {
  marquee {
    font-size: 14px;
    color: #ffffff;
    background-color: #000000;
    padding: 10px; /* Adjust padding as needed */
  }
}

Save changes.

3

Thank you for your answer. Unfortunately it didnt work well for me. I put the first piece of code actually in announcement-bar.liquid instead of header.liquid, but it still didnt work out. Also it did the slider in both versions, I only want it activated in mobile version due to limited space.

If you want you can check my website, password: thewti

4

You can try this:

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