Message announcement bar Dawn Theme

[Ulysse12342]

Hello, 

I would like to add multiple different messages in my announcement bar but when I try to add one in the code it says error so I don't know what to do.

Does anyone know how to do this please? 

Website: https://6f3exa-pb.myshopify.com/

[LizHoang]

Hi, You can try adding here.

[Ulysse12342]

Thanks for the answer, it's a custom code, I don't have that 

[CodingFifty]

Hi @Ulysse12342,

Go to the Customization, select custom liquid, and paste the code there.

<div id="shopify-section-marquee" class="shopify-section"><style>
  .custom-marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 43px;
    overflow-x: hidden;
    background:#000000; 
    color:#ffffff; 
  }
  .custom-marquee a {
    color:#ffffff; 
  }
  .custom-marquee .track {
      position: absolute;
      bottom: 6px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 50s linear infinite;
  }
  .custom-marquee .content {
    margin-left: 200px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="custom-marquee " role="region"><a href="/collections/products" class=""><div class="track ">
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
            <span class="content marquee-text">Free Shipping on Orders Over $60!</span>Liquid error (sections/marquee line 50): Could not find asset snippets/icon-arrow.liquid
</div></a></div>
<script>
var marquees = document.getElementsByClassName("marquee-text");
for (let i = 0; i < marquees.length; i++) {
   // console.log(marquees.item(i));
  let str = marquees.item(i).innerHTML;
  let improvedText = str.replaceAll("|", "            ")
  console.log(improvedText)
  marquees.item(i).innerHTML = improvedText
}
</script>
</div>

[Ulysse12342]

It works perfectly on computer but on mobile it cuts out before the end and restarts

[CodingFifty]

Try this code.

<div id="shopify-section-marquee" class="shopify-section">
  <style>
    .custom-marquee {
      position: relative;
      width: 100vw;
      max-width: 100%;
      height: 43px;
      overflow-x: hidden;
      background: #000000; 
      color: #ffffff; 
    }

    .custom-marquee a {
      color: #ffffff; 
    }

    .custom-marquee .track {
      position: absolute;
      bottom: 6px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 50s linear infinite;
    }

    .custom-marquee .content {
      margin-left: 200px;
    }

    @keyframes marquee {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-20%);
      }
    }

    /* Mobile adjustments */
    @media only screen and (max-width: 768px) {
      .custom-marquee .track {
        animation: marquee-mobile 100s linear infinite; /* Slower animation on mobile */
      }

      .custom-marquee .content {
        margin-left: 100px; /* Adjust margin for mobile */
      }

      @keyframes marquee-mobile {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }
    }
  </style>

  <div class="custom-marquee" role="region">
    <a href="/collections/products" class="">
      <div class="track">
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
        <span class="content marquee-text">Free Shipping on Orders Over $60!</span>
      </div>
    </a>
  </div>

  <script>
    var marquees = document.getElementsByClassName("marquee-text");
    for (let i = 0; i < marquees.length; i++) {
      let str = marquees.item(i).innerHTML;
      let improvedText = str.replaceAll("|", "            ");
      marquees.item(i).innerHTML = improvedText;
    }
  </script>
</div>

[Ulysse12342]

It works great but when I manage this part it doesn't work on mobile. (Sorry for the inconvenience)

.custom-marquee .track {
      position: absolute;
      bottom: 6px;
      white-space: nowrap;
      will-change: transform;
      animation: marquee 2s linear infinite;
    }

    .custom-marquee .content {
      margin-left: 240px;