How to Add Marquee Scrolling Text Animation in Pagefly Shopify Page Builder

In this video we will see How to Add Marquee Scrolling Text Animation in Pagefly Shopify Page Builder

First Take > HTML/Liquid Element in Pagefly APP

Then Paste Code Below

---------------------------------

<div class="marquee">
  <div class="marquee-content">
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>30 day money back guarantee</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>FREE UK delivery</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>30 day money back guarantee</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>FREE UK delivery</span>
    </div>

    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>30 day money back guarantee</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>FREE UK delivery</span>
    </div>

    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>30 day money back guarantee</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>Easy returns</span>
    </div>
    <div class="marquee-item">
      <img src="https://cdn.shopify.com/s/files/1/0637/9238/2112/files/Group_2607491.png?v=1723724928" alt="Checkmark">
      <span>FREE UK delivery</span>
    </div>

  </div>
</div>
---------------
Then open code editor inside Pagefly and paste below CSS Code
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
 
  padding: 10px 0;
  box-sizing: border-box;
  position: relative;
}

.marquee-content {
  display: flex;
  animation: marquee 15s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  margin-right: 50px;
  flex-shrink: 0;
}

.marquee-item img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.marquee-item span {
  color: white;
font-size:20px;
  /* Set text color to white */
}

@keyframes marquee {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}