Shopify Liquid
Infinite scrolling information

Drop this Shopify Liquid snippet into your theme to add the infinite scrolling information block. Copy the code below, paste it into your theme files, save and you're done.
124 lines · 5.1 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-v1 {
9            width: 100%;
10            padding: 20px 0;
11            overflow: hidden;
12            position: relative;
13            border: 1px solid #2e2f3c;
14            border-left: none;
15            border-right: none;
16            background-color: #f9f9f9;
17justify-content: center;
18align-items: center;
19        }
20
21.helps-with-text {
22    text-align: center;
23    font-weight: 500;
24    color: #2e2f3c;
25    margin-bottom: 15px;
26    font-size: 16px;
27    width: 100%;
28    display: inline-flex;
29    justify-content: center;
30}
31
32        .unique-announcement-wrapper-v1 {
33            display: flex;
34            white-space: nowrap;
35            animation: scroll-left 15s linear infinite;
36        }
37
38        .unique-announcement-text-v1 {
39            color: #2e2f3c;
40            font-size: 20px;
41            font-weight: bold;
42            margin-right: 25px;
43            letter-spacing: -0.5px;
44        }
45
46        @keyframes scroll-left {
47            0% {
48                transform: translateX(0);
49            }
50            100% {
51                transform: translateX(-100%);
52            }
53        }
54
55        /* Responsive adjustments */
56        @media (max-width: 768px) {
57            .unique-announcement-wrapper-v1 {
58                animation: scroll-left 12s linear infinite;
59            }
60            .unique-announcement-text-v1 {
61                font-size: 20px;
62            }
63            .helps-with-text {
64                font-size: 16px;
65            }
66        }
67    </style>
68</head>
69<body>
70    <div class="unique-announcement-bar-v1">
71<span class="helps-with-text">NO MORE</span>
72        <div class="unique-announcement-wrapper-v1">
73            <div class="unique-announcement-text-v1">LESS TANGLES </div> 
74            <div class="unique-announcement-text-v1"> - </div> 
75            <div class="unique-announcement-text-v1">LESS ACNES</div>
76            <div class="unique-announcement-text-v1"> - </div> 
77            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
78            <div class="unique-announcement-text-v1"> - </div>             
79            <div class="unique-announcement-text-v1">PSORIASIS</div>
80            <div class="unique-announcement-text-v1"> - </div>            
81            <div class="unique-announcement-text-v1">HARD WATER</div>
82            <div class="unique-announcement-text-v1"> - </div>  
83            <!-- Repeated content for seamless scrolling -->
84            <div class="unique-announcement-text-v1">LESS TANGLES </div> 
85            <div class="unique-announcement-text-v1"> - </div> 
86            <div class="unique-announcement-text-v1">LESS ACNES</div>
87            <div class="unique-announcement-text-v1"> - </div> 
88            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
89            <div class="unique-announcement-text-v1"> - </div>             
90            <div class="unique-announcement-text-v1">PSORIASIS</div>
91            <div class="unique-announcement-text-v1"> - </div>            
92            <div class="unique-announcement-text-v1">HARD WATER</div>
93            <div class="unique-announcement-text-v1"> - </div>
94 <div class="unique-announcement-text-v1">LESS TANGLES </div> 
95            <div class="unique-announcement-text-v1"> - </div> 
96            <div class="unique-announcement-text-v1">LESS ACNES</div>
97            <div class="unique-announcement-text-v1"> - </div> 
98            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
99            <div class="unique-announcement-text-v1"> - </div>             
100            <div class="unique-announcement-text-v1">PSORIASIS</div>
101            <div class="unique-announcement-text-v1"> - </div>            
102            <div class="unique-announcement-text-v1">HARD WATER</div>
103 <div class="unique-announcement-text-v1">LESS TANGLES </div> 
104            <div class="unique-announcement-text-v1"> - </div> 
105            <div class="unique-announcement-text-v1">LESS ACNES</div>
106            <div class="unique-announcement-text-v1"> - </div> 
107            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
108            <div class="unique-announcement-text-v1"> - </div>             
109            <div class="unique-announcement-text-v1">PSORIASIS</div>
110            <div class="unique-announcement-text-v1"> - </div>            
111            <div class="unique-announcement-text-v1">HARD WATER</div>
112 <div class="unique-announcement-text-v1">LESS TANGLES </div> 
113            <div class="unique-announcement-text-v1"> - </div> 
114            <div class="unique-announcement-text-v1">LESS ACNES</div>
115            <div class="unique-announcement-text-v1"> - </div> 
116            <div class="unique-announcement-text-v1">IRRITATED SKIN</div>
117            <div class="unique-announcement-text-v1"> - </div>             
118            <div class="unique-announcement-text-v1">PSORIASIS</div>
119            <div class="unique-announcement-text-v1"> - </div>            
120            <div class="unique-announcement-text-v1">HARD WATER</div>
121        </div>
122    </div>
123</body>
124</html>
Related snippets

/ shopify liquid
Infinite scrolling information

Related snippets

Before and after image slider

Reviews Slider v3

Made in USA

30 days Money Back Guarantee
