Back to Shopify Liquid
Shopify Liquid
Product features 3
Drop this Shopify Liquid snippet into your theme to add the product features 3 block. Copy the code below, paste it into your theme files, save and you're done.
103 lines · 8.0 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>Product Features</title>7 <style>8 :root {9 --text-color: #333;10 --hover-bg-color: #f1f1f1;11 --highlight-color: #000;12 --icon-color: #007BFF;13 --transition-duration: 0.3s;14 --font-family: 'Helvetica Neue', Arial, sans-serif;15 }1617 body.bdy-a123 {18 font-family: var(--font-family);19 display: flex;20 justify-content: center;21 align-items: flex-start;22 height: 100vh;23 margin: 0;24 background: #f0f0f0;25 padding: 20px;26 }2728 .container-x987 {29 width: 100%;30 max-width: 400px;31 display: flex;32 flex-direction: column;33 gap: 10px;34 }3536 .item-z456 {37 display: flex;38 align-items: center;39 padding: 5px 10px;40 border-radius: 8px;41 transition: background-color var(--transition-duration) ease, transform var(--transition-duration) ease;42 cursor: default;43 background: var(--hover-bg-color);44 }4546 .item-z456:hover {47 background-color: #e0e0e0;48 transform: translateX(10px);49 }5051 .icon-w321 {52 width: 24px;53 height: 24px;54 margin-right: 10px;55 transition: transform var(--transition-duration) ease;56 fill: var(--icon-color);57 }5859 .item-z456:hover .icon-w321 {60 transform: rotate(360deg);61 }6263 .text-v654 {64 font-size: 14px;65 color: var(--text-color);66 transition: color var(--transition-duration) ease;67 }6869 .item-z456:hover .text-v654 {70 color: var(--highlight-color);71 }7273 @media (max-width: 600px) {74 .text-v654 {75 font-size: 12px;76 }7778 .icon-w321 {79 width: 20px;80 height: 20px;81 margin-right: 8px;82 }83 }84 </style>85</head>86<body class="bdy-a123">87 <div class="container-x987">88 <div class="item-z456">89 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" class="icon-w321"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <path id="check-a" d="M4.29289322,0.292893219 C4.68341751,-0.0976310729 5.31658249,-0.0976310729 5.70710678,0.292893219 C6.09763107,0.683417511 6.09763107,1.31658249 5.70710678,1.70710678 L1.90917969,5.46118164 C1.5186554,5.85170593 0.885490417,5.85170593 0.494966125,5.46118164 C0.104441833,5.07065735 0.104441833,4.43749237 0.494966125,4.04696808 L4.29289322,0.292893219 Z"></path> <path id="check-c" d="M10.7071068,13.2928932 C11.0976311,13.6834175 11.0976311,14.3165825 10.7071068,14.7071068 C10.3165825,15.0976311 9.68341751,15.0976311 9.29289322,14.7071068 L0.292893219,5.70710678 C-0.0976310729,5.31658249 -0.0976310729,4.68341751 0.292893219,4.29289322 L4.29289322,0.292893219 C4.68341751,-0.0976310729 5.31658249,-0.0976310729 5.70710678,0.292893219 C6.09763107,0.683417511 6.09763107,1.31658249 5.70710678,1.70710678 L2.41421356,5 L10.7071068,13.2928932 Z"></path> </defs> <g fill="none" fill-rule="evenodd" transform="rotate(-90 11 7)"> <g transform="translate(1 1)"> <mask id="check-b" fill="#ffffff"> <use xlink:href="#check-a"></use> </mask> <use fill="#D8D8D8" fill-rule="nonzero" xlink:href="#check-a"></use> <g fill="#9effb1" mask="url(#check-b)"> <rect width="24" height="24" transform="translate(-7 -5)"></rect> </g> </g> <mask id="check-d" fill="#ffffff"> <use xlink:href="#check-c"></use> </mask> <use fill="#000000" fill-rule="nonzero" xlink:href="#check-c"></use> <g fill="#9458ff" mask="url(#check-d)"> <rect width="24" height="24" transform="translate(-6 -4)"></rect> </g> </g> </g></svg>90 <div class="text-v654">Easily Changeable 6 Different Heads</div>91 </div>92 <div class="item-z456">93 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" class="icon-w321"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <path id="check-a" d="M4.29289322,0.292893219 C4.68341751,-0.0976310729 5.31658249,-0.0976310729 5.70710678,0.292893219 C6.09763107,0.683417511 6.09763107,1.31658249 5.70710678,1.70710678 L1.90917969,5.46118164 C1.5186554,5.85170593 0.885490417,5.85170593 0.494966125,5.46118164 C0.104441833,5.07065735 0.104441833,4.43749237 0.494966125,4.04696808 L4.29289322,0.292893219 Z"></path> <path id="check-c" d="M10.7071068,13.2928932 C11.0976311,13.6834175 11.0976311,14.3165825 10.7071068,14.7071068 C10.3165825,15.0976311 9.68341751,15.0976311 9.29289322,14.7071068 L0.292893219,5.70710678 C-0.0976310729,5.31658249 -0.0976310729,4.68341751 0.292893219,4.29289322 L4.29289322,0.292893219 C4.68341751,-0.0976310729 5.31658249,-0.0976310729 5.70710678,0.292893219 C6.09763107,0.683417511 6.09763107,1.31658249 5.70710678,1.70710678 L2.41421356,5 L10.7071068,13.2928932 Z"></path> </defs> <g fill="none" fill-rule="evenodd" transform="rotate(-90 11 7)"> <g transform="translate(1 1)"> <mask id="check-b" fill="#ffffff"> <use xlink:href="#check-a"></use> </mask> <use fill="#D8D8D8" fill-rule="nonzero" xlink:href="#check-a"></use> <g fill="#9effb1" mask="url(#check-b)"> <rect width="24" height="24" transform="translate(-7 -5)"></rect> </g> </g> <mask id="check-d" fill="#ffffff"> <use xlink:href="#check-c"></use> </mask> <use fill="#000000" fill-rule="nonzero" xlink:href="#check-c"></use> <g fill="#9458ff" mask="url(#check-d)"> <rect width="24" height="24" transform="translate(-6 -4)"></rect> </g> </g> </g></svg>94 <div class="text-v654">Waterproof Charging Unit</div>95 </div>96 <div class="item-z456">97 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" class="icon-w321"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <path id="check-a" d="M4.29289322,0.292893219 C4.68341751,-0.0976310729 5.31658249,-0.0976310729 5.70710678,0.292893219 C6.09763107,0.683417511 6.09763107,1.31658249 5.70710678,1.70710678 L1.90917969,5.46118164 C1.5186554,5.85170593 0.885490417,5.85170593 0.494966125,5.46118164 C0.104441833,5.07065735 0.104441833,4.43749237 0.494966125,4.04696808 L4.29289322,0.292893219 Z"></path> <path id="check-c" d="M10.7071068,13.2928932 C11.0976311,13.6834175 11.0976311,14.3165825 10.7071068,14.7071068 C10.3165825,15.0976311 9.68341751,15.0976311 9.29289322,14.7071068 L0.292893219,5.70710678 C-0.0976310729,5.31658249 -0.0976310729,4.68341751 0.292893219,4.29289322 L4.29289322,0.292893219 C4.68341751,-0.0976310729 5.31658249,-0.0976310729 5.70710678,0.292893219 C6.09763107,0.683417511 6.09763107,1.31658249 5.70710678,1.70710678 L2.41421356,5 L10.7071068,13.2928932 Z"></path> </defs> <g fill="none" fill-rule="evenodd" transform="rotate(-90 11 7)"> <g transform="translate(1 1)"> <mask id="check-b" fill="#ffffff"> <use xlink:href="#check-a"></use> </mask> <use fill="#D8D8D8" fill-rule="nonzero" xlink:href="#check-a"></use> <g fill="#9effb1" mask="url(#check-b)"> <rect width="24" height="24" transform="translate(-7 -5)"></rect> </g> </g> <mask id="check-d" fill="#ffffff"> <use xlink:href="#check-c"></use> </mask> <use fill="#000000" fill-rule="nonzero" xlink:href="#check-c"></use> <g fill="#9458ff" mask="url(#check-d)"> <rect width="24" height="24" transform="translate(-6 -4)"></rect> </g> </g> </g></svg>98 <div class="text-v654">3.5 hours continuous operation time</div>99 </div>100 </div>101</body>102</html>
