Back to Shopify Liquid
Valentines Day
Shopify Liquid

Valentines Day

Drop this Shopify Liquid snippet into your theme to add the valentines day block. Copy the code below, paste it into your theme files, save and you're done.

63 lines · 1.5 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>Valentine's Day Badge</title>
7<style>
8 body.unique-body-Abc123 {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 margin: 0;
14 background-color: #fff;
15 }
16
17 .unique-badge-container-Def456 {
18 display: flex;
19 align-items: center;
20 background-color: #ffe6f7; /* Açık pembe arka plan */
21 border-radius: 12px;
22 padding: 8px 12px;
23 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24 font-size: 14px;
25 color: #d6336c; /* Koyu pembe metin rengi */
26 margin: 10px 0; /* Aşağı ve yukarı boşluk ekler */
27 }
28
29 .unique-badge-icon-Ghi789 {
30 width: 20px;
31 height: 20px;
32 margin-right: 8px;
33 }
34
35 .unique-animate-icon-Jkl012 {
36 animation: unique-pulse-Mno345 1s infinite;
37 }
38
39 @keyframes unique-pulse-Mno345 {
40 0% {
41 transform: scale(1);
42 }
43 50% {
44 transform: scale(1.1);
45 }
46 100% {
47 transform: scale(1);
48 }
49 }
50</style>
51</head>
52<body class="unique-body-Abc123">
53
54<div class="unique-badge-container-Def456">
55 <svg class="unique-badge-icon-Ghi789 unique-animate-icon-Jkl012" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
56 <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="#d6336c"/>
57 </svg>
58 <span>Valentine's Sale Ending Soon!</span>
59</div>
60
61</body>
62</html>

Related snippets