Announcement Bar is not aligned - Dawn Theme

[thingsontheway]

If there are at least two announcements in the announcement bar, there are 3 rows getting generated for announcement bar. 

 Earlier it was fine. 

The piece of code which made it like this was: 

{% comment %}
<script>
setInterval(() => {
let button = document.querySelector(".announcement-bar button.slider-button.slider-button--prev");
button && button.click();
}, 1000)
</script>
{% endcomment %}

I added this code to make a floating announcement bar; to float announcements from left to right horizontally. (of course it didn't work)

So I removed this piece of code from theme.liqud file. Even after removing the code the misalignment is still there.

Can someone please help with this?

Site: hamperpick.myshopify.com 

[EBOOST]

Hi @thingsontheway ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> customize -> custom CSS

2. Add code below

body .announcement-bar-slider.slider-buttons {
  display: flex !important;
}

3. If you want to show layout likes the screenshot below you can add more CSS

body:has(.section-header .header:not(.drawer-menu)) .announcement-bar-section .utility-bar .page-width{
  display: flex;
}

[thingsontheway]

Thank you @EBOOST  it worked.

Do you know a way to make the announcements float from left hand side page to the right hand side of the page on a moderate and constant speed here? I am trying it very hard but to no avail. 

[EBOOST]

Hi,

Do you mean like this one https://codepen.io/Knovour/pen/boJNPN? but from left to right?

[thingsontheway]

Yes @EBOOST . Exactly this one. Right to left only. 

[EBOOST]

Hi,

You can refer marquee tag https://www.w3schools.in/html/marquee-tag -> follow this one to change code.

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
<style>

 marquee .content {
   display: flex;
   flex-flow: row-reverse;
   width: 100%;
 }
.page-width.utility-bar__grid {
  overflow: hidden;
}

</style
{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif
  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
  {{ block.shopify_attributes }}
>
  <div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
    {%- if section.settings.show_social and social_icons -%}
      {%- render 'social-icons' -%}
    {%- endif -%}
    {%- if section.blocks.size == 1 -%}
      <div
        class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ block.shopify_attributes }}
      >
        {%- if section.blocks.first.settings.text != blank -%}
          {%- if section.blocks.first.settings.link != blank -%}
            <a
              href="{{ section.blocks.first.settings.link }}"
              class="announcement-bar__link link link--text focus-inset animate-arrow"
            >
          {%- endif -%}
          <p class="announcement-bar__message h5">
            <span>{{ section.blocks.first.settings.text | escape }}</span>
            {%- if section.blocks.first.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </p>
          {%- if section.blocks.first.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- elsif section.blocks.size > 1 -%}
      <marquee width="100%" behavior="scroll" direction="right" scrollamount="12">
        
    
          <div class="content" >
            {%- for block in section.blocks -%}
              <div
                class="slideshow__slide slider__slide grid__item grid--1-col"
                id="Slide-{{ section.id }}-{{ forloop.index }}"
                {{ block.shopify_attributes }}
                role="group"
                aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
                aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                tabindex="-1"
              >
                <div
                  class="announcement-bar__announcement"
                  role="region"
                  aria-label="{{ 'sections.header.announcement' | t }}"
                  {{ block.shopify_attributes }}
                >
                  {%- if block.settings.text != blank -%}
                    {%- 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">
                      <span>{{ block.settings.text | escape }}</span>
                      {%- if block.settings.link != blank -%}
                        {% render 'icon-arrow' %}
                      {%- endif -%}
                    </p>
                    {%- if block.settings.link != blank -%}
                      </a>
                    {%- endif -%}
                  {%- endif -%}
                </div>
              </div>
            {%- endfor -%}
          </div>
          
       
      </marquee>
      {%- if request.design_mode -%}
        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
        <style>
          /* theme editor power preview fix */
          .announcement-bar-slider .slider__slide[aria-hidden='true'] {
            visibility: hidden;
          }
        </style>
      {%- endif -%}
    {%- endif -%}
    <div class="localization-wrapper">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
                {{ 'localization.country_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="country_code"
                aria-labelledby="AnnouncementCountryMobileLabelNoScript"
              >
                {%- for country in localization.available_countries -%}
                  <option
                    value="{{ country.iso_code }}"
                    {%- if country.iso_code == localization.country.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ country.name }} ({{ country.currency.iso_code }}
                    {{ country.currency.symbol }})
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
              {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
                {{ 'localization.language_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="locale_code"
                aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
              >
                {%- for language in localization.available_languages -%}
                  <option
                    value="{{ language.iso_code }}"
                    lang="{{ language.iso_code }}"
                    {%- if language.iso_code == localization.language.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ language.endonym_name | capitalize }}
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
              {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__1.content",
      "info": "t:sections.announcement-bar.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.announcement-bar.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__2.content"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__3.content",
      "info": "t:sections.announcement-bar.settings.header__3.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__4.content",
      "info": "t:sections.announcement-bar.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
    }
  ],
  "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": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.announcement-bar.presets.name",
      "blocks": [
        {
          "type": "announcement"
        }
      ]
    }
  ]
}
{% endschema %}

[thingsontheway]

Thanks @EBOOST . I will read about marquee.

Meanwhile, where should I add this code? At the end of theme.liquid file?

[EBOOST]

Hi,

You go to sections/announcement-bar.liquid replace with code above ( Remember create a back up in the case you would like to rollback old code)

[thingsontheway]

@EBOOST 

Getting this error while formatting the file

I have cross checked. I copied the complete code you provided.

[EBOOST]

Hi,

Could you share your code(sections/announcement-bar.liquid)? I will help to apply it.

[thingsontheway]

Hi @EBOOST 

This is the code as requested.

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
<style>
   marquee .content {
     display: flex;
     flex-flow: row-reverse;
     width: 100%;
   }
  .page-width.utility-bar__grid {
    overflow: hidden;
  }
</style>
{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif
  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
  {{ block.shopify_attributes }}
>
  <div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
    {%- if section.settings.show_social and social_icons -%}
      {%- render 'social-icons' -%}
    {%- endif -%}
    {%- if section.blocks.size == 1 -%}
      <div
        class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ block.shopify_attributes }}
      >
        {%- if section.blocks.first.settings.text != blank -%}
          {%- if section.blocks.first.settings.link != blank -%}
            <a
              href="{{ section.blocks.first.settings.link }}"
              class="announcement-bar__link link link--text focus-inset animate-arrow"
            >
          {%- endif -%}
          <p class="announcement-bar__message h5">
            <span>{{ section.blocks.first.settings.text | escape }}</span>
            {%- if section.blocks.first.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </p>
          {%- if section.blocks.first.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- elsif section.blocks.size > 1 -%}
      <marquee width="100%" behavior="scroll" direction="left" scrollamount="5">
        <div class="content">
          {%- for block in section.blocks -%}
            <div
              class="slideshow__slide slider__slide grid__item grid--1-col"
              id="Slide-{{ section.id }}-{{ forloop.index }}"
              {{ block.shopify_attributes }}
              role="group"
              aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
              aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
              tabindex="-1"
            >
              <div
                class="announcement-bar__announcement"
                role="region"
                aria-label="{{ 'sections.header.announcement' | t }}"
                {{ block.shopify_attributes }}
              >
                {%- if block.settings.text != blank -%}
                  {%- 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">
                    <span>{{ block.settings.text | escape }}</span>
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                  </p>
                  {%- if block.settings.link != blank -%}
                    </a>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endfor -%}
        </div>
      </marquee>
      {%- if request.design_mode -%}
        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
        <style>
          /* theme editor power preview fix */
          .announcement-bar-slider .slider__slide[aria-hidden='true'] {
            visibility: hidden;
          }
        </style>
      {%- endif -%}
    {%- endif -%}
    <div class="localization-wrapper">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
                {{ 'localization.country_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="country_code"
                aria-labelledby="AnnouncementCountryMobileLabelNoScript"
              >
                {%- for country in localization.available_countries -%}
                  <option
                    value="{{ country.iso_code }}"
                    {%- if country.iso_code == localization.country.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ country.name }} ({{ country.currency.iso_code }}
                    {{ country.currency.symbol }})
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
              {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
                {{ 'localization.language_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="locale_code"
                aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
              >
                {%- for language in localization.available_languages -%}
                  <option
                    value="{{ language.iso_code }}"
                    lang="{{ language.iso_code }}"
                    {%- if language.iso_code == localization.language.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ language.endonym_name | capitalize }}
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
              {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__1.content",
      "info": "t:sections.announcement-bar.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.announcement-bar.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__2.content"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__3.content",
      "info": "t:sections.announcement-bar.settings.header__3.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__4.content",
      "info": "t:sections.announcement-bar.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
    }
  ],
  "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": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.announcement-bar.presets.name",
      "blocks": [
        {
          "type": "announcement"
        }
      ]
    }
  ]
}
{% endschema %}

