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%);
}
}