Shopify Custom Section Announcement Bar with Scrolling

Hi, My name is Mozzam. You can learn more about me on Upwork.

Today we are going to build a manageable announcement bar for updating our customers. Due to Christmas holidays, shipments can arrive late.

Here are the details.

Here are the complete details.

1. Go Shopify Code Editor

1. Then open Section > Create Liquid File By AnyName (In my case, I name it announcement.liquid.)

Paste the Code

{{ 'abar.css' | asset_url | stylesheet_tag }}
<div class="main-div">
<div class="main-text">{{ section.settings.bar }}</div>
</div>

{% schema %}
  {
    "name": "Bar", "tag": "section", "class": "section",
    "settings": [
      {
        "type": "text",
        "id": "bar",
        "label": "Bar Text"
      }
    ],
    "presets": [
      {
        "name": "Bar",
      }
    ],
    "enabled_on": {
      "templates": ["*"],
      "groups": ["header"],
    },
  }
{% endschema %}

1. Then in the asset folder create a CSS file.

.main-div{
  display: flex;
  justify-content: center;
  height: 40px;
  background-color: black;
  color: white;
  text-align: center;
  align-items: center;
}

.main-text{
  font-family: sans-serif;
  font-weight: semi-condensed;
}

.main-text{
  animation: textscroll 25s linear 1s reverse infinite;
}

@keyframes textscroll {
  0%{
    transform: translateX(-100vw);
  }
  100%{
    transform: translateX(100vw);
  }
}

@media screen and (max-width: 769px){
  .main-text{
  width: 100vw;
     white-space: nowrap;
      animation: textscroll 15s linear 1s reverse infinite;

}
} 

Here it is, and you can directly make changes in your theme.