FROM CACHE - en_header

Sliding announcement bar Text / Marquee Text DAWN THEME

FOP
Tourist
12 0 2

Hello,
I am looking for coding which allows the text on our announcement bar to scroll.  I found a Youtube video with coding but it appears to only work on the mobile version of the site and not the web version. 

Does anyone have a solution for this?

 

Thanks,

Natalie

Replies 8 (8)
spjjk
Shopify Partner
21 2 2
FOP
Tourist
12 0 2

Where would I add this code?

DavidEKim
Shopify Partner
184 46 63

Hi,

The <marquee> element is a deprecated HTML tag. If you use it, your pages or apps may be broken. To make the announcement bar to scroll, you need to modify the announcement bar coding.

 

If you don't have knowledge of css & liquid coding, you may copy the code below and replace your announcement-bar.liquid under Sections.

 

 

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      <div class="announcement-bar scroll-box color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
        {%- if block.settings.text != blank -%}
          <div class="scroll-container">
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <p class="announcement-bar__message h5" id="scroll-element">
                {{ block.settings.text | escape }}
                {%- if block.settings.link != blank -%}
                  {% render 'icon-arrow' %}
                {%- endif -%}
              </p>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
          </div>
        {%- endif -%}
      </div>
  {%- endcase -%}
{%- endfor -%}

{% style %}
.announcement-bar__message {
  text-align: right !important;
}
@-webkit-keyframes scroll{
  0% {
    margin-right: 0%;    
  }
  100% {
    margin-right: 100%;
  }
}
.scroll-box {
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.1em;
  overflow: hidden;
  width: 100%;
  background: rgb(var(--color-background));
  background: var(--gradient-background);
}
@media screen and (min-width: 768px) {
  .scroll-container {
    width: 50%;
    direction: rtl; 
    margin-left: 120px;
    overflow: hidden;
  }
}
@media screen and (max-width: 767px) {
  .scroll-container {
    width: 100%;
    direction: rtl; 
    margin-left: 24px;
    overflow: hidden;
  }
}
#scroll-element {
  padding: 10px;
}
{% endstyle %}
<script>

var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;"

</script>
{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "color_scheme",
          "options": [
            {
              "value": "accent-1",
              "label": "t:sections.all.colors.accent_1.label"
            },
            {
              "value": "accent-2",
              "label": "t:sections.all.colors.accent_2.label"
            },
            {
              "value": "background-1",
              "label": "t:sections.all.colors.background_1.label"
            },
            {
              "value": "background-2",
              "label": "t:sections.all.colors.background_2.label"
            },
            {
              "value": "inverse",
              "label": "t:sections.all.colors.inverse.label"
            }
          ],
          "default": "accent-1",
          "label": "t:sections.all.colors.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

 

 

The following elements are modified.

1. added scroll-box class in the first div

2. created second div with scroll-container class within scroll-box div

3. added scroll-element id in announcement-bar message

4. added necessary css style within the announcement-bar.liquid

5. added necessary javascript within the announcement-bar.liquid

 

You may change the scroll speed from above code.

To change the scroll speed, please change the number in the code from 120 to 80 or 160 per your needs.

 

var time = elemWidth/120; /* lower number for slow & higher number for fast scroll */

 

 

To change the scroll area width, you may change the width 50% to different number.

 

@media screen and (min-width: 768px) {
  .scroll-container {
    width: 50%; /* Change this number for scroll area width */
    direction: rtl; 
    margin-left: 120px; /* You may also change this number for left margin of the scroll area */
    overflow: hidden;
  }
}

 

If you have any questions, please let me know.

Hope it helps.

Thanks.

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
FOP
Tourist
12 0 2

Screen Shot 2022-08-06 at 18.28.13.pngIt only moves in the middle section even when the width is 100%
Not sure what to do to fix this 

spjjk
Shopify Partner
21 2 2

share store link 

FOP
Tourist
12 0 2
DavidEKim
Shopify Partner
184 46 63

Hi,

After you replace the announcement-bar.liquid, you should save the change and wait 5-10 seconds to apply the change. I just tested the code in Dawn theme.

20220806_183920.png

 

As you wanted to be 100% width. I tested it on my temporary store.

The store URL is https://blithe-cosmetic.myshopify.com/?preview_theme_id=134476038400 with PW: peoplevillage

 

20220806_190519.png20220806_190615.png

 

If you need help, let me know (send me a private message).

I can fix it for free.

It should take less than 5 minutes.

Hope it helps.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
FOP
Tourist
12 0 2

That has worked, we noticed that on the mobile site the text jumps when it enters from the right