Back to Shopify Liquid
Shopify Liquid
Infinite Announcement Bar
Drop this Shopify Liquid snippet into your theme to add the infinite announcement bar block. Copy the code below, paste it into your theme files, save and you're done.
75 lines · 3.7 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Announcement Bar with Infinite Scroll</title>7 <style>8 .unique-announcement-bar {9 width: 100%;10 background-image: linear-gradient(45deg, #1cbcc3,#1cbcc3, #4abf8f,#4abf8f 80%);11 padding: 3px 0;12 overflow: hidden;13 white-space: nowrap;14 position: relative;15 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);16 }17 .unique-announcement-wrapper {18 display: flex;19 animation: unique-scroll-text 8s linear infinite;20 }21 .unique-announcement-text {22 color: #fffff9;23 font-size: 12px;24 font-weight: bold;25 margin-right: 25px;26 }27 @keyframes unique-scroll-text {28 0% {29 transform: translateX(0);30 }31 100% {32 transform: translateX(-100%);33 }34 }35 </style>36 </head>37 <body>38 <div class="unique-announcement-bar">39 <div class="unique-announcement-wrapper">40 <div class="unique-announcement-text">Announcement goes here</div>41 <div class="unique-announcement-text">Announcement goes here</div>42 <div class="unique-announcement-text">Announcement goes here</div>43 <div class="unique-announcement-text">Announcement goes here</div>44 <div class="unique-announcement-text">Announcement goes here</div>45 <div class="unique-announcement-text">Announcement goes here</div>46 <div class="unique-announcement-text">Announcement goes here</div>47 <div class="unique-announcement-text">Announcement goes here</div>48 <div class="unique-announcement-text">Announcement goes here</div>49 <div class="unique-announcement-text">Announcement goes here</div>50 <div class="unique-announcement-text">Announcement goes here</div>51 <div class="unique-announcement-text">Announcement goes here</div>52 <div class="unique-announcement-text">Announcement goes here</div>53 <div class="unique-announcement-text">Announcement goes here</div>54 <div class="unique-announcement-text">Announcement goes here</div>55 <div class="unique-announcement-text">Announcement goes here</div>56 <div class="unique-announcement-text">Announcement goes here</div>57 <div class="unique-announcement-text">Announcement goes here</div>58 <div class="unique-announcement-text">Announcement goes here</div>59 <div class="unique-announcement-text">Announcement goes here</div>60 <div class="unique-announcement-text">Announcement goes here</div>61 <div class="unique-announcement-text">Announcement goes here</div>62 <div class="unique-announcement-text">Announcement goes here</div>63 <div class="unique-announcement-text">Announcement goes here</div>64 <div class="unique-announcement-text">Announcement goes here</div>65 <div class="unique-announcement-text">Announcement goes here</div>66 <div class="unique-announcement-text">Announcement goes here</div>67 <div class="unique-announcement-text">Announcement goes here</div>68 <div class="unique-announcement-text">Announcement goes here</div>69 <div class="unique-announcement-text">Announcement goes here</div>70 <div class="unique-announcement-text">Announcement goes here</div>71 <div class="unique-announcement-text">Announcement goes here</div>72 </div>73 </div>74 </body>75</html>
