Back to Shopify Liquid
Shopify Liquid
Whole Sale
Drop this Shopify Liquid snippet into your theme to add the whole sale block. Copy the code below, paste it into your theme files, save and you're done.
54 lines · 1.8 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-deal-badge-Qwe123 {9 display: inline-flex;10 align-items: center;11 font-family: 'Roboto', sans-serif; /* Using Roboto font */12 font-size: 14px;13 }1415 .unique-highlight-Asd456 {16 background-color: #fdecea; /* Light red background */17 padding: 2px 5px;18 border-radius: 3px;19 font-weight: bold;20 color: #d9534f; /* Darker red text */21 border: 1px solid #f5c6c6; /* Border color one tone darker than background */22 display: inline-flex;23 align-items: center;24 }2526 .unique-highlight-Asd456 .unique-wholesale-Zxc789 {27 color: #d9534f; /* Darker red text */28 margin-left: 3px; /* Space between icon and text */29 }3031 .unique-extra-Rty012 {32 color: #d9534f; /* Darker red text */33 margin-left: 15px; /* Increased space between the two texts */34 animation: unique-pulse-Fgh345 2s infinite; /* Pulse animation */35 }3637 @keyframes unique-pulse-Fgh345 {38 0% { transform: scale(1); }39 50% { transform: scale(1.1); }40 100% { transform: scale(1); }41 }42 </style>43 <title>Deal Badge</title>44</head>45<body class="unique-body-Uio678">46 <div class="unique-deal-badge-Qwe123">47 <div class="unique-highlight-Asd456">48 <span class="unique-wholesale-Zxc789">Wholesale</span>49 </div>50 <div class="unique-extra-Rty012">2+ pieces, extra 5% off</div>51 </div>52</body>53</html>
