Back to Shopify Liquid
Shopify Liquid
Special Sale Orange
Drop this Shopify Liquid snippet into your theme to add the special sale orange block. Copy the code below, paste it into your theme files, save and you're done.
65 lines · 1.9 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 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">7 <style>8 .unique-sale-badge-XyZ123 {9 display: inline-flex;10 align-items: center;11 font-family: 'Roboto', sans-serif;12 font-size: 14px;13 color: #ff9900; /* Orange color */14 }1516 .unique-highlight-AbC456 {17 background-color: #ffe6cc; /* Light orange background */18 padding: 2px 5px;19 border-radius: 3px;20 font-weight: bold;21 color: #ff9900; /* Orange text color */22 display: inline-flex;23 align-items: center;24 }2526 .unique-highlight-AbC456 .unique-special-DeF789 {27 margin-left: 3px; /* Space between text */28 }2930 .unique-separator-GhI012 {31 margin: 0 10px; /* Space around the separator */32 }3334 .unique-extra-JkL345 {35 display: inline-flex;36 align-items: center;37 color: #ff9900; /* Orange color */38 font-weight: bold;39 animation: unique-blink-MnO678 1s infinite; /* Blinking animation */40 }4142 @keyframes unique-blink-MnO678 {43 0%, 100% {44 opacity: 1;45 }46 50% {47 opacity: 0.5;48 }49 }50 </style>51 <title>Special Sale</title>52</head>53<body class="unique-body-PqR910">54 <div class="unique-sale-badge-XyZ123">55 <div class="unique-highlight-AbC456">56 <span class="unique-special-DeF789">Special sale</span>57 </div>58 <div class="unique-separator-GhI012">|</div>59 <div class="unique-extra-JkL345">60 <span>Hurry, Limited Stock!</span>61 </div>62 </div>63</body>64</html>