The movement is fine for the mobile screen. But the announcement bar's movement on the desktop screen is dodgy. 

[thingsontheway]

Password is dazzle.

[EBOOST]

Hi @thingsontheway ,

You can try code below:

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
<style>
  .marquee {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.marquee .content {
  white-space: nowrap;
  will-change: transform;
  animation: marquee 10s linear infinite;
  display: flex;
}

@keyframes marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
</style>
{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif
  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
  {{ block.shopify_attributes }}
>
  <div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
    {%- if section.settings.show_social and social_icons -%}
      {%- render 'social-icons' -%}
    {%- endif -%}
    {%- if section.blocks.size == 1 -%}
      <div
        class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ block.shopify_attributes }}
      >
        {%- if section.blocks.first.settings.text != blank -%}
          {%- if section.blocks.first.settings.link != blank -%}
            <a
              href="{{ section.blocks.first.settings.link }}"
              class="announcement-bar__link link link--text focus-inset animate-arrow"
            >
          {%- endif -%}
          <p class="announcement-bar__message h5">
            <span>{{ section.blocks.first.settings.text | escape }}</span>
            {%- if section.blocks.first.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </p>
          {%- if section.blocks.first.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- elsif section.blocks.size > 1 -%}
      <div class="marquee">
        <div class="content" style="width: {{ section.blocks.size | times: 100 }}% ">
          {%- for block in section.blocks -%}
            <div
              class="slideshow__slide slider__slide grid__item grid--1-col"
              id="Slide-{{ section.id }}-{{ forloop.index }}"
              {{ block.shopify_attributes }}
              role="group"
              aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
              aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
              tabindex="-1"
            >
              <div
                class="announcement-bar__announcement"
                role="region"
                aria-label="{{ 'sections.header.announcement' | t }}"
                {{ block.shopify_attributes }}
              >
                {%- if block.settings.text != blank -%}
                  {%- 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">
                    <span>{{ block.settings.text | escape }}</span>
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                  </p>
                  {%- if block.settings.link != blank -%}
                    </a>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>
      {%- if request.design_mode -%}
        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
        <style>
          /* theme editor power preview fix */
          .announcement-bar-slider .slider__slide[aria-hidden='true'] {
            visibility: hidden;
          }
        </style>
      {%- endif -%}
    {%- endif -%}
    <div class="localization-wrapper">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
                {{ 'localization.country_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="country_code"
                aria-labelledby="AnnouncementCountryMobileLabelNoScript"
              >
                {%- for country in localization.available_countries -%}
                  <option
                    value="{{ country.iso_code }}"
                    {%- if country.iso_code == localization.country.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ country.name }} ({{ country.currency.iso_code }}
                    {{ country.currency.symbol }})
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
              {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
                {{ 'localization.language_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="locale_code"
                aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
              >
                {%- for language in localization.available_languages -%}
                  <option
                    value="{{ language.iso_code }}"
                    lang="{{ language.iso_code }}"
                    {%- if language.iso_code == localization.language.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ language.endonym_name | capitalize }}
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
              {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__1.content",
      "info": "t:sections.announcement-bar.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.announcement-bar.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__2.content"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__3.content",
      "info": "t:sections.announcement-bar.settings.header__3.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__4.content",
      "info": "t:sections.announcement-bar.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
    }
  ],
  "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": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.announcement-bar.presets.name",
      "blocks": [
        {
          "type": "announcement"
        }
      ]
    }
  ]
}
{% endschema %}

[thingsontheway]

Thank you @EBOOST for making the changes. However, the result is still the same. It is working on mobile screen, but not on desktop screen.

Website: hamperpick.in

password: dazzle 

[EBOOST · Accepted solution]

Hi,

Maybe add more CSS below:

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
<style>
  .utility-bar__grid.utility-bar__grid--3-col {
    display: block;
  }
  .marquee {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.marquee .content {
  white-space: nowrap;
  will-change: transform;
  animation: marquee 10s linear infinite;
  display: flex;
}

@keyframes marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
</style>
{%- liquid
  assign social_icons = true
  if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
    assign social_icons = false
  endif
  if section.settings.enable_country_selector or section.settings.enable_language_selector
    assign language_country_selector = true
  endif
  if section.blocks.size > 0
    assign announcement_bar = true
  endif
-%}

{% if social_icons %}
  {{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{% endif %}

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator and section.blocks.size > 0 %} utility-bar--bottom-border{% elsif section.settings.show_line_separator and section.settings.show_social and social_icons%} utility-bar--bottom-border-social-only{% endif %}{% if section.settings.enable_country_selector or section.settings.enable_language_selector %} header-localization{% endif %}"
  {{ block.shopify_attributes }}
>
  <div class="page-width utility-bar__grid{% if announcement_bar and language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--3-col{% elsif language_country_selector or section.settings.show_social and social_icons %} utility-bar__grid--2-col{% endif %}">
    {%- if section.settings.show_social and social_icons -%}
      {%- render 'social-icons' -%}
    {%- endif -%}
    {%- if section.blocks.size == 1 -%}
      <div
        class="announcement-bar{% if section.settings.show_social %} announcement-bar--one-announcement{% endif %}"
        role="region"
        aria-label="{{ 'sections.header.announcement' | t }}"
        {{ block.shopify_attributes }}
      >
        {%- if section.blocks.first.settings.text != blank -%}
          {%- if section.blocks.first.settings.link != blank -%}
            <a
              href="{{ section.blocks.first.settings.link }}"
              class="announcement-bar__link link link--text focus-inset animate-arrow"
            >
          {%- endif -%}
          <p class="announcement-bar__message h5">
            <span>{{ section.blocks.first.settings.text | escape }}</span>
            {%- if section.blocks.first.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </p>
          {%- if section.blocks.first.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
    {%- elsif section.blocks.size > 1 -%}
      <div class="marquee">
        <div class="content" style="width: {{ section.blocks.size | times: 100 }}% ">
          {%- for block in section.blocks -%}
            <div
              class="slideshow__slide slider__slide grid__item grid--1-col"
              id="Slide-{{ section.id }}-{{ forloop.index }}"
              {{ block.shopify_attributes }}
              role="group"
              aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
              aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
              tabindex="-1"
            >
              <div
                class="announcement-bar__announcement"
                role="region"
                aria-label="{{ 'sections.header.announcement' | t }}"
                {{ block.shopify_attributes }}
              >
                {%- if block.settings.text != blank -%}
                  {%- 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">
                    <span>{{ block.settings.text | escape }}</span>
                    {%- if block.settings.link != blank -%}
                      {% render 'icon-arrow' %}
                    {%- endif -%}
                  </p>
                  {%- if block.settings.link != blank -%}
                    </a>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>
      {%- if request.design_mode -%}
        <script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
        <style>
          /* theme editor power preview fix */
          .announcement-bar-slider .slider__slide[aria-hidden='true'] {
            visibility: hidden;
          }
        </style>
      {%- endif -%}
    {%- endif -%}
    <div class="localization-wrapper">
      {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementCountryMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementCountryMobileLabelNoScript">
                {{ 'localization.country_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="country_code"
                aria-labelledby="AnnouncementCountryMobileLabelNoScript"
              >
                {%- for country in localization.available_countries -%}
                  <option
                    value="{{ country.iso_code }}"
                    {%- if country.iso_code == localization.country.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ country.name }} ({{ country.currency.iso_code }}
                    {{ country.currency.symbol }})
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementCountryForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementCountryLabel">{{ 'localization.country_label' | t }}</h2>
              {%- render 'country-localization', localPosition: 'AnnouncementCountry' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {% endif %}

      {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
        <noscript class="small-hide medium-hide">
          {%- form 'localization', id: 'AnnouncementLanguageMobileFormNoScript', class: 'localization-form' -%}
            <div class="localization-form__select">
              <h2 class="visually-hidden" id="AnnouncementLanguageMobileLabelNoScript">
                {{ 'localization.language_label' | t }}
              </h2>
              <select
                class="localization-selector link"
                name="locale_code"
                aria-labelledby="AnnouncementLanguageMobileLabelNoScript"
              >
                {%- for language in localization.available_languages -%}
                  <option
                    value="{{ language.iso_code }}"
                    lang="{{ language.iso_code }}"
                    {%- if language.iso_code == localization.language.iso_code %}
                      selected
                    {% endif %}
                  >
                    {{ language.endonym_name | capitalize }}
                  </option>
                {%- endfor -%}
              </select>
              {% render 'icon-caret' %}
            </div>
            <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
          {%- endform -%}
        </noscript>

        <localization-form class="small-hide medium-hide no-js-hidden">
          {%- form 'localization', id: 'AnnouncementLanguageForm', class: 'localization-form' -%}
            <div>
              <h2 class="visually-hidden" id="AnnouncementLanguageLabel">{{ 'localization.language_label' | t }}</h2>
              {%- render 'language-localization', localPosition: 'AnnouncementLanguage' -%}
            </div>
          {%- endform -%}
        </localization-form>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "enabled_on": {
    "groups": ["header"]
  },
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-4"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__1.content",
      "info": "t:sections.announcement-bar.settings.header__1.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": false,
      "label": "t:sections.announcement-bar.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__2.content"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 3,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__3.content",
      "info": "t:sections.announcement-bar.settings.header__3.info"
    },
    {
      "type": "checkbox",
      "id": "enable_country_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_country_selector.label"
    },
    {
      "type": "header",
      "content": "t:sections.announcement-bar.settings.header__4.content",
      "info": "t:sections.announcement-bar.settings.header__4.info"
    },
    {
      "type": "checkbox",
      "id": "enable_language_selector",
      "default": false,
      "label": "t:sections.announcement-bar.settings.enable_language_selector.label"
    }
  ],
  "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": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.announcement-bar.presets.name",
      "blocks": [
        {
          "type": "announcement"
        }
      ]
    }
  ]
}
{% endschema %}

[thingsontheway]

Thank you @EBOOST . it is almost working. There is a small pause at one point. But I will work it out. Thank you once again for your time and efforts. 

[thingsontheway]

Never mind @EBOOST . I figured that out. 

It is working kinda as I expected. However, the text is disappearing before midway of the screen. I want it move like all way from one end of desktop/mobile screen to another end of screen.  Just the way you shared here https://codepen.io/Knovour/pen/boJNPN

Just to note:

I am getting orange line under block.shopify_attributes stating "unknow object 'block' used".