Use a marquee with a Page builder HTML widget on any page. Copy the below sample marquee code. drag and drop HTML widget at the right place then paste the code. replace the sample text with your text. We use span tag to give space between text.
Sample Code
<div style="height:100px; overflow:hidden;" class='marquee' data-duration='22000' data-gap='100' data-duplicated='true' data-pauseOnHover='true' data-duplicateCount="10">
<h3>
<span>🌍 Worldwide express delivery & easy returns</span>
<span>🌼 up to 50% OFF spring styles</span>
<span>🚚 Get free shipping on orders of $100 or more</span>
</h3>
</div>
Logo Marquee Sample code
replace sample logo with your logo.
<div style="height:30px; overflow:hidden;" class='marquee' data-direction='right' data-duration='20000' data-gap='100' data-duplicated='true' data-pauseOnHover='true' data-duplicateCount="10">
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/gq.png?t=1688797173&_gl=1*3b8eoo*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="gq"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/vanity-fair.png?t=1688797174&_gl=1*3b8eoo*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="vanity-fair"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/vogue.png?t=1688797176&_gl=1*v134aq*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/elle.png?t=1688797177&_gl=1*v134aq*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="s0m,e title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/instyle.png?t=1688797178&_gl=1*v134aq*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/allure.png?t=1694159707&_gl=1*u3o8jz*_ga*NTM3MzI2NjczLjE2OTQxNTQwMTc.*_ga_WS2VZYPC6G*MTY5NDE1OTM3Ni4yLjEuMTY5NDE1OTcwNy4yNS4wLjA." width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/look1.png" width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/gq.png?t=1688797173&_gl=1*3b8eoo*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="gq"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/vanity-fair.png?t=1688797174&_gl=1*3b8eoo*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="vanity-fair"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/vogue.png?t=1688797176&_gl=1*v134aq*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/elle.png?t=1688797177&_gl=1*v134aq*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="s0m,e title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/instyle.png?t=1688797178&_gl=1*v134aq*_ga*MTY0MDM3ODIyOS4xNjg4MTMxMjMz*_ga_WS2VZYPC6G*MTY4ODgwNjc2Mi4yNy4xLjE2ODg4MDY3OTQuMjguMC4w" width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/allure.png?t=1694159707&_gl=1*u3o8jz*_ga*NTM3MzI2NjczLjE2OTQxNTQwMTc.*_ga_WS2VZYPC6G*MTY5NDE1OTM3Ni4yLjEuMTY5NDE1OTcwNy4yNS4wLjA." width="" height="30" alt="some title"></span>
<span><img src="https://cdn11.bigcommerce.com/s-9u6dasuoh9/images/stencil/original/image-manager/look1.png" width="" height="30" alt="some title"></span>
</div>Tips
Light Text over dark background
if you are using dark background and want to use white marquee text then use below style.
style=”color: #ffffff;”
<h3 style="color: #ffffff;">
</h3>Marquee Settings
<div
style="height:30px; overflow:hidden;"
class='marquee'
data-direction='right'
data-duration='20000'
data-gap='100'
data-duplicated='true'
data-pauseOnHover='true'
data-duplicateCount="10"
>style=”height:30px; overflow:hidden;” – to fix CLS, adjust the height value based on your layout requirements.
data-direction=’right’ – Direction towards which the marquee will animate 'left' / 'right' / 'up' / 'down'. Default: 'left'. Todo: need to change this to ltr/rtl etc
data-duration Duration in milliseconds in which you want your element to travel. Default: 5000.
suggest not to touch rest setting.